{% 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);">Abstract Review</h1>
                    <p class="text-muted fs-5 mb-0" style="max-width: 600px;">Review uploaded scientific abstracts and presentations.</p>
                </div>
            </div>

            <!-- Abstracts 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;">Presentation Type</th>
                                <th class="text-muted text-uppercase fw-bold py-3" style="font-size: 0.75rem; letter-spacing: 0.05em;">Theme</th>
                                <th class="text-muted text-uppercase fw-bold py-3 text-end pe-4" style="font-size: 0.75rem; letter-spacing: 0.05em;">Document</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>
                                    <div class="text-muted small">{{ u.email }}</div>
                                </td>
                                <td class="py-3">
                                    <span class="badge rounded-pill bg-light text-muted border" style="font-weight: 500; padding: 6px 12px;">{{ u.participation.get_presentation_type_display|default:"-" }}</span>
                                </td>
                                <td class="py-3 text-muted">{{ u.participation.theme|default:"-" }}</td>
                                <td class="py-3 text-end pe-4">
                                    {% if u.abstract.file %}
                                    <a href="{{ u.abstract.file.url }}" target="_blank" class="btn btn-sm b-btn-outline" style="border-radius: 100px; padding: 6px 16px;">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-1"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
                                        View Abstract
                                    </a>
                                    {% else %}
                                    <span class="text-muted small">No Document</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center text-muted py-5">
                                    No abstracts found.
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</div>
{% endblock %}