{% extends "atlas/base.html" %}
{% load crispy_forms_tags %}

{% block content %}
<h2>{{ study.name }}</h2>
<p class="text-muted mb-3">Slug: <code>{{ study.slug }}</code></p>

<div class="mb-3 d-flex gap-2 flex-wrap">
    <a class="btn btn-outline-primary" href="{% url 'atlas:research_study_update' study.pk %}">Edit Study</a>
    <a class="btn btn-outline-secondary" href="{% url 'atlas:research_study_export_csv' study.pk %}">Export CSV</a>
    <a class="btn btn-outline-secondary" href="{% url 'atlas:research_study_export_json' study.pk %}">Export JSON</a>
</div>

<div class="card card-body bg-dark border-secondary mb-4">
    <h5 class="mb-2">Participant URL</h5>
    <p class="small text-muted mb-2">Append the pseudo-anonymised ID to this base URL:</p>
    <code>{{ request.scheme }}://{{ request.get_host }}{% url 'atlas:research_participant_entry' study.slug 'PSEUDO_ID' %}</code>
</div>

<div class="row g-4">
    <div class="col-12 col-lg-6">
        <div class="card card-body bg-dark border-secondary h-100">
            <h5>Packets</h5>
            {% if arm_rows %}
            <table class="table table-dark table-striped table-sm align-middle">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Collection</th>
                        <th>Assigned</th>
                        <th>Mark Scheme</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for arm, assigned_count in arm_rows %}
                    <tr>
                        <td>{{ arm.name }}</td>
                        <td>{{ arm.packet.name }}</td>
                        <td>{{ assigned_count }}</td>
                        <td>{{ arm.marking_scheme_name|default:'Default' }}</td>
                        <td><a class="btn btn-sm btn-outline-primary" href="{% url 'atlas:research_study_arm_update' study.pk arm.pk %}">Edit</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="alert alert-warning">No packets configured. Add at least one packet before sharing participant links.</div>
            {% endif %}
        </div>
    </div>

    <div class="col-12 col-lg-6">
        <div class="card card-body bg-dark border-secondary h-100">
            <h5>Add Packet</h5>
            <form method="post">
                {% csrf_token %}
                {{ arm_form|crispy }}
                <button class="btn btn-primary" type="submit">Add Packet</button>
            </form>
        </div>
    </div>
</div>

<div class="card card-body bg-dark border-secondary mt-4">
    <h5>Participants ({{ participants|length }})</h5>
    {% if participants %}
    <div class="table-responsive">
        <table class="table table-dark table-striped table-sm">
            <thead>
                <tr>
                    <th>Pseudo ID</th>
                    <th>Group</th>
                    <th>Assigned Packet</th>
                    <th>CID</th>
                    <th>Assigned At</th>
                </tr>
            </thead>
            <tbody>
                {% for participant in participants %}
                <tr>
                    <td>{{ participant.pseudo_id }}</td>
                    <td>{{ participant.candidate_group|default:'-' }}</td>
                    <td>{% if participant.assigned_arm %}{{ participant.assigned_arm.name }}{% else %}-{% endif %}</td>
                    <td>{% if participant.cid_user %}{{ participant.cid_user.cid }}{% else %}-{% endif %}</td>
                    <td>{{ participant.assigned_at|default:'-' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="alert alert-info mb-0">No participants yet.</div>
    {% endif %}
</div>
{% endblock %}