<template>
  <div>
    <Centered1280Box class="Roles">
      <WhiteCard class="Roles__WhiteCard">
        <div class="Roles__Header">Роли</div>
        <re-table
          :data="roles"
          :columns="columns"
          :loading="loading"
          :pagination.sync="pagination"
          :rows-per-page-options="[5, 10, 25, 50, 100]"
          @request="onRequest"
        />
      </WhiteCard>
    </Centered1280Box>
    <ModalEditCountSessionRole
      :editable-role="editableRole"
      @refresh="refreshEditDialog()"
      @close="closeEditDialog()"
    />
  </div>
</template>

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

<style lang="scss" scoped>
.Roles {
  &__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);
  }
}
</style>
