{% extends "base.html" %}

{% block page_title %}Teacher Leave{% 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>Teacher Leave</h1>
  {% if teacher %}
    <p class="text-muted">Teacher profile: {{ teacher.display_name | default(value="User " ~ teacher.user_id) }}</p>
  {% else %}
    <p class="text-muted">No teacher profile mapped for this account yet.</p>
  {% endif %}
  <form class="blocks-admin-form" data-endpoint="/plugins/simple-school/api/leave_submit">
    <input type="hidden" name="applicant_type" value="teacher">
    <input type="hidden" name="applicant_ref_id" value="{{ teacher.user_id | default(value='') }}">
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
      <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-6"><input class="blocks-input" name="reason" placeholder="Reason"></div>
      <div class="sm:col-span-2"><button class="blocks-button blocks-button-primary" type="submit">Apply Leave</button></div>
    </div>
  </form>

  <div class="blocks-admin-table mt-3">
    <div class="table-responsive">
      <table class="table">
        <thead><tr><th>From</th><th>To</th><th>Reason</th><th>Status</th></tr></thead>
        <tbody>{% for item in leaves %}<tr><td>{{ item.from_date | date_in_tz(timezone=settings.timezone) }}</td><td>{{ item.to_date | date_in_tz(timezone=settings.timezone) }}</td><td>{{ item.reason }}</td><td>{{ item.status }}</td></tr>{% endfor %}</tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

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