<script setup>
import { ref } from 'vue';
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import Dropdown from '@/Components/Dropdown.vue';
import DropdownLink from '@/Components/DropdownLink.vue';
import NavLink from '@/Components/NavLink.vue';
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
import { Link } from '@inertiajs/vue3';

const showingNavigationDropdown = ref(false);
</script>

<template>
    <div>
        <div class="min-vh-100 bg-light">
            <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom shadow-sm">
                <div class="container">
                    <Link :href="route('dashboard')" class="navbar-brand d-flex align-items-center me-3">
                        <ApplicationLogo style="height: 36px; width: auto;" />
                    </Link>

                    <div class="d-none d-lg-flex align-items-center gap-2">
                        <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
                            Dashboard
                        </NavLink>
                        <NavLink :href="route('projects.index')" :active="route().current('projects.index')">
                            Projects
                        </NavLink>
                    </div>

                    <div class="ms-auto d-flex align-items-center gap-2">
                        <button
                            type="button"
                            class="btn btn-outline-secondary btn-sm d-lg-none"
                            @click="showingNavigationDropdown = !showingNavigationDropdown"
                            aria-label="Abrir menú"
                        >
                            <i class="bi bi-list fs-5"></i>
                        </button>

                        <Dropdown align="right" width="48">
                            <template #trigger>
                                <button type="button" class="btn btn-outline-secondary btn-sm">
                                    {{ $page.props.auth.user.name }}
                                </button>
                            </template>

                            <template #content>
                                <DropdownLink :href="route('profile.edit')">Profile</DropdownLink>
                                <DropdownLink :href="route('logout')" method="post" as="button">Log Out</DropdownLink>
                            </template>
                        </Dropdown>
                    </div>
                </div>

                <div v-show="showingNavigationDropdown" class="d-lg-none w-100 border-top bg-white">
                    <div class="container py-2 d-flex flex-column gap-2">
                        <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
                            Dashboard
                        </ResponsiveNavLink>
                        <ResponsiveNavLink :href="route('projects.index')" :active="route().current('projects.index')">
                            Projects
                        </ResponsiveNavLink>
                    </div>
                </div>
            </nav>

            <header class="bg-white border-bottom" v-if="$slots.header">
                <div class="container py-3">
                    <slot name="header" />
                </div>
            </header>

            <main>
                <slot />
            </main>
        </div>
    </div>
</template>
