<template>
  <section class="bootstrap-table__section">
    <span class="bold-12px__caps">
      {{ $t('fansPage.valueIndicators') }}
    </span>
    <b-table
      responsive="md"
      class="bootstrap-fans-table bootstrap-fans-table__stripes"
      :items="records.items"
      :fields="records.fields"
    >
      <template #cell(name)="{ value, index }">
        <div
          class="fans-colors"
          :style="`background-color: ${colors[index]}`"
        ></div>
        <span class="light-12px">
          {{ value }}
        </span>
      </template>
      <template #cell(minDate)="{ value }">
        <span class="regular-12px">
          {{ value.time }}
        </span>
        <span class="regular-12px tretiatry">
          {{ value.date }}
        </span>
      </template>
      <template #cell(maxDate)="{ value }">
        <span class="regular-12px">
          {{ value.time }}
        </span>
        <span class="regular-12px tretiatry">
          {{ value.date }}
        </span>
      </template>
      <template #head(currentPower)="{ label }">
        <span class="semi-bold-12px">
          {{ label }}
        </span>
        <span class="semi-bold-12px errors">
          {{ '(15)' }}
        </span>
      </template>
      <template #cell(currentPower)="{ value }">
        <row>
          <span class="light-12px">
            {{ value }}
          </span>
          <img src="@/assets/images/power-error-icon.svg" />
        </row>
      </template>
    </b-table>
  </section>
</template>

<script>
import { colors } from '../../../../views/Processors/DynamicInfo/helpers';

export default {
  props: {
    records: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      colors,
    };
  },
};
</script>
<style lang="scss">
.bootstrap-fans-table__th {
  background-color: transparent !important;
  color: $text-primary !important;
  border-top: none !important;
  padding: 10px 5px !important;
  border-bottom: 1px solid $faint-secondary-primary-10;
}

.bootstrap-fans-table__td {
  padding: 5px !important;
  border-top: none !important;
}
</style>

<style lang="scss" scoped>
.fans-colors {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.row {
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.errors {
  color: $indicators-errors;
}
</style>
