<template>
  <b-container
    :style="{ display: 'flex', 'flex-direction': 'column' }"
    fluid="xxl pt-0 m-0"
    class="event-logs-section"
  >
    <page-title />
    <div class="event-log-head-container">
      <span class="regular-12px">Срок хранения событий:</span>
      <span class="semi-bold-12px">42 дня</span>
      <span class="regular-12px red" style="color: $red-brand-primary"
        >Изменить</span
      >
      <div class="form-control event-log-search">
        <button class="search-button">
          <img
            class="event-log-search__icon"
            src="@/assets/images/search-icon.svg"
          />
        </button>
        <b-form-input
          v-model="searchInput"
          type="text"
          class="event-log-search__input"
          placeholder="Поиск по журналу"
          @input="onChangeSearchInput"
          @clear-search="onClearSearchInput"
        >
        </b-form-input>
      </div>
    </div>
    <div class="event-logs__section">
      <div class="event-logs__filter-container">
        <span class="caption-12px">{{ $t('pageEventLogs.eventFilter') }}</span>
        <b-form-select
          v-model="eventFilter"
          :options="eventFilters"
          class="event-logs__filter regular-14px"
        />
      </div>
      <div class="event-logs__filter-container">
        <span class="caption-12px">{{
          $t('pageEventLogs.eventTypeFilter')
        }}</span>
        <b-form-select
          v-model="eventTypeFilter"
          :options="eventTypeFilters"
          class="event-logs__filter regular-14px"
        />
      </div>
      <div class="event-logs__filter-container">
        <span class="caption-12px">{{
          $t('pageEventLogs.eventSourseFilter')
        }}</span>
        <b-form-select
          v-model="eventSourseFilter"
          :options="eventSourseFilters"
          class="event-logs__filter regular-14px"
        />
      </div>
      <div class="event-logs__filter-container">
        <span class="caption-12px">{{
          $t('pageEventLogs.eventDateFilter')
        }}</span>
        <b-form-select
          v-model="eventDateFilter"
          :options="eventDateFilters"
          class="event-logs__filter-date regular-14px"
        />
      </div>
      <popover
        id="popover-reactive-1"
        description="pageEventLogs.clearLogs"
        popup="pageEventLogs.clearLogs_popup"
        button="pageEventLogs.clear"
        :isclear="true"
        class="clear-popover"
      />
    </div>
    <table-toolbar
      ref="toolbar"
      :selected-items-count="selectedRows.length"
      :actions="batchActions"
      @clear-selected="clearSelectedRows($refs.table)"
    >
      <template #toolbar-buttons>
        <b-button
          variant="primary"
          class="table-toolbar__resolved-button"
          @click="resolveLogs"
        >
          <img
            class="sourse__img"
            src="@/assets/images/event-logs/resolved-button.svg"
          />
          {{ $t('pageEventLogs.event_resolve') }}
        </b-button>
        <b-button
          variant="primary"
          class="table-toolbar__unresolved-button"
          @click="unresolveLogs"
        >
          <img
            class="sourse__img"
            src="@/assets/images/event-logs/archive.svg"
          />
          {{ $t('pageEventLogs.archive') }}
        </b-button>
      </template>
    </table-toolbar>
    <div id="event-logs-table-wrapper">
      <b-table
        id="event-logs-table"
        ref="table"
        responsive="md"
        class="event-logs-table"
        selectable
        no-select-on-click
        sort-icon-left
        :sticky-header="stickyHeader"
        :no-border-collapse="true"
        no-sort-reset
        :sort-desc="sortDesc"
        sort-by="id"
        :fields="fields"
        :items="filteredLogs"
        :sort-compare="onSortCompare"
        :empty-text="$t('global.table.emptyMessage')"
        :empty-filtered-text="$t('global.table.emptySearchMessage')"
        :filter="searchFilter"
        @filtered="onFiltered"
        @row-selected="onRowSelected($event, filteredLogs.length)"
      >
        <!-- Checkbox column -->
        <template #head(checkbox)>
          <b-form-checkbox
            v-model="tableHeaderCheckboxModel"
            data-test-id="eventLogs-checkbox-selectAll"
            :indeterminate="tableHeaderCheckboxIndeterminate"
            @change="onChangeHeaderCheckbox($refs.table)"
          >
            <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
          </b-form-checkbox>
        </template>
        <template #cell(checkbox)="row">
          <b-form-checkbox
            v-model="row.rowSelected"
            :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
            @change="toggleSelectRow($refs.table, row.index)"
          >
            <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
          </b-form-checkbox>
        </template>
        <template #cell(description)="data">
          <b-row class="semi-bold-16px tretiatry">
            {{ data.item.description.name }}
          </b-row>
          <b-row
            class="regular-12px tretiatry pointer"
            @click="toggleRowDetails(data)"
          >
            {{ data.item.description.description }}</b-row
          >
        </template>
        <template #row-details="{ index }">
          <b-container fluid>
            <b-col class="mt-1 mb-2 regular-12px tretiatry">
              <span class="row-details">
                {{
                  `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.
                   Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.`
                }}
                {{ $t(filteredLogs[index].description.description) }}
              </span>
            </b-col>
          </b-container>
        </template>
        <!-- Severity column -->
        <template #cell(severity)="{ value }">
          <span v-if="value === 'Критические'" class="bold-12px__caps errors">{{
            value
          }}</span>
          <span
            v-else-if="value === 'Предупреждения'"
            class="bold-12px__caps warning"
          >
            {{ value }}
          </span>
          <span v-else class="bold-12px__caps information">{{ value }}</span>
        </template>
        <!-- Date column -->
        <template #cell(source)="{ value }">
          <b-row v-if="value === 'Процессоры'">
            <img
              class="sourse__img"
              src="@/assets/images/event-logs/processor.svg"
            />
            <span>{{ value }}</span>
          </b-row>
          <b-row v-else-if="value === 'Вентиляторы'">
            <img
              class="sourse__img"
              src="@/assets/images/event-logs/fans.svg"
            />
            <span class="pointer" @click="redirectFans">{{ value }}</span>
          </b-row>
          <b-row v-else-if="value === 'RAID-контролеры'">
            <img
              class="sourse__img"
              src="@/assets/images/event-logs/raid-controllers.svg"
            />
            <span>{{ value }}</span>
          </b-row>
          <b-row v-else>
            <img
              src="@/assets/images/event-logs/memory-module.svg"
              class="sourse__img"
            />
            <span>{{ value }}</span>
          </b-row>
        </template>

        <template #cell(date)="{ value }">
          <img src="@/assets/images/event-logs/time.svg" class="sourse__img" />
          <span class="regular-12px quaternary"> {{ value }} </span>
        </template>

        <!-- Status column -->
        <template #cell(status)="{ value }">
          <b-row v-if="value === true">
            <img
              class="sourse__img"
              src="@/assets/images/event-logs/resolved.svg"
            />
            <span class="semi-bold-12px__caps resolved">
              {{ $t('pageEventLogs.resolved') }}
            </span>
          </b-row>
          <b-row v-else>
            <img
              class="sourse__img"
              src="@/assets/images/event-logs/not-resolved.svg"
            />
            <span class="semi-bold-12px__caps not-resolved">
              {{ $t('pageEventLogs.unresolved') }}</span
            >
          </b-row>
        </template>
      </b-table>
    </div>
    <div class="pagination-container">
      <div class="pagination-content">
        <span class="semi-bold-16px"> Страница </span>
        <img class="sourse__img" src="@/assets/images/arrow-left.svg" />
        <span class="semi-bold-16px page-input"> 1 </span>
        <span class="semi-bold-16px"> из </span>
        <span class="semi-bold-16px"> 123 </span>
        <img class="sourse__img" src="@/assets/images/arrow-right.svg" />
      </div>
      <div class="pagination-items-limit">
        <span class="semi-bold-16px"> Показывать по </span>
        <b-form-select
          v-model="itemsPerPage"
          :options="itemsPerPageOptions"
          class="event-logs__filter items-per-page semi-bold-16px"
        />
        <span class="semi-bold-16px"> записей на странице </span>
      </div>
    </div>
  </b-container>
