---
import { Icon } from "astro-icon/components";
import Container from "../Container.astro";

import { getCollection } from "astro:content";
const courses = await getCollection(
    "courses",
    ({ data }) => data.draft != true,
);

const { title } = Astro.props;
---

<nav
    class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm"
    x-data="{ open: false }"
    x-on:keydown.esc.prevent.stop="open = false"
    x-effect="document.body.classList.toggle('overflow-hidden', open)"
>
    <Container class="flex items-center">
        <button
            class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition"
            x-bind:aria-expanded="open"
            x-on:click="open = true"
            aria-haspopup="true"
        >
            <div class="flex items-center gap-1">
                <div class="truncate max-w-36 sm:max-w-72">
                    {title}
                </div>
                <Icon
                    name="chevron-down"
                    aria-hidden="true"
                    class="size-4 mt-1"
                />
            </div>
        </button>

        <button
            class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition"
        >
            Contratar agora
        </button>
    </Container>

    {/* Dropdown Menu */}
    <div
        x-cloak
        x-show="open"
        role="menu"
        class="absolute top-0 bg-lime-400 w-full py-6 2xl:py-24 rounded-b-2xl drop-shadow shadow-sm max-h-screen overflow-auto"
        style="display: none;"
    >
        <Container class="text-black relative xl:w-10/12 2xl:w-5xl">
            <button
                class="absolute border border-black cursor-pointer rounded-full -top-3.5 2xl:-top-21.5 right-2.5"
                aria-labelledby="Fechar"
                x-on:click="open = false"
            >
                <Icon name="x-mark" class="size-4" />
            </button>

            <div class="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
                <span>Curso de formação</span>
                <h1 class="text-xl lg:text-2xl">
                    {title}
                </h1>
            </div>

            <div class="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
                <h6 class="font-medium text-xl lg:text-2xl">
                    Conheça outros cursos da EDUSEG&reg;
                </h6>

                <div class="flex max-lg:flex-col gap-0.5 lg:gap-4">
                    {/* Search */}
                    <label class="flex gap-1 items-center">
                        <span class="text-nowrap max-lg:w-2/5 text-right"
                            >Buscar por</span
                        >
                        <div
                            class="flex items-center border rounded px-1.5 py-0.5 lg:px-2 lg:py-1 bg-white/20 focus-within:bg-white w-full"
                        >
                            <input class="outline-none w-full" />
                            <Icon name="magnifying-glass" class="size-5" />
                        </div>
                    </label>
                    {/* Search End */}

                    <!-- Filter -->
                    <label class="flex gap-1 items-center">
                        <span class="text-nowrap max-lg:w-2/5 text-right"
                            >Exibir apenas</span
                        >
                        <div class="relative w-full lg:w-30 bg-white/20">
                            <select
                                class="flex border items-center justify-between gap-0.5 border-black rounded px-1.5 py-0.5 lg:px-2 lg:py-1 appearance-none focus:outline-none w-full lowercase"
                            >
                                <option value="formacao">Formação</option>
                                <option value="reciclagem">Reciclagem</option>
                            </select>
                            <Icon
                                name="chevron-down"
                                class="absolute top-2.5 right-2.5 pointer-events-none size-3.5"
                            />
                        </div>
                    </label>
                    <!-- Filder End -->
                </div>
            </div>

            <div x-data="{ expanded: false }">
                <div class="relative">
                    <div
                        x-show="! expanded"
                        class="absolute bottom-0 h-16 w-full bg-gradient-to-t from-lime-400 to-lime-400/30"
                    >
                    </div>
                    <ul
                        class="list-disc list-inside max-lg:[&_li]:truncate font-medium overflow-hidden"
                        :class="expanded ? 'h-none' : 'h-36'"
                    >
                        {
                            courses.map(({ data: { title, slug } }) => {
                                return (
                                    <li>
                                        <a
                                            href={`/${slug}`}
                                            class=" hover:underline p-0.5"
                                        >
                                            {title}
                                        </a>
                                    </li>
                                );
                            })
                        }
                    </ul>
                </div>
                <button
                    :aria-expanded="expanded"
                    x-on:click="expanded = ! expanded"
                    class="border border-black rounded-full px-5 py-1 cursor-pointer mt-2.5"
                    aria-expanded="false"
                >
                    <span
                        x-text="expanded ? 'Ocultar' : 'Exibir todos os cursos'"
                    >
                        Exibir todos os cursos
                    </span>
                </button>
            </div>
        </Container>
    </div>
    {/* Dropdown Menu End */}
</nav>