<template>
  <div id="my-container">
    <span :id="id" class="regular-12px underline" variant="primary">
      {{ $t(description) }}
    </span>
    <!-- Our popover title and content render container -->
    <b-popover
      :target="id"
      placement="auto"
      container="my-container"
      :show.sync="popoverShow"
      @show="onShow"
    >
      <template #title>
        <div class="popup-title">
          <span class="bold-16px__caps">{{ $t(description) }}</span>
          <b-button class="popup-title__button_close" @click="onClose">
            <img src="@/assets/images/_sila/popups/x-icon.svg" />
          </b-button>
        </div>
      </template>

      <div class="popup-body">
        <div class="popup-body__input-container">
          <span class="regular-12px tretiatry"
            >Введите адрес сервера (IP, FQDM)</span
          >
          <b-form-input
            id="popover-input-1"
            v-model="input1"
            class="medium-12px"
          ></b-form-input>
        </div>
        <b-button class="popup-button" variant="primary" @click="onClose">
          {{ $t('global.action.save') }}
        </b-button>
      </div>
    </b-popover>
  </div>
</template>

<script>
export default {
  props: {
    description: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
    button: {
      type: String,
      default: 'Reload',
    },
  },
  data() {
    return {
      input1: '',
      popoverShow: false,
    };
  },
  methods: {
    onShow() {
      this.$root.$emit('bv::hide::popover');
    },
    onClose() {
      this.popoverShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.form-group {
  margin: 0;
}

.popup-title {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
}

.popup-title__button_close {
  margin: 0 28px 0 auto;
  background: none;
  border: none;
  &:active {
    background-color: $faint-secondary-primary-5-hover !important;
    box-shadow: none !important;
    border-radius: 8px;
  }
  &:focus-visible {
    border: none !important;
    border-radius: 8px;
  }
  &:focus {
    box-shadow: none;
    border-radius: 8px;
  }
}

.popup-body {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.form-control {
  width: 341px;
  height: 52px;
  margin: -25px auto;
  padding-top: 30px;
}

.popup-button {
  width: 341px;
  height: 40px;
  margin: 0 auto 10px;
}

.popup-body__input-container {
  height: 52px;
  margin: 24px auto 16px auto;
}

.tretiatry {
  margin-left: 12px;
}
</style>