</template>

<script>
import { omit } from 'lodash';
import PageTitle from '@/components/Global/PageTitle';
import Popover from '@/components/Global/Popover';
import TableToolbar from '@/components/Global/TableToolbar';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
import BVTableSelectableMixin, {
  selectedRows,
  tableHeaderCheckboxModel,
  tableHeaderCheckboxIndeterminate,
} from '@/components/Mixins/BVTableSelectableMixin';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import TableSortMixin from '@/components/Mixins/TableSortMixin';
import TableRowExpandMixin, {
  expandRowLabel,
} from '@/components/Mixins/TableRowExpandMixin';
import SearchFilterMixin, {
  searchFilter,
} from '@/components/Mixins/SearchFilterMixin';

export default {
  components: {
    PageTitle,
    Popover,
    TableToolbar,
  },
  mixins: [
    BVTableSelectableMixin,
    BVToastMixin,
    LoadingBarMixin,
    TableFilterMixin,
    DataFormatterMixin,
    TableSortMixin,
    TableRowExpandMixin,
    SearchFilterMixin,
  ],
  beforeRouteLeave(to, from, next) {
    // Hide loader if the user navigates to another page
    // before request is fulfilled.
    this.hideLoader();
    next();
  },
  data() {
    return {
      sortDesc: true,
      stickyHeader: 'calc(100vh - 243px)',
      itemsPerPage: 50,
      itemsPerPageOptions: [
        {
          value: 10,
          text: '10',
        },
        {
          value: 50,
          text: '50',
        },
        {
          value: 100,
          text: '100',
        },
      ],
      fields: [
        {
          key: 'checkbox',
          sortable: false,
          thClass: ' event-logs-table__th',
          class: 'event-logs-table__id',
          tdClass: 'event-logs-table__td',
        },
        {
          key: 'id',
          label: this.$t('pageEventLogs.table.id'),
          sortable: true,
          thClass: 'bold-12px__caps event-logs-table__th',
          tdClass: 'semi-bold-12px event-logs-table__td',
        },
        {
          key: 'description',
          label: this.$t('pageEventLogs.table.about_event'),
          thClass: 'bold-12px__caps event-logs-table__th',
          tdClass: 'event-logs-table__td',
        },
        {
          key: 'severity',
          label: this.$t('pageEventLogs.table.severity'),
          thClass: 'bold-12px__caps event-logs-table__th',
          tdClass: 'event-logs-table__td',
        },
        {
          key: 'source',
          label: this.$t('pageEventLogs.table.source'),
          thClass: 'bold-12px__caps event-logs-table__th',
          tdClass: 'semi-bold-12px__caps tretiatry event-logs-table__td',
        },
        {
          key: 'date',
          label: this.$t('pageEventLogs.table.date'),
          sortable: true,
          thClass: `bold-12px__caps event-logs-table__th event-logs-table__th__date`,
          tdClass: 'event-logs-table__td',
        },
        {
          key: 'status',
          sortable: true,
          label: this.$t('pageEventLogs.table.status'),
          thClass: 'bold-12px__caps event-logs-table__th',
          tdClass: 'event-logs-table__td',
        },
      ],
      allLogs: [
        {
          checkbox: false,
          id: 1,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
            full_description: '',
          },
          severity: 'Критические',
          source: 'Вентиляторы',
          date: '23.11.2021 в 13.36',
          status: true,
        },
        {
          checkbox: false,
          id: 2,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Информационное',
          source: 'Модули памяти',
          date: '23.11.2021 в 13.36',
          status: false,
        },
        {
          checkbox: false,
          id: 3,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Критические',
          source: 'Процессоры',
          date: '23.11.2021 в 13.36',
          status: true,
        },
        {
          checkbox: false,
          id: 4,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Предупреждения',
          source: 'RAID-контролеры',
          date: '23.11.2021 в 13.36',
          status: 'expandRow',
        },
        {
          checkbox: false,
          id: 5,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Критические',
          source: 'Процессоры',
          date: '23.11.2021 в 13.36',
          status: true,
        },
        {
          checkbox: false,
          id: 6,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Предупреждения',
          source: 'RAID-контролеры',
          date: '23.11.2021 в 13.36',
          status: false,
        },
        {
          checkbox: false,
          id: 7,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Информационное',
          source: 'Модули памяти',
          date: '23.11.2021 в 13.36',
          status: false,
        },
        {
          checkbox: false,
          id: 8,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Критические',
          source: 'Вентиляторы',
          date: '23.11.2021 в 13.36',
          status: true,
        },
        {
          checkbox: false,
          id: 9,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Информационное',
          source: 'Модули памяти',
          date: '23.11.2021 в 13.36',
          status: false,
        },
        {
          checkbox: false,
          id: 10,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Критические',
          source: 'Процессоры',
          date: '23.11.2021 в 13.36',
          status: true,
        },
        {
          checkbox: false,
          id: 11,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Предупреждения',
          source: 'RAID-контролеры',
          date: '23.11.2021 в 13.36',
          status: 'expandRow',
        },
        {
          checkbox: false,
          id: 12,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Критические',
          source: 'Процессоры',
          date: '23.11.2021 в 13.36',
          status: true,
        },
        {
          checkbox: false,
          id: 13,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Предупреждения',
          source: 'RAID-контролеры',
          date: '23.11.2021 в 13.36',
          status: false,
        },
        {
          checkbox: false,
          id: 14,
          description: {
            name: 'Имя источника событий',
            description: 'Краткое описание ошибки или сообщени....',
          },
          severity: 'Информационное',
          source: 'Модули памяти',
          date: '23.11.2021 в 13.36',
          status: false,
        },
      ],
      tableFilters: [
        {
          key: 'severity',
          label: this.$t('pageEventLogs.table.severity'),
          values: ['Информационное', 'Предупреждения', 'Критические'],
        },
        {
          key: 'filterByStatus',
          label: this.$t('pageEventLogs.table.status'),
          values: ['Resolved', 'Unresolved'],
        },
        {
          key: 'status',
          label: this.$t('pageEventLogs.table.status'),
          values: [false, true],
        },
      ],
      eventFilter: 1,
      eventFilters: [
        {
          value: 1,
          text: 'Все события',
        },
      ],
      eventTypeFilter: 'all',
      eventTypeFilters: [
        {
          value: 'all',
          text: 'Все события',
        },
        {
          value: 'info',
          text: 'Информационное',
        },
        {
          value: 'warning',
          text: 'Предупреждения',
        },
        {
          value: 'critical',
          text: 'Критические',
        },
      ],
      eventSourseFilter: 1,
      eventSourseFilters: [
        {
          value: 1,
          text: 'Все события',
        },
      ],
      eventDateFilter: 1,
      eventDateFilters: [
        {
          value: 1,
          text: 'События за последний час',
        },
      ],
      expandRowLabel,
      activeFilters: [],
      batchActions: [
        {
          value: 'delete',
          label: this.$t('global.action.delete'),
        },
      ],
      filterStartDate: null,
      filterEndDate: null,
      searchInput: null,
      searchFilter: searchFilter,
      searchTotalFilteredRows: 0,
      selectedRows: selectedRows,
      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
    };
  },
  computed: {
    href() {
      return `data:text/json;charset=utf-8,${this.exportAllLogs()}`;
    },
    filteredRows() {
      return this.searchFilter
        ? this.searchTotalFilteredRows
        : this.filteredLogs.length;
    },
    // allLogs() {
    //   return this.$store.getters['eventLog/allEvents'].map((event) => {
    //     return {
    //       ...event,
    //       actions: [
    //         {
    //           value: 'export',
    //           title: this.$t('global.action.export'),
    //         },
    //         {
    //           value: 'delete',
    //           title: this.$t('global.action.delete'),
    //         },
    //       ],
    //     };
    //   });
    // },
    batchExportData() {
      return this.selectedRows.map((row) => omit(row, 'actions'));
    },
    filteredLogsByDate() {
      return this.getFilteredTableDataByDate(
        this.allLogs,
        this.filterStartDate,
        this.filterEndDate
      );
    },
    filteredLogs() {
      return this.getFilteredTableData(
        this.filteredLogsByDate,
        this.activeFilters
      );
    },
  },
  created() {
    // this.startLoader();
    // this.$store.dispatch('eventLog/getEventLogData').finally(() => {
    //   this.endLoader();
    //   this.isBusy = false;
    // });
  },
  methods: {
    redirectFans() {
      this.$router.push('/fans');
    },
    changelogStatus(row) {
      this.$store
        .dispatch('eventLog/updateEventLogStatus', {
          uri: row.uri,
          status: row.status,
        })
        .then((success) => {
          this.successToast(success);
        })
        .catch(({ message }) => this.errorToast(message));
    },
    deleteAllLogs() {
      this.$bvModal
        .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), {
          title: this.$t('pageEventLogs.modal.deleteAllTitle'),
          okTitle: this.$t('global.action.delete'),
          okVariant: 'danger',
          cancelTitle: this.$t('global.action.cancel'),
        })
        .then((deleteConfirmed) => {
          if (deleteConfirmed) {
            this.$store
              .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
              .then((message) => this.successToast(message))
              .catch(({ message }) => this.errorToast(message));
          }
        });
    },
    deleteLogs(uris) {
      this.$store
        .dispatch('eventLog/deleteEventLogs', uris)
        .then((messages) => {
          messages.forEach(({ type, message }) => {
            if (type === 'success') {
              this.successToast(message);
            } else if (type === 'error') {
              this.errorToast(message);
            }
          });
        });
    },
    exportAllLogs() {
      {
        return this.$store.getters['eventLog/allEvents'].map((eventLogs) => {
          const allEventLogsString = JSON.stringify(eventLogs);
          return allEventLogsString;
        });
      }
    },
    onFilterChange({ activeFilters }) {
      this.activeFilters = activeFilters;
    },
    onSortCompare(a, b, key) {
      if (key === 'severity') {
        return this.sortStatus(a, b, key);
      }
    },
    // onTableRowAction(action, { uri }) {
    //   if (action === 'delete') {
    //     this.$bvModal
    //       .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
    //         title: this.$tc('pageEventLogs.modal.deleteTitle'),
    //         okTitle: this.$t('global.action.delete'),
    //         cancelTitle: this.$t('global.action.cancel'),
    //       })
    //       .then((deleteConfirmed) => {
    //         if (deleteConfirmed) this.deleteLogs([uri]);
    //       });
    //   }
    // },
    onBatchAction(action) {
      if (action === 'delete') {
        const uris = this.selectedRows.map((row) => row.uri);
        this.$bvModal
          .msgBoxConfirm(
            this.$tc(
              'pageEventLogs.modal.deleteMessage',
              this.selectedRows.length
            ),
            {
              title: this.$tc(
                'pageEventLogs.modal.deleteTitle',
                this.selectedRows.length
              ),
              okTitle: this.$t('global.action.delete'),
              cancelTitle: this.$t('global.action.cancel'),
            }
          )
          .then((deleteConfirmed) => {
            if (deleteConfirmed) {
              if (this.selectedRows.length === this.allLogs.length) {
                this.$store
                  .dispatch(
                    'eventLog/deleteAllEventLogs',
                    this.selectedRows.length
                  )
                  .then((message) => this.successToast(message))
                  .catch(({ message }) => this.errorToast(message));
              } else {
                this.deleteLogs(uris);
              }
            }
          });
      }
    },
    onChangeDateTimeFilter({ fromDate, toDate }) {
      this.filterStartDate = fromDate;
      this.filterEndDate = toDate;
    },
    onFiltered(filteredItems) {
      this.searchTotalFilteredRows = filteredItems.length;
    },
    // Create export file name based on date
    exportFileNameByDate(value) {
      let date = new Date();
      date =
        date.toISOString().slice(0, 10) +
        '_' +
        date.toString().split(':').join('-').split(' ')[4];
      let fileName;
      if (value === 'export') {
        fileName = 'event_log_';
      } else {
        fileName = 'all_event_logs_';
      }
      return fileName + date;
    },
    resolveLogs() {
      this.$store
        .dispatch('eventLog/resolveEventLogs', this.selectedRows)
        .then((messages) => {
          messages.forEach(({ type, message }) => {
            if (type === 'success') {
              this.successToast(message);
            } else if (type === 'error') {
              this.errorToast(message);
            }
          });
        });
    },
    unresolveLogs() {
      this.$store
        .dispatch('eventLog/unresolveEventLogs', this.selectedRows)
        .then((messages) => {
          messages.forEach(({ type, message }) => {
            if (type === 'success') {
              this.successToast(message);
            } else if (type === 'error') {
              this.errorToast(message);
            }
          });
        });
    },
  },
};
</script>
<style lang="scss">
#event-logs-table {
  margin: 0 !important;
}

