{% extends "admin_base.html" %}
{% import "macros/admin_management_header.html" as mh %}

{% block page_title %}Roster{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/tree-selection.css?v=6">
<link rel="stylesheet" href="/plugins/simple-school/assets/css/simple_school.css?v=2">
{% endblock %}

{% block admin_content %}
<script type="application/json" id="simple-school-roster-categories-json">{{ categories | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>
<script type="application/json" id="simple-school-roster-items-json">{{ items | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>
<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-class-options-json">{{ class_options | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>

<div class="simple-school-roster-page">
  {{ mh::management_header_open(title="Class roster", subtitle="Manage classes, students, and bulk class moves.", title_heading="h1") }}
    <button type="button" class="blocks-button blocks-button-primary" id="simple-school-roster-add-class">Add class</button>
    <button type="button" class="blocks-button blocks-button-secondary" id="simple-school-roster-add-student">Add student</button>
  {{ mh::management_header_close() }}

  <div class="simple-school-roster-legend mb-2" aria-label="Status legend">
    <span class="ss-roster-status-badge ss-roster-status-badge--active">Active</span>
    <span class="ss-roster-status-badge ss-roster-status-badge--inactive">Inactive</span>
    <span class="text-muted simple-school-roster-legend-note">Use the <strong>Sort</strong> dropdown for one ordering at a time. Drag handles appear only for <strong>Custom order</strong> (saved to the database).</span>
  </div>

  <div class="simple-school-roster-toolbar blocks-admin-form mb-3">
    <label for="simple-school-roster-move-class" class="form-label mb-0">Move selected to</label>
    <select id="simple-school-roster-move-class" class="blocks-input">
      <option value="">Choose class…</option>
      {% for c in class_options %}
      <option value="{{ c.id }}">{{ c.label }}</option>
      {% endfor %}
    </select>
    <button type="button" class="blocks-button blocks-button-primary" id="simple-school-roster-save-moves">Save moves</button>
    <span class="text-muted simple-school-roster-hint">Saves update the tree without reloading the page.</span>
  </div>

  <div id="simple-school-roster-tree" class="simple-school-roster-tree-mount"></div>
</div>

<div id="simple-school-class-modal" class="crud-modal" aria-hidden="true">
  <div class="modal-content" class="max-w-[720px]">
    <div class="modal-header"><h2 id="simple-school-class-modal-title">Add Class</h2><button type="button" class="close-modal" aria-label="Close">&times;</button></div>
    <div class="modal-body"><div id="simple-school-class-form-fields"></div></div>
  </div>
</div>

<div id="simple-school-student-modal" class="crud-modal" aria-hidden="true">
  <div class="modal-content" class="max-w-[780px]">
    <div class="modal-header"><h2 id="simple-school-student-modal-title">Add Student</h2><button type="button" class="close-modal" aria-label="Close">&times;</button></div>
    <div class="modal-body"><div id="simple-school-student-form-fields"></div></div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/tree-selection.js?v=6"></script>
<script src="/plugins/simple-school/assets/js/simple_school_roster.js?v=7"></script>
{% endblock %}