<template>
  <div class="inter-300">
    <span @click="toggleAll" class="space-mono-regular text-lg text-gray-500">> Projects <</span>
    <br><br>

    <div v-for="(obj, index) in CollapsibleObjects" class="collapsible-object-wrapper">
      <div @click="CollapsibleObjects[index].collapsed = !CollapsibleObjects[index].collapsed" class="collapsible-list-label">
        <span class="text-xl lg:text-3xl">{{ obj.label }}</span>
        <span class="collapsible-list-button">{{ expandIcon(index) }}</span>
      </div>
      <div v-if="!CollapsibleObjects[index].collapsed" class="collapsible-list-wrapper">
        <p class="mb-2" v-html="obj.project.description"></p>
        <a v-bind:href="obj.project.url" target="_blank" class="text-xs lg:text-base hover:underline">{{ obj.project.url }}↗</a>
        <ul class="collapsible-list mt-2">
          <li v-for="stack in obj.project.techStack" class="text-sm lg:text-xl">
            {{ stack.item }}
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">

type Project = {
  url: string;
  description: string;
  techStack: Array<Object>;
}

type CollapsibleObject = {
  label: string;
  collapsed: boolean;
  project: Project;
};

const CollapsibleObjects = ref<Array<CollapsibleObject>>([
  { label: 'Genesis', collapsed: true,
    project: { url: 'https://gitea.christiangoeschel.com/christiangoeschel/genesis',
                    description: 'A simple command line tool to control the built-in keyboard backlight via the org.freedesktop.UPower D-Bus service.',
                    techStack: [{item: 'Golang'}, {item: 'D-Bus'}]},
  },
  { label: 'Asahi Linux Debian Installer', collapsed: true,
    project: { url: 'https://gitea.christiangoeschel.com/christiangoeschel/asahi-debian',
    description: 'In this project I bootstrapped, pre-partitioned and automated the system configuration of a Debian installation image,' +
        ' which served as base image in the Asahi Linux installer for Apple Silicon devices.<br><br>' +
        'During the process I learned how to mount files as loop devices, partition a disk, use rsync, create system critical configuration files in /etc, ' +
        'install custom firmware, create a post-installation script and use the mkosi tool to bootstrap installer images.',
    techStack: [{item: 'Bash'}, {item: 'mkosi'}]},
  },
  { label: 'SHX', collapsed: true,
    project: { url: 'https://gitea.christiangoeschel.com/christiangoeschel/shx',
      description: 'A simple command line tool that searches for the shared file extents of a given file on a CoW enabled filesystem.',
      techStack: [{item: 'Golang'}]},
  },
  { label: 'MyDocs', collapsed: true,
    project: { url: 'https://docs.christiangoeschel.com',
      description: 'MyDocs is my personal knowledge base website that is built and served using Mkdocs Materials in Docker,' +
          ' and hosted in my Homelab server exposed to the public via a public reverse proxy instance.',
      techStack: [{item: 'Docker'}, {item: 'Yaml'}, {item: 'Markdown'}, {item: 'JavaScript'}]},
  },
  { label: 'Portfolio', collapsed: true,
    project: { url: 'https://www.christiangoeschel.com',
      description: 'My personal portfolio website hosted on my Homelab server using Docker',
      techStack: [{item: 'HTML'}, {item: 'CSS'}, {item: 'TailwindCSS'}, {item: 'JavaScript/Typescript'}, {item: 'NUXTJs (Vue)'}]},
  },
]);

function expandIcon(i: number){
  return CollapsibleObjects.value[i].collapsed ? '+' : '-'
}
</script>
<style scoped>
div {
  transition: all .2s ease-out;
}

.collapsible-object-wrapper {
  border-bottom:  black solid 1px;
  background-color: #FFFFFF;

}

.collapsible-list-label {
  @apply flex justify-between lg:p-2;

  &:hover {
    background-color: #000000;
    color: #FFFFFF;
    cursor: pointer;
  }
}

.collapsible-list-wrapper {
  @apply inline  p-2;
}

.collapsible-list {
  @apply lg:flex lg:space-x-5;
}

.collapsible-list-button {
  @apply text-xl lg:text-3xl hover:cursor-pointer;
}
</style>
