{% extends 'base/base.html' %}
{% block title %}My Profile - CryptoSignals Pro{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="page-title">My Profile</h1>
    
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <div class="mb-3">
                        {% if user.profile_image %}
                        <img src="{{ user.profile_image.url }}" alt="Profile" class="rounded-circle" style="width: 120px; height: 120px; object-fit: cover;">
                        {% else %}
                        <i class="bi bi-person-circle" style="font-size: 5rem; color: var(--accent-cyan);"></i>
                        {% endif %}
                    </div>
                    <h4 class="custom-text-white">{{ user.get_full_name|default:user.username }}</h4>
                    <p class="custom-text-muted">{{ user.email }}</p>
                    <span class="badge badge-active">Member since {{ user.date_joined|date:"M Y" }}</span>
                    <div class="mt-3">
                        {% if user.verification_status == 'VERIFIED' %}
                        <span class="badge badge-approved">ID Verified</span>
                        {% elif user.verification_status == 'PENDING' %}
                        <span class="badge badge-pending">Verification Pending</span>
                        {% else %}
                        <span class="badge badge-rejected">Verification Required</span>
                        {% endif %}
                    </div>
                    <a href="{% url 'identity_verification' %}" class="btn btn-sm btn-outline-primary mt-3">Manage Verification</a>
                </div>
            </div>
        </div>
        
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 custom-text-white">Profile Information</h5>
                    <a href="{% url 'edit_profile' %}" class="btn btn-sm btn-primary">Edit Profile</a>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="custom-text-muted">Username</label>
                            <p class="mb-0 custom-text-white">{{ user.username }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="custom-text-muted">Email</label>
                            <p class="mb-0 custom-text-white">{{ user.email }}</p>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="custom-text-muted">First Name</label>
                            <p class="mb-0 custom-text-white">{{ user.first_name|default:"-" }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="custom-text-muted">Last Name</label>
                            <p class="mb-0 custom-text-white">{{ user.last_name|default:"-" }}</p>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="custom-text-muted">Phone</label>
                            <p class="mb-0 custom-text-white">{{ user.phone|default:"-" }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="custom-text-muted">Country</label>
                            <p class="mb-0 custom-text-white">{{ user.country|default:"-" }}</p>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="custom-text-muted">City</label>
                            <p class="mb-0 custom-text-white">{{ user.city|default:"-" }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="custom-text-muted">Postal Code</label>
                            <p class="mb-0 custom-text-white">{{ user.postal_code|default:"-" }}</p>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="custom-text-muted">Address</label>
                        <p class="mb-0 custom-text-white">{{ user.address|default:"-" }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="custom-text-muted">Bio</label>
                        <p class="mb-0 custom-text-white">{{ user.bio|default:"-" }}</p>
                    </div>

                    <hr style="border-color: var(--border-color);">

                    <div class="mb-3">
                        <label class="custom-text-muted">Identity Verification</label>
                        <p class="mb-2 custom-text-white">{{ user.verification_status_label }}</p>
                        {% if user.id_card_image %}
                        <a href="{{ user.id_card_image.url }}" target="_blank" class="btn btn-sm btn-outline-primary me-2">View ID Card</a>
                        {% endif %}
                        {% if user.selfie_image %}
                        <a href="{{ user.selfie_image.url }}" target="_blank" class="btn btn-sm btn-outline-primary">View Selfie</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