.event-logs-table__th {
  background-color: #f8f8f8 !important;
  border-bottom: 1px solid $faint-secondary-primary-20 !important;
  border-top: 1px solid $faint-secondary-primary-20 !important;
  color: $text-primary !important;
}

.event-logs-section .table.b-table > thead > tr > [aria-sort='ascending'] {
  background-image: url('../../../assets/images/event-logs/sort-icon-rotate.svg');
}

.event-logs-section .table.b-table > thead > tr > [aria-sort='descending'],
.table.b-table > thead > tr > [aria-sort='none'] {
  background-image: url('../../../assets/images/event-logs/sort-icon.svg');
}

.event-logs-section .b-table-sort-icon-left {
  background-position: left 57% center !important;
  background-size: 15px !important;
  padding-left: 0.75rem !important;
  padding-right: 2rem !important;
  &.event-logs-table__th__date {
    background-position: left 33% center !important;
  }
}

.event-logs-table__id {
  padding-left: 38px !important;
}

.event-logs-table__td {
  border-bottom: 1px solid $faint-secondary-primary-10 !important;
  height: 64px;
}
</style>
<style lang="scss" scoped>
$toolbar-height: 64px;
.row {
  margin: 0px;
}

.clear-popover {
  margin-left: auto;
}

.event-logs__section {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 84px;
  gap: 16px;
  margin: 0 32px;
}

