<template>
  <section class="layout" data-theme="dark">
    <header>
      <div class="bg-darkmode-dark shadow">
        <site-header class="container" />
      </div>
    </header>

    <main class="content">
      <div v-if="$page.frontmatter.sidebar || $page.frontmatter.toc" class="container">
        <div class="row">
          <div class="d-none d-xl-block col-4 p-4">
            <div class="card toc my-2">
              <div class="card-header">
                <router-link :to="`/${$page.path.split('/')[1]}/`"><b>/{{ $page.path.split('/')[1] }}/</b></router-link>
              </div>
              <div class="card-body">
                <FolderList :path="`/${$page.path.split('/')[1]}/`" />
              </div>
            </div>
          </div>
          <div class="col-xl-8 p-4">
            <router-link
              v-if="!!$page.path.split('/')[2]"
              :to="`/${$page.path.split('/')[1]}/`"
              class="btn btn-secondary my-2"
            >
              <i class="bi-arrow-left" />
              back to {{ $page.path.split('/')[1] }}
            </router-link>
            <Content />
          </div>
        </div>
      </div>
      <div v-else>
        <div class="container">
          <Content class="p-4" />
        </div>
      </div>
    </main>

    <footer class="footer my-3">
      <site-footer class="container" />
    </footer>
  </section>
</template>

<script>
import SiteHeader from "./SiteHeader";
import SiteFooter from "./SiteFooter";
import FolderList from "../components/FolderList";

import "bootstrap-icons/font/bootstrap-icons.scss";
import "./main.scss";

import "@vuepress/theme-default/styles/code.styl";

export default {
  components: { SiteFooter, SiteHeader, FolderList },
};
</script>

<style scoped lang="scss">
header {
  position: fixed;
  z-index: 10;
  width: 100%;
  font-size: 1.2rem;
}
main {
  padding: 5rem 0 2rem 0;
  background-color: #1f262b;
  .toc {
    position: sticky;
    top: 5rem;
  }
}
</style>
