<template>
  <page-section class="system-control-section">
    <div class="system-control__table">
      <div class="system-control__table__row">
        <div class="system-control__table__cell">
          <div>
            <span class="semi-bold-12px">
              {{ $t('SystemDescription.title.ReloadServer') }}
            </span>
          </div>
          <popover
            id="popover-reactive-1"
            description="SystemDescription.ReloadOSAndServer"
            popup="SystemDescription.ReloadOSAndServer_popup"
          />
          <popover
            id="popover-reactive-2"
            description="SystemDescription.ReloadServer"
            popup="SystemDescription.ReloadServer_popup"
          />
          <div>
            <span class="regular-12px underline">
              {{ $t('SystemDescription.ConnectToDesktop') }}
            </span>
          </div>
        </div>

        <div class="system-control__table__cell system-control__table__cell__2">
          <div class="reload-progress__container">
            <span class="regular-12px">
              {{ $t('SystemDescription.status') }}
            </span>
            <span class="semi-bold-12px progress_bar_percent"
              >{{ progress1.value }}%</span
            >
            <b-progress
              class="reload-progress"
              :value="progress1.value"
            ></b-progress>
          </div>
          <div class="reload-progress__container">
            <span class="regular-12px">
              {{ $t('SystemDescription.status') }}
            </span>
            <span
              v-if="progress2.value === null"
              class="semi-bold-12px progress_bar_percent"
              >{{ $t('SystemDescription.NotRunning') }}</span
            >
            <span v-else class="semi-bold-12px progress_bar_percent"
              >{{ progress2.value }}%</span
            >
            <b-progress
              class="reload-progress"
              :value="progress2.value"
            ></b-progress>
          </div>
        </div>

        <div class="system-control__table__cell">
          <div>
            <span class="semi-bold-12px">
              {{ $t('SystemDescription.title.OnOffServer') }}
            </span>
          </div>
          <div>
            <popover
              id="popover-reactive-3"
              description="SystemDescription.OffOsAndServer"
              popup="SystemDescription.OffOsAndServer_popup"
              button="global.action.off"
            />
            <popover
              id="popover-reactive-4"
              description="SystemDescription.OffServer"
              popup="SystemDescription.OffServer_popup"
              button="global.action.off"
            />
          </div>
        </div>
      </div>
      <div class="system-control__table__row">
        <div class="system-control__table__cell system-control__table__cell__4">
          <div>
            <span class="semi-bold-12px">
              {{ $t('SystemDescription.title.setupDatetime') }}
            </span>
          </div>
          <b-form @submit.prevent="onResetSubmit">
            <b-form-radio-group
              v-model="timeOption"
              class="system-control__radio regular-12px"
            >
              <b-form-radio value="NTP">
                {{ $t('SystemDescription.GetNtpFromServer') }}
              </b-form-radio>
              <b-form-radio value="serverDate">
                {{ $t('SystemDescription.UseServerDatettime') }}
              </b-form-radio>
            </b-form-radio-group>
          </b-form>
          <ntp-popover
            id="popover-reactive-5"
            description="SystemDescription.NtpSettings"
          />
        </div>
      </div>
    </div>
  </page-section>
</template>

<script>
import PageSection from '@/components/Global/PageSection';
import Popover from '@/components/Global/Popover';
import NtpPopover from './NtpPopover';

export default {
  components: {
    PageSection,
    NtpPopover,
    Popover,
  },
  data() {
    return {
      timeOption: 'resetBios',
      picked: '',
      options: [
        { text: 'Toggle this custom radio', value: 'first' },
        { text: 'Or toggle this other custom radio', value: 'second' },
      ],
      progress1: {
        value: 90,
      },
      progress2: {
        value: null,
      },
    };
  },
};
</script>
<style lang="scss" scoped>
a {
  list-style-type: none;
}

.system-control-section {
  position: relative;
  margin: 16px 2rem 2rem !important;
  width: 90%;
}

.system-control__table__row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 85%;
}

.system-control__table__cell {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  row-gap: 6px;
}

.system-control__table__cell__2 {
  margin-top: 37px;
  row-gap: 14px;
}

.reload-progress__container {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  column-gap: 4px;
}

.semi-bold-12px {
  display: inline-block;
}

label {
  padding-top: 5px;
}
.system-control__table__cell__4 {
  margin-top: 26px;
}

.custom-radio ::before {
  border: 1px solid $red-brand-primary;
  background-color: #fff;
  border-radius: 100%;
}

.system-control-section::v-deep
  .custom-control-input:checked
  ~ .custom-control-label::before {
  border: 2px solid $red-brand-primary;
  background-color: $red-brand-primary;
  box-shadow: 0px 0px 0px 2.5px $white inset;
  border-radius: 100%;
}

.system-control-section::v-deep
  .custom-control-input:hover
  ~ .custom-control-label::before {
  background-color: $red-brand-primary-hover !important;
  box-shadow: 0px 0px 0px 2.5px $white inset;
  border-color: $red-brand-primary-hover;
}

.system-control-section::v-deep
  .custom-control-input:checked
  ~ .custom-control-label::after {
  background-image: none !important;
  border-radius: 100%;
}

.system-control-section::v-deep
  .custom-control-input:active
  ~ .custom-control-label::before {
  background-color: $red-brand-primary-active !important;
  box-shadow: 0px 0px 0px 2.5px $white inset;
  border-color: $red-brand-primary-active;
}
</style>