.event-log-head-container {
  position: absolute;
  top: calc(#{$header-height});
  right: 0px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  z-index: 1001;
}

.event-log-search {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  border: none;
  box-shadow: none;
  border-radius: 8px;
  margin: 12px 32px 12px 16px;
  width: 236px;
  height: 40px;
}

.search-button {
  border: none;
  background: none;
}

.event-log-search__icon {
  width: 20px;
  height: 20px;
}

.event-log-search__input {
  border: none;
  background: none;
  box-shadow: none;
}

.event-logs__filter-container {
  width: 183px;
}

.event-logs__filter,
.event-logs__filter-date {
  height: 40px;
  border: none;
  border-radius: 8px;
  background-image: url('../../../assets/images/icon-chevron.svg');
}

.caption-12px {
  padding-left: 10px;
}

.event-logs__filter {
  width: 171px;
}

.event-logs__filter-date {
  width: 236px;
}

.bold-12px__caps {
  color: $text-primary !important;
}

.custom-checkbox {
  background-color: none;
}

#event-logs-table-wrapper div {
  overflow-y: overlay;
  &::-webkit-scrollbar {
    position: absolute;
    width: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-top: 52px solid transparent;
    background: $faint-secondary-primary-20;
    border-radius: 16px;
    background-clip: content-box;
  }
}

