<template>
  <Centered1280Box class="AccountsTable">
    <WhiteCard class="AccountsTable__WhiteCard">
      <div class="AccountsTable__Header">
        Сотрудники
        <div class="AccountsTable__Actions">
          <r-btn
            v-if="isSecurityAdmin"
            label="Создать"
            icon="create"
            @click="create"
          />
        </div>
      </div>
      <accounts-search-bar
        v-model="filter"
        :is-admin="isSecurityAdmin"
        :loading="loading"
        @search="executeSearch"
      />
      <sort-bar
        v-model="sortButtons"
        :pagination="pagination"
        :loading="loading"
        @click="handleSortClick"
      />
      <re-table
        :data="data"
        :columns="columns"
        :loading="loading"
        :pagination.sync="pagination"
        :rows-per-page-options="[10, 25, 50, 100]"
        @request="onRequest"
      >
        <template v-slot:body-item-account="props">
          <LinkCell
            route="account"
            :routeParams="(account) => ({ id: account.accountId })"
            :row="props.row"
            :value="props.row.accountFullName"
          />
        </template>
        <template v-slot:body-item-roles="props">
          <r-btn label="Показать" @click="showModalRoles(props.row)" />
        </template>
      </re-table>
      <CreateModal
        :show-modal-create="showModalCreate"
        @close="showModalCreate = false"
      />
      <RolesModal :openedAccount="openedAccount" @close="closeRoles()" />
    </WhiteCard>
  </Centered1280Box>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="scss" scoped>
.AccountsTable {
  &__WhiteCard {
    padding: 10px;
  }

  &__Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Golos Text, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    color: rgba(2, 12, 18, 0.9);
  }
  &__Actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
}
</style>
