<template>
  <div class="container-fluid py-3 px-3">
    <div class="row justify-content-center">
      <div class="col-md-10 col-lg-9 col-xl-10">
        <div class="accordion" id="pdfList">
          <div v-for="(category, i) in categories" :key="i" class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button"
                type="button"
                data-bs-toggle="collapse"
                :data-bs-target="`#collapse-category${i}`"
              >
                {{ category.name }}
              </button>
            </h2>
            <div :id="`collapse-category${i}`" class="accordion-collapse collapse show">
              <div class="accordion-body">
                <div class="table-responsive">
                  <table class="table table-hover align-middle">
                    <thead>
                      <tr>
                        <th scope="col">Title</th>
                        <th scope="col" colspan="2" class="text-center">Links</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(file, j) in category.files" :key="j">
                        <td>{{ file }}</td>
                        <td class="text-center">
                          <a
                            :href="
                              url_root +
                              'pdfjs/web/viewer.html?file=' +
                              url_root +
                              'categories/' +
                              category.name +
                              '/' +
                              file
                            "
                            target="_blank"
                            ><i class="bi bi-book"></i
                          ></a>
                        </td>
                        <td class="text-center">
                          <a :href="`${url_root}categories/${category.name}/${file}`"
                            ><i class="bi bi-cloud-download"></i
                          ></a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <canvas id="pdfCanvas"></canvas>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'App',
  data() {
    return {
      url_root: process.env.VUE_APP_URL_ROOT,
      categories: [],
    };
  },
  async created() {
    const { data } = await axios.get(`${this.url_root}db.json`);
    this.categories = data.categories;
  },
});
</script>