.table-toolbar__resolved-button {
  width: 226px;
  height: 36px;
  background-color: $faint-secondary-primary-5;
  border-radius: 8px;
  color: $red-brand-primary;
  margin-right: 1rem;
  justify-content: center;
}

.table-toolbar__unresolved-button {
  width: 226px;
  height: 36px;
  background-color: $red-brand-primary;
  border-radius: 8px;
  color: $white;
  margin-right: 2rem;
  justify-content: center;
}

.sourse__img {
  padding-right: 8px;
}

.errors {
  color: $indicators-errors !important;
}

.warning {
  color: $indicators-warning !important;
}

.information {
  color: $indicators-complementary !important;
}

.resolved {
  color: $indicators-succes;
}

.not-resolved {
  color: $text-quaternary;
}

.pagination-container {
  width: calc(100% - #{$navigation-width});
  height: $toolbar-height;
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06);
  z-index: $zindex-dropdown;
  background-color: $white;
}

.pagination-content {
  width: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.page-input {
  display: inline-block;
  width: 55px;
  height: 24px;
  border: 1px solid $on-surface-tretiatry;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-items-limit {
  margin-left: auto;
  width: 400px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.items-per-page {
  padding: 0 0 0 5px;
  width: 55px;
  height: 24px;
  background-color: transparent;
  border: 1px solid $on-surface-tretiatry;
  border-radius: 4px;
}

.row-details {
  display: block;
  height: auto;
  width: 70vw;
}
</style>
