{% extends "base.html" %}

{% block content %}
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
    <div>
        <h1 class="text-2xl font-bold">Profile</h1>
        <p class="text-text-muted-light dark:text-text-muted-dark">View your account details below.</p>
    </div>
    <a href="{{ url_for('auth.edit_profile') }}" class="bg-primary text-white px-4 py-2 rounded-lg mt-4 md:mt-0">{{ _('Edit Profile') }}</a>
</div>

<div class="bg-card-light dark:bg-card-dark p-8 rounded-lg shadow">
    <div class="space-y-6">
        <div class="flex items-center gap-4">
            <div class="relative">
                {% if current_user.get_avatar_url() %}
                    <img id="profileAvatar" src="{{ current_user.get_avatar_url() }}" alt="{{ current_user.display_name }}" class="w-20 h-20 rounded-full object-cover border-4 border-primary shadow-lg" onerror="this.onerror=null; this.style.display='none'; document.getElementById('profileAvatarFallback').style.display='flex';">
                    <div id="profileAvatarFallback" class="w-20 h-20 rounded-full bg-gradient-to-br from-primary to-blue-600 text-white flex items-center justify-center font-bold text-3xl border-4 border-primary shadow-lg" style="display: none;">
                        {{ current_user.display_name[0:1].upper() }}
                    </div>
                {% else %}
                    <div class="w-20 h-20 rounded-full bg-gradient-to-br from-primary to-blue-600 text-white flex items-center justify-center font-bold text-3xl border-4 border-primary shadow-lg">
                        {{ current_user.display_name[0:1].upper() }}
                    </div>
                {% endif %}
            </div>
            <div>
                <h2 class="text-lg font-semibold">{{ current_user.display_name }}</h2>
                <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ current_user.email or '' }}</p>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary mt-1">
                    <i class="fas fa-user-shield mr-1"></i>
                    {{ current_user.primary_role_name | capitalize }}
                </span>
            </div>
        </div>
        <div>
            <h2 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark">Username</h2>
            <p class="mt-1 text-lg">{{ current_user.username }}</p>
        </div>
        <div class="border-t border-border-light dark:border-border-dark"></div>
        <div>
            <h2 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark">Role</h2>
            <p class="mt-1 text-lg">{{ current_user.primary_role_name | capitalize }}</p>
        </div>
        <div class="border-t border-border-light dark:border-border-dark"></div>
        <div>
            <h2 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark">{{ _('Member Since') }}</h2>
            <p class="mt-1 text-lg">{{ current_user.created_at.strftime('%B %d, %Y') }}</p>
        </div>
        <div class="border-t border-border-light dark:border-border-dark"></div>
        <div>
            <h2 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark">{{ _('Last Login') }}</h2>
            <p class="mt-1 text-lg">{{ current_user.last_login.strftime('%B %d, %Y at %I:%M %p') if current_user.last_login else 'Never' }}</p>
        </div>
    </div>
</div>
{% endblock %}