<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eversync</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    {% load static %}
    <link rel="icon" href="{% static 'favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'index-style.css' %}" ">
    
</head>
    
</head>
<body>
    <div class="header">
        <div class="header-content">
            <a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px; display: flex; align-items: center; gap: 5px;"></a>
            <a href="/" class="logo" >eversync</a>
            <div class="nav-links" style="position: relative;">
                <div class="dropdown">
                    <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                        Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
                    </button>
                    <div class="dropdown-menu" style="display: none; position: absolute; right: 0; background-color: #333; border: 1px solid #444; border-radius: 4px; padding: 10px; width: 184px;">
                        
                        <form action="{% url 'manage' %}" method="post" style="margin: 0;">
                            {% csrf_token %}
                            <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Manage Account</button>
                        </form>
                        
                        <form action="{% url 'logoutz' %}" method="post" style="margin: 0;">
                            {% csrf_token %}
                            <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                        </form>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="welcome-box" style="width: 50%; margin: 0 auto;">
            {% load allauth %}
            {% load i18n %}
            {% block content %}
                {% element h1 tags="mfa,index" %}
                    {% trans "Two-Factor Authentication" %}
                    
                {% endelement %}
                
                <div class="divider"></div>

                {% if "totp" in MFA_SUPPORTED_TYPES %}
                    {% element panel %}
                        {% slot title %}
                            {% translate "Authenticator App" %}
                        {% endslot %}
                        {% slot body %}
                            {% if authenticators.totp %}
                                {% element p %}
                                    {% translate "Authentication using an authenticator app is active." %}
                                {% endelement %}
                            {% else %}
                                {% element p %}
                                    {% translate "An authenticator app is not active." %}
                                {% endelement %}
                            {% endif %}
                        {% endslot %}
                        {% slot actions %}
                            {% url 'mfa_deactivate_totp' as deactivate_url %}
                            {% url 'mfa_activate_totp' as activate_url %}
                            {% if authenticators.totp %}
                                {% element button href=deactivate_url tags="danger,delete,panel" %}
                                    {% translate "Deactivate" %}
                                {% endelement %}
                            {% else %}
                                {% element button href=activate_url tags="panel" %}
                                    {% translate "Activate" %}
                                {% endelement %}
                            {% endif %}
                        {% endslot %}
                    {% endelement %}
                {% endif %}
                {% if "webauthn" in MFA_SUPPORTED_TYPES %}
                    {% element panel %}
                        {% slot title %}
                            {% translate "Security Keys" %}
                        {% endslot %}
                        {% slot body %}
                            {% if authenticators.webauthn|length %}
                                {% element p %}
                                    {% blocktranslate count count=authenticators.webauthn|length %}You have added {{ count }} security key.{% plural %}You have added {{ count }} security keys.{% endblocktranslate %}
                                {% endelement %}
                            {% else %}
                                {% element p %}
                                    {% translate "No security keys have been added." %}
                                {% endelement %}
                            {% endif %}
                        {% endslot %}
                        {% slot actions %}
                            {% if authenticators.webauthn|length %}
                                {% url 'mfa_list_webauthn' as webauthn_list_url %}
                                {% element button href=webauthn_list_url %}
                                    {% translate "Manage" %}
                                {% endelement %}
                            {% else %}
                                {% url 'mfa_add_webauthn' as webauthn_add_url %}
                                {% element button href=webauthn_add_url %}
                                    {% translate "Add" %}
                                {% endelement %}
                            {% endif %}
                        {% endslot %}
                    {% endelement %}
                {% endif %}
                {% if "recovery_codes" in MFA_SUPPORTED_TYPES %}
                    {% with total_count=authenticators.recovery_codes.generate_codes|length unused_count=authenticators.recovery_codes.get_unused_codes|length %}
                        {% element panel %}
                            {% slot title %}
                            <div class="divider"></div>
                                {% translate "Recovery Codes" %}
                            {% endslot %}
                            {% slot body %}
                                {% if authenticators.recovery_codes %}
                                    {% element p %}
                                        {% blocktranslate count unused_count=unused_count %}There is {{ unused_count }} out of {{ total_count }} recovery codes available.{% plural %}There are {{ unused_count }} out of {{ total_count }} recovery codes available.{% endblocktranslate %}
                                    {% endelement %}
                                {% else %}
                                    {% element p %}
                                        {% translate "No recovery codes set up." %}
                                    {% endelement %}
                                {% endif %}
                            {% endslot %}
                            {% if is_mfa_enabled %}
                                {% if authenticators.recovery_codes %}
                                    {% if unused_count > 0 %}
                                        {% slot actions %}
                                            {% url 'mfa_view_recovery_codes' as view_url %}
                                            {% element button href=view_url tags="panel" %}
                                                {% translate "View" %}
                                            {% endelement %}
                                        {% endslot %}
                                        {% slot actions %}
                                            {% url 'mfa_download_recovery_codes' as download_url %}
                                            {% element button href=download_url tags="secondary,panel" %}
                                                {% translate "Download" %}
                                            {% endelement %}
                                        {% endslot %}
                                    {% endif %}
                                {% endif %}
                                {% slot actions %}
                                    {% url 'mfa_generate_recovery_codes' as generate_url %}
                                    {% element button href=generate_url tags="secondary,panel" %}
                                        {% translate "Generate" %}
                                    {% endelement %}
                                {% endslot %}
                            {% endif %}
                        {% endelement %}
                    {% endwith %}
                {% endif %}
            {% endblock content %}
            
        </div>
        
        </div>
    </div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const toggle = document.querySelector('.dropdown-toggle');
        const menu = document.querySelector('.dropdown-menu');
        toggle.addEventListener('click', function () {
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
        });
    });
</script>
</body>
</html> 
