{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block page_title %}Exams{% endblock %}

{% block admin_content %}
<script type="application/json" id="simple-school-classes-json">{{ classes | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>
<script type="application/json" id="simple-school-students-json">{{ students | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>
{{ crud::shell_open(config_url="/plugins/simple-school/assets/admin/exams_list.json", mount_id="simple-school-exams-list", custom_mount=true) }}
<table>
  <thead></thead>
  <tbody>
    <tr><td colspan="5" class="crud-empty-state text-center">Loading exams…</td></tr>
  </tbody>
</table>
{{ crud::shell_close() }}

<div id="simple-school-exam-modal" class="crud-modal" aria-hidden="true">
  <div class="modal-content">
    <div class="modal-header"><h2 id="simple-school-exam-modal-title">Add Exam</h2><button type="button" class="close-modal" aria-label="Close">&times;</button></div>
    <div class="modal-body"><div id="simple-school-exam-form-fields"></div></div>
  </div>
</div>

<form id="score-form" class="blocks-admin-form mt-2" data-endpoint="/plugins/simple-school/api/exam_score_save">
  <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
    <div class="sm:col-span-3">
      <select class="blocks-input" name="exam_id" id="score-form-exam-id" required>
        <option value="">Select exam</option>
      </select>
    </div>
    <div class="sm:col-span-3">
      <select class="blocks-input" name="student_id" required>
        <option value="">Select student</option>
        {% for item in students %}
        <option value="{{ item.id }}">{{ item.name }}{% if item.class_label %} ({{ item.class_label }}){% endif %}</option>
        {% endfor %}
      </select>
    </div>
    <div class="sm:col-span-2"><select class="blocks-input" name="attended"><option value="1">Attended</option><option value="0">Absent</option></select></div>
    <div class="sm:col-span-1"><input class="blocks-input" name="score" placeholder="Score"></div>
    <div class="sm:col-span-2"><input class="blocks-input" name="notes" placeholder="Notes"></div>
    <div class="sm:col-span-1"><button class="blocks-button blocks-button-secondary" type="submit">Save</button></div>
  </div>
</form>
{% endblock %}

{% block scripts %}
<script src="/plugins/simple-school/assets/js/simple_school_admin.js"></script>
{% endblock %}