{% extends "base.html.j2" %}

{% block page_title %}Exam Constructor{% endblock %}

{% block header_subtitle %}
<p class="text-muted">Manage your exam types and attached files</p>
{% endblock %}

{% block form_section %}
<!-- No form on this page -->
{% endblock %}

{% block content %}
<div class="card">
    <h2 class="text-left">Available Exams</h2>
    
    <div class="flex flex-col gap-1 mt-2">
        {% for exam in exams['exam_list']%}
            <div class="exam-card">
                <div class="exam-card-info">
                    <span class="exam-card-name">{{exam['name']}}</span>
                    {% if exam['id'] in exams['built-in-indices'] %}
                        <span class="exam-card-badge built-in">Built-in</span>
                    {% else %}
                        <span class="exam-card-badge custom">Custom</span>
                    {% endif %}
                </div>
                <div class="exam-card-actions">
                    <form method="GET" class="control-button-form">
                        <input type="hidden" name="exam-id" value="{{exam['id']}}">
                        <input type="hidden" name="exam-name" value="{{exam['name']}}">
                        <button class="btn btn-secondary btn-sm" formaction="{{url_for('files.attached_files')}}">Manage Files</button>
                    </form>
                    {% if exam['id'] not in exams['built-in-indices'] %}
                    <form method="POST" class="control-button-form">
                        <input type="hidden" name="exam-id" value="{{exam['id']}}">
                        <button class="btn btn-danger btn-sm" formaction="{{url_for('exams.delete_custom_exam')}}">Delete</button>
                    </form>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<div class="card">
    <h2 class="text-left">Add New Exam</h2>
    <form name="custom-exam-form" id="custom-exam-form" method="POST" action="{{url_for('exams.add_custom_exam')}}" class="mt-2">
        <div class="form-group">
            <label class="form-label" for="new-exam-name">Name of the exam:</label>
            <input name="new-exam-name" id="new-exam-name" type="text" class="form-input" placeholder="e.g., AWS Solutions Architect" required>
        </div>
        <button type="submit" class="btn btn-primary">Add New Exam</button>
    </form>
</div>
{% endblock content%}
