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

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2>Bulk Generate Participants</h2>
            <p class="text-muted mb-0">Study: <a href="{% url 'research:study_detail' study.pk %}">{{ study.name }}</a></p>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-12 col-lg-6">
            <div class="card card-body bg-dark border-secondary">
                <h5>Upload Participants</h5>
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{ form|crispy }}
                    <button class="btn btn-primary mt-2" type="submit">Generate Participants</button>
                    <a class="btn btn-outline-secondary mt-2 ms-2" href="{% url 'research:study_detail' study.pk %}">Cancel</a>
                </form>
            </div>
        </div>

        <div class="col-12 col-lg-6">
            <div class="card card-body bg-dark border-secondary">
                <h5>Format Reference</h5>
                <p class="text-muted small">CSV format (with header row):</p>
                <pre class="bg-dark border rounded p-2 small">pseudo_id,candidate_group,email
P001,Group A,opt@example.com
P002,Group B,</pre>
                <hr class="border-secondary">
                <p class="text-muted small">JSON format:</p>
                <pre class="bg-dark border rounded p-2 small">[
  {"pseudo_id": "P001", "candidate_group": "A"},
  {"pseudo_id": "P002", "candidate_group": "B", "email": "..."}
]</pre>
                <p class="text-muted small mt-2">
                    <strong>Notes:</strong>
                    <ul class="small text-muted">
                        <li>Existing participants with the same pseudo_id will not be overwritten.</li>
                        <li>CID credentials are generated when participants complete intake.</li>
                        <li>email field is optional.</li>
                    </ul>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}