<template>
  <main class="flex flex-col min-h-screen">
    <header class="flex flex-row items-center p-8 gap-4 bg-base-100 shadow-xl">
      <img class="w-1/5" src="~/assets/images/h_lfs_white.svg" alt="Little Fox Software" />
      <input v-model="regex" class="input grow" type="text" placeholder="Search..." />
      <button class="btn btn-ghost" @click="sortApps">
        <ArrowDownAzIcon v-if="sort === 'AZ'" />
        <ArrowDownZaIcon v-else />
      </button>
    </header>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-4 bg-base-200 grow">
      <a v-for="app in filtered_apps"
        class="card content-center items-center bg-base-100 saturate-0 hover:scale-102 hover:saturate-100 transition-all h-fit p-4"
        :href="app.link">
        <h3 class="card-title">{{ app.name }}</h3>
        <img class="card-side" :src="app.img" />
      </a>
    </div>
    <footer class="text-xs flex flex-col items-center p-4">
      <p>Built by <a class="link" href="https://littlefoxsoftware.com" target="_blank">Little Fox Software</a></p>
      <p>with <a class="link" href="https://nuxt.com" target="_blank">Nuxt</a> and <a class="link" href="https://daisyui.com" target="_blank">DaisyUI</a> </p>
    </footer>
  </main>
</template>

<script lang=ts setup>
import { ArrowDownAzIcon, ArrowDownZaIcon } from '@lucide/vue';
useHead({
  htmlAttrs: { 'data-theme': 'halloween' }
})

const regex = ref('');
const sort = ref('AZ');

const apps = [
  { name: 'Gitea', link: 'https://git.littlefoxsoftware.xyz', img: '_nuxt/assets/images/gitea.png' },
  { name: 'Listmonk', link: 'https://newsletter.littlefoxsoftware.xyz', img: '_nuxt/assets/images/listmonk.png' },
  { name: 'Nextcloud', link: 'https://cloud.littlefoxsoftware.xyz', img: '_nuxt/assets/images/nextcloud.png' },
];
const filtered_apps = computed(() => searchApps());

function sortApps() {
  if (sort.value === 'ZA') {
    sort.value = 'AZ';
    apps.sort((a, b) => a.name.toLocaleLowerCase().localeCompare(b.name));
  } else {
    sort.value = 'ZA';
    apps.sort((a, b) => b.name.toLocaleLowerCase().localeCompare(a.name));
  }
}

function searchApps() {
  if (regex.value.length >= 3) {
    return apps.filter(app => app.name.toLowerCase().includes(regex.value));
  } else {
    return apps;
  }
}
</script>