<template>
  <b-container
    :style="{ display: 'flex', 'flex-direction': 'column' }"
    fluid="xxl pt-0 m-0"
  >
    <page-title />
    <!-- System table -->
    <table-system />
    <!-- Notes Administration -->
    <section class="notes-section">
      <div class="semi-bold-12px textarea-description">
        <span>{{ $t('SystemDescription.title.Notes') }}</span>
      </div>
      <div class="textarea-container">
        <div class="buttons-container">
          <button class="notes-button">
            <img src="@/assets/images/textarea-buttons/button-icon-bold.svg" />
          </button>
          <button class="notes-button">
            <img
              src="@/assets/images/textarea-buttons/button-icon-cursive.svg"
            />
          </button>
          <button class="notes-button">
            <img
              src="@/assets/images/textarea-buttons/button-icon-underline.svg"
            />
          </button>
          <button class="notes-button">
            <img
              src="@/assets/images/textarea-buttons/button-icon-crossline.svg"
            />
          </button>
          <button class="notes-button">
            <img src="@/assets/images/textarea-buttons/button-icon-link.svg" />
          </button>
          <div class="line"></div>
          <button class="notes-button">
            <img src="@/assets/images/textarea-buttons/button-icon-list.svg" />
          </button>
          <button class="notes-button">
            <img
              src="@/assets/images/textarea-buttons/button-icon-number-list.svg"
            />
          </button>
        </div>
        <textarea
          id=""
          name="area"
          placeholder="Тут будет текст который ввел администратор и работать в качестве блокнота"
          cols="30"
          rows="10"
          class="notes-textarea"
        ></textarea>
      </div>
    </section>
  </b-container>
</template>

<script>
import PageTitle from '@/components/Global/PageTitle';
import TableSystem from './InventoryTableSystem';
import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';

export default {
  components: {
    PageTitle,
    TableSystem,
  },
  data() {
    return {
      text: '',
      iconChevronUp: iconChevronUp,
    };
  },
};
</script>
<style lang="scss" scoped>
//nav items style
.nav-item,
.nav-link {
  padding: 0;
}

.nav-item {
  list-style-type: none;
}

a {
  color: $text-primary !important;
  &:hover {
    color: $text-primary !important;
  }
}
//section style
.notes-section {
  display: flex;
  flex-direction: column;
}

.textarea-description {
  margin: 5px 0 10px 2rem;
}

.buttons-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.notes-button {
  width: 2rem;
  height: 2rem;
  margin: 22px 0 22px 25px;
  background-color: $surface-secondary;
  border: none;
  &:hover {
    border-radius: 8px;
    background-color: $faint-secondary-primary-5-hover;
  }
}

.line {
  display: inline-block;
  width: 1px;
  height: 2rem;
  margin: 22px 0 22px 25px;
  border-left: 1px solid rgba(26, 62, 91, 0.2);
}

.textarea-container {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  margin: 0 1rem 1rem 1rem;
  background-color: $surface-secondary;
}

.notes-textarea {
  resize: none;
  border: none;
  flex: 0 0 auto;
  margin: 0 1rem 1rem 1rem;
  border-radius: 8px;
  background-color: $white;
}
</style>
