{% extends 'layouts/base.html' %}
{% load static %}

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

{% block extra_css %}
<style>
    .profile-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }
    
    .profile-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        padding: 3rem 2rem;
        color: white;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }
    
    .profile-header::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transform: translate(50%, -50%);
    }
    
    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 5px solid rgba(255, 255, 255, 0.3);
        margin-bottom: 1.5rem;
    }
    
    .profile-info {
        position: relative;
        z-index: 2;
    }
    
    .profile-actions {
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 3;
    }
    
    .info-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }
    
    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid #f8f9fa;
    }
    
    .info-item:last-child {
        border-bottom: none;
    }
    
    .info-label {
        font-weight: 600;
        color: #6c757d;
        min-width: 150px;
    }
    
    .info-value {
        flex: 1;
        text-align: right;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        color: white;
    }
    
    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .stat-label {
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .badge-status {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }
    
    .btn-action {
        border-radius: 8px;
        padding: 0.5rem 1rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .btn-action:hover {
        transform: translateY(-2px);
    }
    
    .section-title {
        color: #495057;
        font-weight: 600;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e9ecef;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    @media (max-width: 768px) {
        .profile-container {
            padding: 1rem;
        }
        
        .profile-header {
            padding: 2rem 1.5rem;
            text-align: center;
        }
        
        .profile-actions {
            position: static;
            margin-top: 1rem;
            text-align: center;
        }
        
        .info-card {
            padding: 1.5rem;
        }
        
        .info-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }
        
        .info-value {
            text-align: left;
        }
        
        .stats-grid {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        }
    }
</style>
{% endblock extra_css %}

{% block content %}
<div class="profile-container">
    <!-- Profile Header -->
    <div class="profile-header">
        <div class="profile-actions">
            <a href="{% url 'accounts:current_profile_edit' %}" class="btn btn-light btn-sm">
                <i class="fe fe-edit-2 me-2"></i>Edit Profile
            </a>
        </div>
        
        <div class="profile-info">
            <div class="row align-items-center">
                <div class="col-md-auto">
                    {% if profile.avatar %}
                        <img src="{{ profile.avatar.url }}" alt="{{ user_obj.get_full_name }}" class="profile-avatar">
                    {% else %}
                        <div class="profile-avatar d-flex align-items-center justify-content-center" style="background: rgba(255,255,255,0.2); font-size: 3rem;">
                            <i class="fe fe-user"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="col-md">
                    <h1 class="mb-2">{{ user_obj.get_full_name|default:user_obj.username }}</h1>
                    <p class="mb-2 opacity-75">{{ user_obj.email }}</p>
                    {% if profile.job_title %}
                        <p class="mb-2 opacity-75">{{ profile.job_title }}{% if profile.company %} at {{ profile.company }}{% endif %}</p>
                    {% endif %}
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        <span class="badge {% if user_obj.is_active %}bg-success{% else %}bg-secondary{% endif %} badge-status">
                            {% if user_obj.is_active %}Active{% else %}Inactive{% endif %}
                        </span>
                        {% if user_obj.is_verified %}
                            <span class="badge bg-primary badge-status">Verified</span>
                        {% endif %}
                        {% if user_obj.is_staff %}
                            <span class="badge bg-warning badge-status">Staff</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Personal Information -->
            <div class="info-card">
                <h3 class="section-title">
                    <i class="fe fe-user"></i>
                    Personal Information
                </h3>
                
                <div class="info-item">
                    <span class="info-label">Full Name</span>
                    <span class="info-value">{{ user_obj.get_full_name|default:"Not provided" }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">Email</span>
                    <span class="info-value">{{ user_obj.email }}</span>
                </div>
                
                {% if user_obj.phone_number %}
                <div class="info-item">
                    <span class="info-label">Phone Number</span>
                    <span class="info-value">{{ user_obj.phone_number }}</span>
                </div>
                {% endif %}
                
                <div class="info-item">
                    <span class="info-label">Username</span>
                    <span class="info-value">{{ user_obj.username|default:"Not set" }}</span>
                </div>
                
                {% if profile.birth_date %}
                <div class="info-item">
                    <span class="info-label">Birth Date</span>
                    <span class="info-value">{{ profile.birth_date|date:"F d, Y" }} ({{ profile.get_age }} years old)</span>
                </div>
                {% endif %}
                
                {% if profile.bio %}
                <div class="info-item">
                    <span class="info-label">Biography</span>
                    <span class="info-value">{{ profile.bio }}</span>
                </div>
                {% endif %}
            </div>

            <!-- Professional Information -->
            {% if profile.job_title or profile.company or profile.website %}
            <div class="info-card">
                <h3 class="section-title">
                    <i class="fe fe-briefcase"></i>
                    Professional Information
                </h3>
                
                {% if profile.job_title %}
                <div class="info-item">
                    <span class="info-label">Job Title</span>
                    <span class="info-value">{{ profile.job_title }}</span>
                </div>
                {% endif %}
                
                {% if profile.company %}
                <div class="info-item">
                    <span class="info-label">Company</span>
                    <span class="info-value">{{ profile.company }}</span>
                </div>
                {% endif %}
                
                {% if profile.website %}
                <div class="info-item">
                    <span class="info-label">Website</span>
                    <span class="info-value">
                        <a href="{{ profile.website }}" target="_blank" class="text-decoration-none">
                            {{ profile.website }}
                            <i class="fe fe-external-link ms-1"></i>
                        </a>
                    </span>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Preferences -->
            <div class="info-card">
                <h3 class="section-title">
                    <i class="fe fe-settings"></i>
                    Preferences
                </h3>
                
                <div class="info-item">
                    <span class="info-label">Timezone</span>
                    <span class="info-value">{{ profile.timezone }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">Language</span>
                    <span class="info-value">{{ profile.get_language_display }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">Theme</span>
                    <span class="info-value">{{ profile.get_theme_display }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">Profile Visibility</span>
                    <span class="info-value">{{ profile.get_profile_visibility_display }}</span>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Account Statistics -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon" style="background: #28a745;">
                        <i class="fe fe-calendar"></i>
                    </div>
                    <div class="stat-number">{{ user_obj.date_joined|timesince }}</div>
                    <div class="stat-label">Member Since</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon" style="background: #17a2b8;">
                        <div class="stat-number">{{ user_obj.last_login|timesince|default:"Never" }}</div>
                        <div class="stat-label">Last Login</div>
                    </div>
                </div>
            </div>

            <!-- Account Status -->
            <div class="info-card">
                <h3 class="section-title">
                    <i class="fe fe-shield"></i>
                    Account Status
                </h3>
                
                <div class="info-item">
                    <span class="info-label">Status</span>
                    <span class="info-value">
                        <span class="badge {% if user_obj.is_active %}bg-success{% else %}bg-danger{% endif %}">
                            {% if user_obj.is_active %}Active{% else %}Inactive{% endif %}
                        </span>
                    </span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">Email Verified</span>
                    <span class="info-value">
                        <span class="badge {% if user_obj.is_verified %}bg-success{% else %}bg-warning{% endif %}">
                            {% if user_obj.is_verified %}Verified{% else %}Pending{% endif %}
                        </span>
                    </span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">Staff Access</span>
                    <span class="info-value">
                        <span class="badge {% if user_obj.is_staff %}bg-primary{% else %}bg-secondary{% endif %}">
                            {% if user_obj.is_staff %}Yes{% else %}No{% endif %}
                        </span>
                    </span>
                </div>
            </div>

            <!-- Notification Settings -->
            <div class="info-card">
                <h3 class="section-title">
                    <i class="fe fe-bell"></i>
                    Notifications
                </h3>
                
                <div class="info-item">
                    <span class="info-label">Email Notifications</span>
                    <span class="info-value">
                        <span class="badge {% if profile.email_notifications %}bg-success{% else %}bg-secondary{% endif %}">
                            {% if profile.email_notifications %}Enabled{% else %}Disabled{% endif %}
                        </span>
                    </span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">SMS Notifications</span>
                    <span class="info-value">
                        <span class="badge {% if profile.sms_notifications %}bg-success{% else %}bg-secondary{% endif %}">
                            {% if profile.sms_notifications %}Enabled{% else %}Disabled{% endif %}
                        </span>
                    </span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">General Notifications</span>
                    <span class="info-value">
                        <span class="badge {% if profile.notifications_enabled %}bg-success{% else %}bg-secondary{% endif %}">
                            {% if profile.notifications_enabled %}Enabled{% else %}Disabled{% endif %}
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}