{% extends 'base.html' %}
{% load crispy_forms_tags static %}
{% block content %}
  <div class="container">
    <h2 class="title">Request leave for {{ worker.name }}</h2>

    <div class="box">
      <h3 class="subtitle">Request leave on calendar</h3>
      {% include 'rota/partials/flatpickr_includes.html' %}
      <link rel="stylesheet" href="{% static 'css/calendar.css' %}">
      <div id="calendar" class="calendar" data-worker-id="{{ worker.id }}" data-mode="inline"></div>
      <p class="help">Click a start date then a second date to select a range and prefill the leave form.</p>
    </div>

    {% with back_rota=worker.rotas.all.0 %}
      {% if back_rota %}
        <p style="margin-top:0.5rem"><a class="button" href="{% url 'rota:rota_detail' back_rota.id %}">&larr; Back to rota: {{ back_rota.name }}</a></p>
      {% endif %}
    {% endwith %}

    <form method="post">
      {% csrf_token %}
      {{ form|crispy }}
      <div class="field">
        <div class="control">
          <button class="button is-primary" type="submit">Request</button>
        </div>
      </div>
    </form>

    <h2 class="subtitle">Existing leave for {{ worker.name }}</h2>
    <div class="content">
      {% if request.user.is_staff or request.user.is_authenticated and request.user.email and request.user.email == worker.email %}
        <form method="post" action="{% url 'rota:leave_delete_all' worker.id %}" hx-post="{% url 'rota:leave_delete_all' worker.id %}" hx-swap="none" style="display:inline;margin-bottom:0.5rem">
          {% csrf_token %}
          <button class="button is-small is-danger" type="submit" onclick="return confirm('Delete ALL leave requests for this worker?');">Delete all leave</button>
        </form>
      {% endif %}
      {% include 'rota/partials/leave_list.html' with leaves=worker.leaves.all %}
    </div>

    <div style="margin-top:0.5rem;">
      <strong>Legend:</strong>
      <span style="display:inline-block;width:12px;height:12px;background:#ffecec;border:1px solid #ddd;margin-left:0.5rem;vertical-align:middle"></span> Existing leave
      <span style="display:inline-block;width:12px;height:12px;background:#cdeffd;border:1px solid #2b8fd6;margin-left:0.75rem;vertical-align:middle"></span> Selected range
    </div>
  </div>

  <script id="worker_leaves_json" type="application/json">{{ leaves_json|safe }}</script>
  <script src="{% static 'js/calendar.js' %}"></script>
  <script>
    (function(){
      const container = document.getElementById('calendar');
      if(!container) return;
      let leaves = [];
      try {
        const raw = document.getElementById('worker_leaves_json');
        if (raw) {
          leaves = JSON.parse(raw.textContent || raw.innerText || '[]');
        }
      } catch (e) {
        console.debug('Unable to parse embedded leaves JSON', e);
      }
      window.initCalendar('calendar', { workerId: container.dataset.workerId, leaves: leaves, requestUrl: '{% url "rota:request_leave" %}', leavesUrl: '{% url "rota:worker_leaves_json" worker.id %}', mode: container.dataset.mode || 'inline' });
    })();
  </script>
{% endblock %}