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

{% block content %}
<div class="container py-4">
    <h2>{% if arm %}Edit Arm: {{ arm.name }}{% else %}Add Arm{% endif %}</h2>
    <p class="text-muted">Study: <a href="{% url 'research:study_detail' study.pk %}">{{ study.name }}</a></p>

    <div class="card card-body bg-dark border-secondary">
        <form method="post">
            {% csrf_token %}
            {{ form|crispy }}
            <div class="mt-3 d-flex gap-2">
                <button class="btn btn-primary" type="submit">Save Arm</button>
                <a class="btn btn-outline-secondary" href="{% url 'research:study_detail' study.pk %}">Cancel</a>
            </div>
        </form>
    </div>

    {% if arm and arm.packet %}
    <div class="card card-body bg-dark border-secondary mt-3">
        <h6>Collection Marking Configuration</h6>
        <p class="small text-muted mb-2">
            Marking guidance and scheme names are now configured on the <a href="{% url 'atlas:collection_detail' arm.packet.pk %}">CaseCollection</a> directly.
            This allows the same configuration to be reused across multiple studies.
        </p>
        <ul class="list-group list-group-flush bg-transparent">
            <li class="list-group-item bg-transparent text-light">
                <strong>Marking Scheme:</strong> {{ arm.packet.marking_scheme_name|default:'(not set)' }}
            </li>
            <li class="list-group-item bg-transparent text-light">
                <strong>Max Score Per Case:</strong> {{ arm.packet.case_question_max_score|default:'10 (default)' }}
            </li>
            <li class="list-group-item bg-transparent text-light">
                <strong>Marking Guidance:</strong><br>
                <span class="text-muted">{{ arm.packet.marking_guidance|default:'(not set)' }}</span>
            </li>
        </ul>
        <a class="btn btn-sm btn-outline-info mt-2" href="{% url 'atlas:collection_detail' arm.packet.pk %}">
            Edit Collection Marking Config
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}