{% extends "base.html" %}
{% from 'components/ui.html' import page_header %}

{% block content %}
{% set actions %}
<a href="{{ url_for('auth.edit_profile') }}" class="btn btn-primary"><i class="fas fa-user-edit mr-2"></i>{{ _('Edit Profile') }}</a>
{% endset %}

{{ page_header(
    icon_class='fas fa-user-circle',
    title_text='My Profile',
    actions_html=actions,
    breadcrumbs=[
        {'text': 'Profile'}
    ]
) }}

<div class="bg-card-light dark:bg-card-dark p-4 sm:p-8 rounded-lg shadow max-w-2xl mx-auto">
    <div class="space-y-6">
        <div class="flex flex-col sm:flex-row 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|user_date }}</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|user_datetime if current_user.last_login else 'Never' }}</p>
        </div>
    </div>
</div>
{% endblock %}