<DataTable
  @modelName="role"
  @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.roles.headings.name"}}
    </th>
    <th>
      {{t "emeis.roles.headings.slug"}}
    </th>
    <th>
      {{t "emeis.roles.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 |role|}}
        <td class="uk-width-1-4" data-test-role-name={{role.id}}>
          <LinkTo @route="roles.edit" @model={{role}} class="uk-link-text">
            {{role.name}}
          </LinkTo>
        </td>

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