@inherits LayoutComponentBase
@inject Blazored.Modal.Services.IModalService ModalService
@inject AuthenticationStateProvider AuthenticationStateProvider
@using Microsoft.AspNetCore.Components.Authorization
<BlazoredToasts />

<div class="page">
    <!-- Barre supérieure fixe -->
    <div class="top-bar">
        <div class="top-bar-content">
            <div class="top-bar-left">
                <button class="burger-menu" onclick="toggleSidebar()" aria-label="Toggle menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <a href="https://www.allin-it.fr/" target="_blank" class="logo-link">
                    <img src="images/logo.png" alt="Logo All in IT" width="50" height="50" />
                </a>
                <a class="app-title" href="">AI-100-SaaS</a>
            </div>

            <div class="top-bar-right">
                <div class="user-menu">
                    <button class="user-menu-button" onclick="toggleUserMenu(event)">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
                            <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1" />
                        </svg>
                    </button>
                    <div class="user-menu-dropdown" id="userMenuDropdown">
                        <AuthorizeView Roles="Admin">
                            <Authorized>
                                <a href="administration" class="dropdown-item">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tools dropdown-icon             " viewBox="0 0 16 16">
                                        <path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z" />
                                    </svg>
                                    <span>Administration</span>
                                </a>
                            </Authorized>
                        </AuthorizeView>

                        <a href="dt_work_force_list" class="dropdown-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person dropdown-icon" viewBox="0 0 16 16">
                                <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z" />
                            </svg>                            
                            <span>Mon compte</span>
                        </a>

                        <div class="dropdown-divider"></div>

                        <a href="logout" class="dropdown-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-closed dropdown-icon" viewBox="0 0 16 16">
                                <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3zm1 13h8V2H4z" />
                                <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0" />
                            </svg>                            
                            <span>Déconnexion</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>

    <!-- Container principal avec sidebar et contenu -->
    <div class="main-container">
        <!-- Sidebar avec le menu -->
        <div class="sidebar" id="sidebar">
            <NavMenu />
        </div>

        <div class="content-wrapper">
            <main class="main-content">
                @Body
            </main>
            <footer class="footer">
                <small>
                    <p>&copy; 2025 Make with love - Tous droits réservés - Version 1.0.0</p>
                </small>
            </footer>
        </div>
    </div>
</div>

<script>
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebarOverlay');
        const burger = document.querySelector('.burger-menu');

        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
        burger.classList.toggle('active');
    }

    function closeSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebarOverlay');
        const burger = document.querySelector('.burger-menu');

        sidebar.classList.remove('active');
        overlay.classList.remove('active');
        burger.classList.remove('active');
    }

    function toggleUserMenu(event) {
        event.stopPropagation();
        const dropdown = document.getElementById('userMenuDropdown');
        dropdown.classList.toggle('show');
    }

    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('userMenuDropdown');
        if (dropdown && dropdown.classList.contains('show')) {
            dropdown.classList.remove('show');
        }
    });
</script>


@code {
    private AuthenticationState? authState;
    private System.Security.Claims.ClaimsPrincipal? user;

    protected override async Task OnInitializedAsync()
    {
        authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        user = authState.User;
    }
}                
