<!-- NavMenu.razor -->
<style>
    .nav-menu-container {
        height: 100vh;
        overflow: hidden;
    }

    /* Parte superior con el logo */
    .nav-top {
        background-color: #5a9bd5 !important;
        padding: 0.5rem;
        height: 5em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .nav-top img {
            height: 4em;
            width: auto;
        }

    /* Sección scrollable para el contenido del menú */
    .nav-scrollable {
        background: linear-gradient(to bottom, #5a9bd5, #1f497d);
        height: calc(100vh - 5em);
        overflow-y: auto;
        padding-top: 1rem;
    }

    /* Empujar el grupo inferior (Instrucciones) al fondo, con un margen inferior */
    .bottom-group {
        margin-top: auto;
        margin-bottom: 1rem;
    }

    /* Ajuste de los enlaces para icono y texto en la misma línea */
    .nav-link {
        display: inline-flex;
        align-items: center;
        font-size: 1rem;
    }

        .nav-link .bi {
            display: inline-block;
            font-size: 1.25rem;
            margin-right: 0.5rem;
            line-height: 1;
            vertical-align: middle;
        }
</style>

<div class="nav-menu-container">
    <!-- Parte superior: logo -->
    <div class="nav-top">
        <div class="container-fluid" style="display: flex; justify-content: center; align-items: center;">
            <img src="Content/imagenes/logo-oaaf-negativo-transparente.svg" alt="logo" />
        </div>
    </div>

    <!-- Contenido scrollable: menú de navegación -->
    <div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
        <nav class="flex-column" style="display: flex; height: 100%;">
            <!-- Grupo superior: Pendientes y Finalizados -->
            <div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="GestionZip" Match="NavLinkMatch.All">
                        <span class="bi bi-list-task" aria-hidden="true"></span> Gestion ZIP
                    </NavLink>
                </div>

                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="Pendientes" Match="NavLinkMatch.All">
                        <span class="bi bi-list-task" aria-hidden="true"></span> Pendientes
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="Gestiona" Match="NavLinkMatch.All">
                        <span class="bi bi-journal-check" aria-hidden="true"></span> Gestiona
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="Rechazados" Match="NavLinkMatch.All">
                        <span class="bi bi-journal-x" aria-hidden="true"></span> Rechazados
                    </NavLink>
                </div>
            </div>

            <!-- Grupo inferior: Instrucciones, empujado al fondo -->
            <div class="bottom-group">
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="Instrucciones">
                        <span class="bi bi-book-half" aria-hidden="true"></span> Instrucciones
                    </NavLink>
                </div>
            </div>
        </nav>
    </div>
</div>
