{% extends 'base.html' %}

{% block title %}Profile{% endblock %}

{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
        <div class="bg-white rounded-lg shadow-lg border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h2 class="text-xl font-semibold text-gray-900">Your Profile</h2>
                <a href="{% url 'accounts:profile_edit' %}" class="bg-black text-white px-3 py-1.5 text-sm rounded-md hover:bg-gray-800 transition-colors duration-200">
                    Edit Profile
                </a>
            </div>
            <div class="px-6 py-6">
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-shrink-0 text-center">
                        {% if user.profile.avatar %}
                            <img src="{{ user.profile.avatar.url }}" class="w-32 h-32 rounded-full mx-auto border border-gray-200 object-cover" alt="Profile Avatar">
                        {% else %}
                            <div class="w-32 h-32 rounded-full bg-gray-100 flex items-center justify-content-center mx-auto border border-gray-200">
                                <span class="text-4xl text-gray-500">👤</span>
                            </div>
                        {% endif %}
                    </div>
                    <div class="flex-1">
                        <h3 class="text-2xl font-bold text-gray-900 mb-1">{{ user.full_name|default:user.email }}</h3>
                        <p class="text-gray-600 mb-4">{{ user.email }}</p>
                        
                        <div class="space-y-3">
                            {% if user.profile.bio %}
                                <div>
                                    <span class="text-sm font-medium text-gray-900">Bio:</span>
                                    <p class="text-gray-700 mt-1">{{ user.profile.bio }}</p>
                                </div>
                            {% endif %}
                            
                            {% if user.profile.location %}
                                <p class="text-gray-700">
                                    <span class="font-medium text-gray-900">Location:</span> {{ user.profile.location }}
                                </p>
                            {% endif %}
                            
                            {% if user.profile.birth_date %}
                                <p class="text-gray-700">
                                    <span class="font-medium text-gray-900">Birth Date:</span> {{ user.profile.birth_date }}
                                </p>
                            {% endif %}
                            
                            {% if user.profile.phone_number %}
                                <p class="text-gray-700">
                                    <span class="font-medium text-gray-900">Phone:</span> {{ user.profile.phone_number }}
                                </p>
                            {% endif %}
                            
                            <p class="text-gray-700">
                                <span class="font-medium text-gray-900">Member since:</span> {{ user.date_joined|date:"M d, Y" }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="lg:col-span-1">
        <div class="bg-white rounded-lg shadow-lg border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-900">Account Status</h2>
            </div>
            <div class="px-6 py-6">
                <div class="space-y-4">
                    <div>
                        <span class="text-sm font-medium text-gray-900">Email verified:</span>
                        <div class="mt-1">
                            {% if user.is_verified %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Verified</span>
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Unverified</span>
                            {% endif %}
                        </div>
                    </div>
                    <div>
                        <span class="text-sm font-medium text-gray-900">Account type:</span>
                        <p class="text-gray-700 mt-1">{{ user.groups.first.name|default:"User"|title }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}