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



{% block content %}
<div class="container-fluid p-0 m-0 pt-5 mt-4" style="background-color: var(--bg-main); min-height: 100vh;">
    <div class="row g-0">
        {% include 'admin_workspace/_admin_sidebar.html' %}

        <!-- Main Content Area -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-4 px-lg-5 py-5">
            <div class="d-flex justify-content-between align-items-end mb-5">
                <div class="fade-in-up">
                    <h1 class="serif-heading display-5 mb-2 text-main" style="color: var(--text-main);">All Registrations</h1>
                    <p class="text-muted fs-5 mb-0" style="max-width: 600px;">View and manage all participants registered for Botanica'26.</p>
                </div>
            </div>

            <!-- Registrations List -->
            <div class="b-card fade-in-up" style="animation-delay: 0.2s; padding: 0; overflow: hidden;">
                <div class="table-responsive">
                    <table class="table table-hover table-borderless mb-0 align-middle text-main" style="color: var(--text-main);">
                        <thead style="background: rgba(17, 21, 15, 0.5);">
                            <tr>
                                <th class="text-muted text-uppercase fw-bold py-3 ps-4" style="font-size: 0.75rem; letter-spacing: 0.05em;">Participant</th>
                                <th class="text-muted text-uppercase fw-bold py-3" style="font-size: 0.75rem; letter-spacing: 0.05em;">Contact</th>
                                <th class="text-muted text-uppercase fw-bold py-3" style="font-size: 0.75rem; letter-spacing: 0.05em;">Type</th>
                                <th class="text-muted text-uppercase fw-bold py-3" style="font-size: 0.75rem; letter-spacing: 0.05em;">Status</th>
                                <th class="text-muted text-uppercase fw-bold py-3 text-end pe-4" style="font-size: 0.75rem; letter-spacing: 0.05em;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for u in users %}
                            <tr style="border-bottom: 1px solid var(--border-light); transition: background 0.3s ease;">
                                <td class="py-3 ps-4">
                                    <div class="fw-bold">{{ u.first_name }} {{ u.last_name }}</div>
                                </td>
                                <td class="py-3 text-muted">{{ u.email }}</td>
                                <td class="py-3">
                                    <span class="badge rounded-pill bg-light text-muted border" style="font-weight: 500; padding: 6px 12px;">{{ u.get_registration_type_display }}</span>
                                </td>
                                <td class="py-3">
                                    {% if hasattr and u.review.is_approved %}
                                        <span class="badge bg-success" style="background: var(--secondary-forest-dim) !important; color: var(--highlight-sage) !important;">Approved</span>
                                    {% elif hasattr and u.review.is_submitted %}
                                        <span class="badge bg-warning text-dark">Pending</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Incomplete</span>
                                    {% endif %}
                                </td>
                                <td class="py-3 text-end pe-4">
                                    {% if hasattr and u.review.is_submitted %}
                                    <a href="{% url 'registration_detail' u.id %}" class="btn btn-sm b-btn-outline" style="border-radius: 100px; padding: 6px 16px;">View</a>
                                    {% else %}
                                    <button class="btn btn-sm btn-outline-light disabled" style="border-radius: 100px; padding: 6px 16px; opacity: 0.5;">Incomplete</button>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center text-muted py-5">
                                    No registrations found.
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</div>
{% endblock %}