<DataTable
  @modelName="permission"
  @page={{this.page}}
  @search={{this.search}}
  @updatePage={{fn this.updateQueryParam "page"}}
  @updateSearch={{fn this.updateQueryParam "search"}}
  as |table|
>
  <table.head as |Column|>
    <th>
      {{t "emeis.permissions.headings.name"}}
    </th>
    <th>
      {{t "emeis.permissions.headings.slug"}}
    </th>
    <th>
      {{t "emeis.permissions.headings.description"}}
    </th>
    {{#each this.customColumns as |extraColumn|}}
      <Column
        @sort={{if
          extraColumn.sortable
          (concat "metainfo__" extraColumn.slug)
          ""
        }}
        data-test-custom-column={{extraColumn.slug}}
      >
        {{optional-translate extraColumn.heading}}
      </Column>
    {{/each}}
  </table.head>
  <table.body as |body|>
    <body.row>
      {{#let body.model as |permission|}}
        <td class="uk-width-1-4" data-test-permission-name={{permission.id}}>
          <LinkTo
            @route="permissions.edit"
            @model={{permission}}
            class="uk-link-text"
          >
            {{permission.name}}
          </LinkTo>
        </td>

        <td class="uk-width-1-4" data-test-permission-slug={{permission.id}}>
          {{permission.slug}}
        </td>

        <td class="uk-width-expand" data-test-permission-desc={{permission.id}}>
          {{permission.description}}
        </td>
        {{#each this.customColumns as |extraColumn|}}
          <td class="uk-width-expand" data-test-custom-row={{extraColumn.slug}}>
            {{optional-localized-value
              (get permission.metainfo extraColumn.slug)
              "permission"
            }}
          </td>
        {{/each}}
      {{/let}}
    </body.row>
  </table.body>
</DataTable>