{% extends "base.html" %}

{% block page_title %}My Children{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/simple-school/assets/css/simple_school.css">
{% endblock %}

{% block content %}
<div class="container py-3 simple-school-page simple-school-layout">
  <h1>My Children</h1>
  {% if children | length == 0 %}
    <p class="text-muted">No students are linked to this parent account.</p>
  {% endif %}

  <div class="blocks-admin-table">
    <div class="table-responsive">
      <table class="table">
        <thead><tr><th>Student</th><th>Class</th><th>DOB</th><th>Contact</th></tr></thead>
        <tbody>
        {% for child in children %}
          <tr>
            <td>{{ child.name }}</td>
            <td>{{ child.class_label }}</td>
            <td>{{ child.dob }}</td>
            <td>{{ child.contact }}</td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <h2 class="mt-4">Apply Student Leave</h2>
  <form class="blocks-admin-form" data-endpoint="/plugins/simple-school/api/leave_submit">
    <input type="hidden" name="applicant_type" value="student">
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
      <div class="sm:col-span-3">
        <select class="blocks-input" name="applicant_ref_id">
          <option value="">Select child</option>
          {% for child in children %}
            <option value="{{ child.id }}">{{ child.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="sm:col-span-2"><input class="blocks-input" type="date" name="from_date"></div>
      <div class="sm:col-span-2"><input class="blocks-input" type="date" name="to_date"></div>
      <div class="sm:col-span-4"><input class="blocks-input" name="reason" placeholder="Reason"></div>
      <div class="sm:col-span-1"><button class="blocks-button blocks-button-primary" type="submit">Submit</button></div>
    </div>
  </form>
</div>
{% endblock %}

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