{% extends 'generic/base.html' %}
{% load help_tags %}

{% block content %}
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="card shadow mb-4">
                    <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                        <h3 class="card-title mb-0">Answer Revision History</h3>
                        <span class="badge bg-secondary fs-6">{{ history|length }} version{{ history|pluralize }}</span>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <strong>App/Model:</strong> <span class="text-primary">{{ app_name }}.{{ model_name }}</span><br>
                                <strong>Answer ID:</strong> <span class="text-primary">{{ answer.pk }}</span>
                            </div>
                            <div class="col-md-6 text-md-end">
                                {% if exam %}
                                    <strong>Exam:</strong> <span class="text-info">{{ exam }}</span>
                                {% elif collection %}
                                    <strong>Case Collection:</strong> <span class="text-info">{{ collection }}</span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle">
                                <thead class="table-dark">
                                    <tr>
                                        <th style="width: 80px;">Rev ID</th>
                                        <th style="width: 180px;">Date / Time</th>
                                        <th style="width: 150px;">Editor</th>
                                        <th>Answer Value</th>
                                        <th style="width: 100px;">Score</th>
                                        <th>Comment</th>
                                        <th>Time answered</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for rev in history %}
                                        <tr>
                                            <td><code>#{{ rev.revision_id }}</code></td>
                                            <td>{{ rev.date }}</td>
                                            <td>
                                                {% if rev.user %}
                                                    <span class="badge bg-light text-dark">{{ rev.user.username }}</span>
                                                {% else %}
                                                    <span class="text-muted italic">System / Anon</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                        <pre class="mb-0 bg-light text-dark p-2 rounded" style="white-space: pre-wrap; font-size: 0.85rem;">{{ rev.answer_text }}</pre>
                                            </td>
                                            <td>
                                                {% if rev.score is not None and rev.score != "" %}
                                                    <span class="badge bg-primary">{{ rev.score }}</span>
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td><small class="text-muted">{{ rev.comment|default:"-" }}</small></td>
                                            <td>
                                                {% if rev.time_answered %}
                                                    {{ rev.time_answered }}
                                                {% else %}
                                                    <span class="text-muted
                                                                ">-</span>
                                                {% endif %}
                                            </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        {% if request.user.is_superuser or request.user.is_staff %}
                    <!-- Compacting tools panel -->
                            <div class="card mt-4 border-warning">
                                <div class="card-header bg-warning-subtle text-warning-emphasis fw-bold">
                                    <i class="bi bi-scissors me-1"></i> Compact History Settings
                                </div>
                                <div class="card-body">
                                    <p class="text-muted small">
                                        Compacting history deletes all older versions and their associated revision logs, retaining only the final answer database state. This is permanent and cannot be undone.
                                    </p>
                                    <div class="d-flex flex-wrap gap-3">
                                        {% if exam or collection %}
                                            <form method="post" style="display:inline;">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="compact_bulk">
                                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete all historical revisions for ALL candidate answers in this entire exam/collection?');">
                                                    Compact Entire {% if exam %}Exam{% else %}Collection{% endif %}
                                                </button>
                                            </form>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        <div class="d-flex justify-content-between mt-4">
                            <button type="button" class="btn btn-secondary" onclick="window.history.back();">Back</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}