<template>
  <defaults>
    <b-row class="pt-3">
      <b-col cols="2">
        <b-navbar v-b-scrollspy:scrollspy-nested>
          <div class="row position-fixed" style="top: 30px;">
            <div class="col-12">
              <div class="row">
                <b-navbar-brand href="#">
                  <img :src="`${this.$utility.getAssetUrl()}/logo-dark.png`" style="max-height: 40px" alt="">
                </b-navbar-brand>
              </div>
              <div class="row mt-3" style="max-height: 520px;overflow-y: scroll">
                <b-nav pills vertical class="col-10 ">
                  <b-nav-item href="#atoms">
                    <span><i class=" bx bx-radio-circle-marked font-size-13"></i></span>
                    <span>Atomic</span>
                  </b-nav-item>
                  <other-atoms-nav/>
                  <b-nav-item href="#molecules">
                    <span><i class=" bx bx-shape-circle  font-size-13"></i></span>
                    <span>Molecules</span>
                  </b-nav-item>
                  <other-molecules-nav/>
                  <b-nav-item href="#organism">
                    <span><i class=" bx bx-grid font-size-13"></i></span>
                    <span>Organisms</span>
                  </b-nav-item>

                  <b-nav-item href="#templates">
                    <span><i class=" bx bx-paste font-size-13"></i></span>
                    <span>Templates</span>
                  </b-nav-item>
                  <b-nav pills vertical>

                  </b-nav>
                </b-nav>
              </div>
            </div>
          </div>
        </b-navbar>
      </b-col>

      <b-col cols="9">
        <div class="row mt-5">
          <div class="col-12 col-md-6">
            <other-introduction/>
          </div>
          <div class="col-12 col-md-5 offset-md-1 px-5 text-center">
            <img :src="require('assets/images/header.png')" class="img-fluid">
          </div>
          <div class="col-12">
            <hr>
            <div id="scrollspy-nested" class="mt-5">
              <other-atoms-list/>
              <other-molecules-list/>
            </div>
          </div>
        </div>
      </b-col>
    </b-row>
  </defaults>
</template>

<script>
import Defaults from "~/layouts/Defaults";
import jscookie from "js-cookie"
import OtherIntroduction from "~/components/utilities/OtherIntroduction";
import OtherAtomsList from "~/components/utilities/OtherAtomsList";
import OtherAtomsNav from "~/components/utilities/OtherAtomsNav";
import OtherMoleculesList from "~/components/utilities/OtherMoleculesList";
import OtherMoleculesNav from "~/components/utilities/OtherMoleculesNav";

export default {
  components: {OtherMoleculesNav, OtherMoleculesList, OtherAtomsNav, OtherAtomsList, OtherIntroduction, Defaults},
  data() {
    return {
      text: ``
    }
  },
  mounted() {
    if (!(jscookie.get("selected_spots"))) {
      jscookie.set("selected_spots", {
        "value": "04d11067-baf4-4799-b582-721a518ebc66",
        "text": "Kebon%20Kacang%2030",
        "type": "S"
      })
    }
  }
}
</script>
<style>
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: white;
  color: var(--dark);
  font-weight: bold;
}

a {
  color: var(--dark);
}
</style>