{% extends 'base.html' %}
{% block title %}My Profile{% endblock %}

{% block content %}

<div class="container py-5">

    <div class="row justify-content-center">
        <div class="col-lg-8">

            <div class="card shadow border-0">
                <div class="card-body p-5">

                    <div class="mt-2">
                        <a href="{% url 'dashboard' %}" class="btn btn-secondary">
                            Back to Dashboard
                        </a>
                    </div>

                    <h3 class="fw-bold text-success mb-4 text-center">
                        My Profile
                    </h3>

                    <!-- Basic Info -->
                    <div class="row mb-4">
                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold text-muted">Full Name</label>
                            <div>{{ user_obj.get_full_name }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold text-muted">Email</label>
                            <div>{{ user_obj.email }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold text-muted">Phone</label>
                            <div>{{ user_obj.phone_number }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold text-muted">County</label>
                            <div>{{ user_obj.county }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold text-muted">Constituency</label>
                            <div>{{ user_obj.constituency }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold text-muted">Institution</label>
                            <div>{{ user_obj.institution }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold text-muted">Course</label>
                            <div>{{ user_obj.course }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold text-muted">Registration Number</label>
                            <div>{{ user_obj.registration_number }}</div>
                        </div>
                        
                        <div class="col-12 mb-3">
                            <label class="fw-semibold text-muted">You joined BUSA on {{ user_obj.date_registered }}</label>
                        </div>
                    </div>

                    <!-- Student ID -->
                    <div class="text-center mt-4">
                        <h5 class="fw-bold mb-3">Student ID</h5>

                        {% if user_obj.student_id %}
                            <img src="{{ user_obj.student_id.url }}"
                                 class="img-fluid rounded shadow-sm mb-3"
                                 style="max-height: 250px; object-fit: contain;">

                            <div>
                                <a href="{{ user_obj.student_id.url }}"
                                   target="_blank"
                                   class="btn btn-outline-primary btn-sm">
                                    View Full Image
                                </a>
                            </div>
                        {% else %}
                            <div class="alert alert-warning">
                                No student ID uploaded.
                            </div>
                        {% endif %}
                    </div>

                    <!-- Status -->
                    <div class="text-center mt-4">
                        <p class="alert alert-warning">
                            If any of the above details are not correct, please contact the administrator for rectification.
                        </p>
                    </div>

                </div>
            </div>

        </div>
    </div>

</div>

{% endblock %}