<template>
  <b-container fluid="xxl pt-0 m-0">
    <b-button
      class="btn-primary semi-bold-16px images_add-image-button"
      @click="$bvModal.show('modal-images')"
    >
      {{ $t('pageKvm.addImage') }}</b-button
    >
    <page-title />
    <div class="images">
      <div class="images_desc">
        <span class="regular-12px tretiatry">Подключенные образы:</span>
      </div>
      <div class="images-container">
        <div class="images-container_image">
          <img src="@/assets/images/console-images.svg" class="images-image" />
          <span class="semi-bold-12px">Win-11-2022</span>
          <span class="light-12px">с носителя</span>
        </div>
        <div class="images-container_image">
          <img src="@/assets/images/console-images.svg" class="images-image" />
          <span class="semi-bold-12px">Win-10-2017</span>
          <span class="light-12px">с сервера</span>
        </div>
        <div class="images-container_image">
          <img src="@/assets/images/console-images.svg" class="images-image" />
          <span class="semi-bold-12px">Win-7-2010</span>
          <span class="light-12px">с сервера</span>
        </div>
      </div>
    </div>
    <kvm-console :is-full-window="false" />
    <images-modal />
  </b-container>
</template>

<script>
import PageTitle from '@/components/Global/PageTitle';
import ImagesModal from './ImagesModal';
import KvmConsole from './KvmConsole';

export default {
  name: 'Kvm',
  components: {
    PageTitle,
    ImagesModal,
    KvmConsole,
  },
};
</script>
<style lang="scss" scoped>
.images_add-image-button {
  position: absolute;
  top: calc(#{$header-height});
  right: 0px;
  border: none;
  box-shadow: none;
  background-color: $faint-secondary-primary-5;
  color: $red-brand-primary;
  border-radius: 8px;
  margin: 12px 32px;
  width: 236px;
  height: 40px;
  z-index: 1001;
  &:active {
    background-color: $faint-secondary-primary-5-hover !important;
    color: $red-brand-primary-active !important;
    border: none;
  }
  &:focus {
    box-shadow: none !important;
  }
  &:focus-visible {
    box-shadow: none !important;
  }
}

.images {
  display: flex;
  flex-flow: row wrap;
  height: 144px;
}

.images_desc {
  margin: 16px 0 16px 32px;
  width: 100%;
}

.images-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 16px 32px;
}

.images-container_image {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-right: 24px;
}

.images-image {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.semi-bold-12px {
  color: $text-primary;
}
</style>
