<template>
  <b-container
    :style="{ display: 'flex', 'flex-direction': 'column' }"
    fluid="xxl pt-0 m-0"
  >
    <page-title :description="$t('appNavigation.specification')" />
    <page-section class="bootstrap-table__section">
      <span class="bold-16px">{{
        $t('pageInventory.installedProcessors')
      }}</span>
      <!-- Processors Specification Table -->
      <div class="capability-info">
        <b-row>
          <b-col class="mt-0 mb-2 p-0 bold-12px__caps">
            {{ $t('pageInventory.table.processorCapabilityInfo') }}
          </b-col>
        </b-row>
        <b-row>
          <b-col class="mt-2 p-0" sm="3" xl="3">
            <dl class="light-12px">
              <dd class="attrib-names">
                {{ $t('global.table.attributes') }}
              </dd>
              <dd>{{ 'Многопоточность' }}</dd>
              <dd>{{ 'Виртуализация' }}</dd>
              <dd>{{ 'Турбо режим' }}</dd>
            </dl>
          </b-col>
          <b-col class="mt-2 p-0" sm="3" xl="3">
            <dl class="light-12px">
              <dd class="attrib-names">{{ 'Состояние присутсвия' }}</dd>
              <dd
                v-for="item in processors[0].presence_status"
                :key="item.presence_status"
              >
                {{ item }}
              </dd>
            </dl>
          </b-col>
          <b-col class="mt-2 p-0" sm="3" xl="3">
            <dl class="light-12px">
              <!-- Status state -->
              <dd class="attrib-names">{{ 'Включен' }}</dd>
              <dd>
                <b-form-checkbox
                  v-model="processors[0].statuses.multithreading"
                  switch
                >
                </b-form-checkbox>
              </dd>
              <dd>
                <b-form-checkbox
                  v-model="processors[0].statuses.virtualization"
                  switch
                >
                </b-form-checkbox>
              </dd>
              <dd>
                <b-form-checkbox v-model="processors[0].statuses.turbo" switch>
                </b-form-checkbox>
              </dd>
            </dl>
          </b-col>
        </b-row>
      </div>
      <processors-specification-table />
      <span class="bold-16px">{{
        $t('pageInventory.installedAccelerator')
      }}</span>
      <!-- Accelerators Specification Table -->
      <accelerator-specification-table />
    </page-section>
  </b-container>
</template>

<script>
import PageTitle from '@/components/Global/PageTitle';
import PageSection from '@/components/Global/PageSection';
import { processors } from './helpers';

import ProcessorsSpecificationTable from './ProcessorsSpecificationTable';
import AcceleratorSpecificationTable from './AcceleratorSpecificationTable';
export default {
  components: {
    PageTitle,
    PageSection,
    ProcessorsSpecificationTable,
    AcceleratorSpecificationTable,
  },
  data() {
    return {
      processors,
    };
  },
};
</script>
<style lang="scss" scoped>
.bold-16px {
  display: block;
  margin: 25px 0 16px 0;
}

.capability-info {
  padding-left: 1rem;
}

.attrib-names {
  border-bottom: 1px solid $faint-secondary-primary-10;
  color: $text-secondary !important;
  font-weight: 600;
}

.custom-switch {
  margin: 0;
}
</style>
