<template>
  <b-container
    :style="{ display: 'flex', 'flex-direction': 'column' }"
    fluid="xxl pt-0 m-0"
  >
    <page-title />
    <!-- IPv4 -->
    <div class="main-container">
      <div class="page-collapse-decorator">
        <b-button
          v-b-toggle.toggle-collapse_1
          variant="link"
          class="collapse-button semi-bold-16px"
          @click="ipv4Handler"
        >
          {{ $t('SystemDescription.title.Ipv4Settings') }}
          <b-form-checkbox
            id="checkbox-1"
            v-model="ipv4"
            @click.native.prevent
          ></b-form-checkbox>
        </b-button>
        <b-collapse id="toggle-collapse_1" class="nav-item__nav">
          <i-pv4-settings ref="system" />
        </b-collapse>
      </div>
      <!-- IPv6 -->
      <div class="page-collapse-decorator">
        <b-button
          v-b-toggle.toggle-collapse_2
          variant="link"
          class="collapse-button semi-bold-16px"
          @click="ipv6Handler"
        >
          {{ $t('SystemDescription.title.Ipv6Settings') }}
          <b-form-checkbox
            id="checkbox-2"
            v-model="ipv6"
            @click.native.prevent
          ></b-form-checkbox>
        </b-button>
        <b-collapse id="toggle-collapse_2" class="nav-item__nav">
          <i-pv6-settings ref="system" />
        </b-collapse>
      </div>
    </div>
  </b-container>
</template>

<script>
import PageTitle from '@/components/Global/PageTitle';
import IPv4Settings from './InventoryIPv4Settings';
import IPv6Settings from './InventoryIPv6Settings';
import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';

export default {
  components: {
    PageTitle,
    IPv4Settings,
    IPv6Settings,
  },
  data() {
    return {
      text: '',
      iconChevronUp: iconChevronUp,
      ipv4: false,
      ipv6: false,
    };
  },
  methods: {
    ipv4Handler() {
      this.ipv4 = !this.ipv4;
    },
    ipv6Handler() {
      this.ipv6 = !this.ipv6;
    },
  },
};
</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;
  }
}

.custom-checkbox {
  background-color: none;
  margin: 0 20px 0 auto;
}
</style>
