{% extends "base_app.html" %}
{% set active_page = 'account' %}
{% block title %}Account — TheNicheQuiz{% endblock %}

{% block body %}
<div class="app-page" style="max-width: 600px;">
    <div class="page-header">
        <h1 class="page-title">Account</h1>
        <p class="page-subtitle">Your account details</p>
    </div>

    <div class="card">
        <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 28px;">
            <div style="width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--purple), var(--blue)); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff;">
                {{ current_user.name[0]|upper if current_user.name else 'U' }}
            </div>
            <div>
                <div style="font-size: 20px; font-weight: 700;">{{ current_user.name or 'User' }}</div>
                <div style="font-size: 14px; color: var(--text-secondary);">{{ current_user.email }}</div>
            </div>
        </div>

        <div style="display: flex; flex-direction: column; gap: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
                <div>
                    <div style="font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;">Name</div>
                    <div style="font-size: 15px; margin-top: 4px;">{{ current_user.name or 'Not set' }}</div>
                </div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
                <div>
                    <div style="font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;">Email</div>
                    <div style="font-size: 15px; margin-top: 4px;">{{ current_user.email }}</div>
                </div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
                <div>
                    <div style="font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;">Member Since</div>
                    <div style="font-size: 15px; margin-top: 4px;">{{ current_user.created_at.strftime('%B %d, %Y') if current_user.created_at else 'N/A' }}</div>
                </div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 14px 0;">
                <div>
                    <div style="font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;">Plan</div>
                    <div style="font-size: 15px; margin-top: 4px;">
                        <span class="badge badge-amber">Free</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="margin-top: 24px;">
        <a href="/logout" class="btn btn-outline" style="width: 100%; justify-content: center;">Log Out</a>
    </div>
</div>
{% endblock %}
