<!-- ====== HEADER ====== -->
<header class="app-header">
    <div class="header-container">
        <div class="logo">
            <i class="fas fa-trophy"></i>
            <span>EST Concours</span>
        </div>
        <nav class="header-nav">
            <ul>
                <li><a href="#" class="active"><i class="fas fa-home"></i> Accueil</a></li>
                <li><a href="/est-concours/app/view/student/inscription/create"><i class="fas fa-list-ul"></i> Soumettre Votre Inscription</a></li>
                <li><a href="/est-concours/app/view/student/inscription/list"><i class="fas fa-users"></i> Mes Inscriptions</a></li>
            </ul>
        </nav>

        <!-- Profile Dropdown -->
        <div class="user-profile" style="position: relative; cursor: pointer;" onclick="toggleDropdown()">
            <i class="fas fa-user-circle"></i>
            <span>Profil</span>
            <i class="fas fa-chevron-down" style="font-size:11px; margin-left:4px;"></i>

            <div id="profileDropdown" style="
                display: none;
                position: absolute;
                top: 110%;
                right: 0;
                background: white;
                border-radius: 8px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.15);
                min-width: 180px;
                z-index: 1000;
                overflow: hidden;
            ">
                <a href="/est-concours/app/view/student/profile/" style="
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 12px 18px;
                    color: #343a40;
                    text-decoration: none;
                    font-size: 14px;
                    font-weight: 500;
                    border-bottom: 1px solid #f0f0f0;
                " onmouseover="this.style.background='#f0f9ff'" onmouseout="this.style.background='white'">
                    <i class="fas fa-user" style="color:#00c0ed;"></i> Modifier Profil
                </a>
                <a href="/est-concours/app/view/student/logout.php" style="
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 12px 18px;
                    color: #dc3545;
                    text-decoration: none;
                    font-size: 14px;
                    font-weight: 500;
                " onmouseover="this.style.background='#fff5f5'" onmouseout="this.style.background='white'">
                    <i class="fas fa-sign-out-alt"></i> Se Déconnecter
                </a>
            </div>
        </div>
    </div>
</header>

<script>
function toggleDropdown() {
    var d = document.getElementById('profileDropdown');
    d.style.display = d.style.display === 'none' ? 'block' : 'none';
}
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
    var profile = document.querySelector('.user-profile');
    if (profile && !profile.contains(e.target)) {
        document.getElementById('profileDropdown').style.display = 'none';
    }
});
</script>