{% extends 'sbas/base.html' %}

{% partialdef links-partial %}

    <div class="btn-group mt-3 mt-md-0" role="group" aria-label="Actions">
        <a class="btn btn-sm btn-outline-primary" href="{% url 'sbas:question_update' question.id %}">Edit</a>
        <a class="btn btn-sm btn-outline-secondary" href="{% url 'sbas:question_clone' question.id %}">Clone</a>
        <a class="btn btn-sm btn-outline-danger" href="{% url 'sbas:question_delete' pk=question.pk %}">Delete</a>
        <a class="btn btn-sm btn-outline-light" href="{% url 'admin:sbas_question_change' question.id %}">Admin</a>
        <button class="btn btn-sm btn-outline-info" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='sbas' pk=question.pk %}')">Add Note</button>
        <button class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#reviewModal" hx-get="{% url 'sbas:question_set_review' question.pk %}?edit=1&new=1" hx-target="#reviewModalBody" hx-swap="innerHTML" hx-trigger="click">Add Review</button>
        <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#reviewsModal" hx-get="{% url 'sbas:question_reviews' question.pk %}" hx-target="#reviewsModalBody" hx-swap="innerHTML" hx-trigger="click">Reviews History</button>
    </div>

<!-- Reviews modal -->
    <div class="modal fade" id="reviewsModal" tabindex="-1" aria-labelledby="reviewsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="reviewsModalLabel">Review history</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="reviewsModalBody">
                <!-- HTMX will load the reviews list here -->
                    <div class="text-center small text-muted">Loading…</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

<!-- Review form modal -->
    <div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="reviewModalLabel">Add / Edit Review</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="reviewModalBody">
                <!-- HTMX will load the review form here -->
                    <div class="text-center small text-muted">Loading</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endpartialdef %}

