{% extends "base.html" %}

{% block title %}Settings - Roster{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm p-4">
                <h3 class="brand-font h4 mb-4">Account Settings</h3>
                <nav class="nav flex-column">
                    <a class="nav-link px-0 text-slate fw-bold" href="#">Preferences</a>
                    <a class="nav-link px-0 text-muted" href="#">Privacy & Visibility</a>
                    <a class="nav-link px-0 text-muted" href="#">Notifications</a>
                    <hr>
                    <form action="{% url 'logout' %}" method="post" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="nav-link px-0 text-danger border-0 bg-transparent">Log Out</button>
                    </form>
                </nav>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm p-4">
                <h4 class="brand-font mb-4">Preferences</h4>
                <form method="post">
                    {% csrf_token %}
                    <div class="mb-4">
                        <label class="form-label d-block fw-bold">Two-Factor Authentication</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="two_factor" id="twoFactorSwitch" {% if profile.two_factor_enabled %}checked{% endif %}>
                            <label class="form-check-label" for="twoFactorSwitch">Enable 2FA for extra security</label>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label d-block fw-bold">Email Verification</label>
                        {% if profile.is_email_verified %}
                        <span class="badge bg-success">Verified</span>
                        {% else %}
                        <span class="badge bg-warning text-dark">Pending</span>
                        <p class="small text-muted mt-2">Verification is simulated for MVP.</p>
                        {% endif %}
                    </div>

                    <button type="submit" class="btn btn-primary-cg px-4">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
