{% extends 'base/base.html' %}
{% block title %}Identity Verification - CryptoSignals Pro{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="page-title">Identity Verification</h1>

    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0 custom-text-white">Withdrawal Access</h5>
                </div>
                <div class="card-body">
                    <p class="custom-text-muted">
                        Upload your ID card and one selfie. After admin approval, withdrawals will be unlocked for your account.
                    </p>

                    <div class="p-3 rounded mb-3" style="background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color);">
                        <small class="custom-text-muted d-block mb-2">Current Status</small>
                        {% if user.verification_status == 'VERIFIED' %}
                        <span class="badge badge-approved">{{ user.verification_status_label }}</span>
                        {% elif user.verification_status == 'PENDING' %}
                        <span class="badge badge-pending">{{ user.verification_status_label }}</span>
                        {% else %}
                        <span class="badge badge-rejected">{{ user.verification_status_label }}</span>
                        {% endif %}
                    </div>

                    {% if user.id_card_image %}
                    <a href="{{ user.id_card_image.url }}" target="_blank" class="btn btn-sm btn-outline-primary mb-2">View Uploaded ID Card</a>
                    {% endif %}
                    {% if user.selfie_image %}
                    <a href="{{ user.selfie_image.url }}" target="_blank" class="btn btn-sm btn-outline-primary mb-2">View Uploaded Selfie</a>
                    {% endif %}

                    <p class="custom-text-muted small mb-0 mt-2">
                        Make sure your documents are clear and belong to your own account details.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0 custom-text-white">Submit Verification Documents</h5>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}

                        {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {{ form.non_field_errors }}
                        </div>
                        {% endif %}

                        <div class="mb-3">
                            <label class="form-label">ID Card</label>
                            {{ form.id_card_image }}
                            {% if form.id_card_image.errors %}
                            <div class="text-danger small mt-2">{{ form.id_card_image.errors|join:", " }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Selfie</label>
                            {{ form.selfie_image }}
                            {% if form.selfie_image.errors %}
                            <div class="text-danger small mt-2">{{ form.selfie_image.errors|join:", " }}</div>
                            {% endif %}
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">Submit for Review</button>
                            <a href="{% url 'profile' %}" class="btn btn-outline-primary">Back to Profile</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