{% block content %}
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start mb-3 flex-column flex-md-row">
                <div>
                    <h2 class="h4 mb-1">{{ question.title|default:"(No title set)" }}</h2>
                    <div class="text-muted small">Created: {{ question.created_date|date:"d/m/Y" }}</div>
                </div>
                {% partial links-partial %}
            </div>

            <div class="row">
                <div class="col-12 col-lg-8">
                    <div class="mb-3">
                        <div class="mb-2">Review status:</div>
                        <div id="question-review-block" hx-get="{% url 'sbas:question_set_review' question.pk %}" hx-trigger="load" hx-swap="innerHTML">
                {# Placeholder while HTMX fetches review/form #}
                        </div>
                        {% autoescape off %}
                            <div class="card p-3 bg-body-secondary">{{ question.stem }}</div>
                            <ol class="abcde list-group list-group-numbered mt-3">
                                <li class="list-group-item"><strong>{{ question.a_answer }}</strong>
                                    {% if question.a_feedback %}<div class="small text-muted mt-1">Feedback: <em>{{ question.a_feedback|safe }}</em></div>{% endif %}
                                </li>
                                <li class="list-group-item"><strong>{{ question.b_answer }}</strong>
                                    {% if question.b_feedback %}<div class="small text-muted mt-1">Feedback: <em>{{ question.b_feedback|safe }}</em></div>{% endif %}
                                </li>
                                <li class="list-group-item"><strong>{{ question.c_answer }}</strong>
                                    {% if question.c_feedback %}<div class="small text-muted mt-1">Feedback: <em>{{ question.c_feedback|safe }}</em></div>{% endif %}
                                </li>
                                <li class="list-group-item"><strong>{{ question.d_answer }}</strong>
                                    {% if question.d_feedback %}<div class="small text-muted mt-1">Feedback: <em>{{ question.d_feedback|safe }}</em></div>{% endif %}
                                </li>
                                <li class="list-group-item"><strong>{{ question.e_answer }}</strong>
                                    {% if question.e_feedback %}<div class="small text-muted mt-1">Feedback: <em>{{ question.e_feedback|safe }}</em></div>{% endif %}
                                </li>
                            </ol>
                            <div class="mt-2">Correct: <span class="badge bg-success text-white fs-5 py-2 px-3 rounded-pill correct-badge">{{ question.get_correct_answer_stripped }}</span></div>
                        {% endautoescape %}
                    </div>

                    <div class="mb-3">
                        <h5 class="h6">Feedback</h5>
                        <div>{{ question.feedback|safe|linebreaks }}</div>
                    </div>

                    <div class="mb-3">
                        <h5 class="h6">Sources</h5>
                        {% if question.sources %}
                            <ul class="list-unstyled">
                                {% for source in question.sources %}
                                    <li class="small">{{ source }}</li>
                                {% endfor %}
                            </ul>
                        {% else %}
                            <div class="small text-muted">None</div>
                        {% endif %}
                    </div>

                    {% include 'question_notes.html' %}
                </div>

                <div class="col-12 col-lg-4">
                    <div class="mb-3">
                        <h5 class="h6">Metadata</h5>
                        <div class="mb-2"><strong>Category:</strong> {{ question.category }}</div>
                        <div class="mb-2"><strong>Examinations:</strong>
                            <div>
                                {% for exam in question.exams.all %}
                                    <a class="d-inline-block badge bg-secondary text-white text-decoration-none mb-1 me-1" href="{% url 'sbas:exam_overview' pk=exam.pk %}">{{ exam }}</a>
                                {% empty %}
                                    <span class="small text-muted">None</span>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="mb-2"><strong>Authors:</strong>
                            <div>
                                {% if question.author.all %}
                                    {% for u in question.author.all %}
                                        <span class="d-inline-block small">{{ u.get_full_name|default:u.username }}</span>{% if not forloop.last %}, {% endif %}
                                    {% endfor %}
                                {% else %}
                                    <span class="small text-muted">Unknown</span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-2"><strong>Findings</strong>
                            <div>
                                {% if question.finding.exists %}
                                    {% for f in question.finding.all %}
                                        <a class="badge bg-info text-white text-decoration-none mb-1 me-1" href="{{ f.get_absolute_url }}">{{ f.name }}</a>
                                    {% endfor %}
                                {% else %}
                                    <div class="small text-muted">None</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-2"><strong>Structures</strong>
                            <div>
                                {% if question.structure.exists %}
                                    {% for s in question.structure.all %}
                                        <a class="badge bg-warning text-dark text-decoration-none mb-1 me-1" href="{{ s.get_absolute_url }}">{{ s.name }}</a>
                                    {% endfor %}
                                {% else %}
                                    <div class="small text-muted">None</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-2"><strong>Conditions</strong>
                            <div>
                                {% if question.condition.exists %}
                                    {% for c in question.condition.all %}
                                        <a class="badge bg-primary text-white text-decoration-none mb-1 me-1" href="{{ c.get_absolute_url }}">{{ c.name }}</a>
                                    {% endfor %}
                                {% else %}
                                    <div class="small text-muted">None</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-2"><strong>Presentations</strong>
                            <div>
                                {% if question.presentation.exists %}
                                    {% for p in question.presentation.all %}
                                        <a class="badge bg-secondary text-white text-decoration-none mb-1 me-1" href="{{ p.get_absolute_url }}">{{ p.name }}</a>
                                    {% endfor %}
                                {% else %}
                                    <div class="small text-muted">None</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-2"><strong>Subspecialties</strong>
                            <div>
                                {% if question.subspecialty.exists %}
                                    {% for ss in question.subspecialty.all %}
                                        <a class="badge bg-dark text-white text-decoration-none mb-1 me-1" href="{{ ss.get_absolute_url }}">{{ ss.name }}</a>
                                    {% endfor %}
                                {% else %}
                                    <div class="small text-muted">None</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="mb-2"><strong>Open Access:</strong>
                            <div>
                                {% if question.open_access %}
                                    <span class="badge bg-success text-white">Yes</span>
                                {% else %}
                                    <span class="badge bg-danger text-white">No</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="mb-2"><strong>FRCR appropriate:</strong>
                            <div>
                                {% include 'sbas/_frcr_toggle.html' %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

{% endblock %}