{% macro render(props) -%}
<div class="table__wrapper">
  <table class="table">
    <tr class="table__row header">
      <th class="table__header">Sr No.</th>
      {% for header in props["header"] %}
      <th class="table__header">{{header.display_name}}</th>
      {% endfor %}
      <th class="table__header"></th>
      <th class="table__header"></th>
    </tr>
    {% for content in props["content"] %}
    <tr class="table__row">
      <td class="table__cell">{{loop.index}}</td>
      {% for header in props["header"] %}
      <td class="table__cell">{{content[header["value"]]["display_name"]}}</td>
      {% endfor %}
      <td class="table__cell icon">
        <a href="{{content['edit_url']['url']}}">edit</a>
      </td>
      <td class="table__cell icon">
        <a href="{{content['delete_url']['url']}}">delete</a>
      </td>
    </tr>
    {% endfor %}
  </table>
</div>
{%- endmacro %}