{% extends 'base.html' %}
{% load crispy_forms_tags static %}
{% block content %}
  <div class="container">
    <h2 class="title">Request leave{% if worker %} for {{ worker.name }}{% endif %}</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="{% if worker %}{{ worker.id }}{% endif %}" 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>
      {% if token %}
        <p style="margin-top:0.5rem"><a class="button is-light" hx-get="{% url 'rota:worker_settings_token' token %}" hx-target="#modal" hx-swap="innerHTML">Update your settings</a></p>
      {% endif %}
    </div>
    {# Navigation back to the first rota this worker belongs to (if available) #}
    {% if worker %}
      {% 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 %}
    {% endif %}
    <form method="post">
      {% csrf_token %}
      {% if token %}
        <input type="hidden" name="token" value="{{ token }}">
      {% endif %}
      {{ form|crispy }}
      <div class="field">
        <div class="control">
          <button class="button is-primary" type="submit">Request</button>
        </div>
      </div>
    </form>
    {% if worker %}
      <h2 class="subtitle">Existing leave for {{ worker.name }}</h2>
      <div class="content">
        {% include 'rota/partials/leave_list.html' with leaves=worker.leaves.all %}
      </div>
    {% else %}
      <p class="help">If you are requesting leave for a specific worker, open this page using the worker link so existing requests will be shown.</p>
    {% endif %}

    <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 src="{% static 'js/calendar.js' %}"></script>
  <script>
    (function(){
      const container = document.getElementById('calendar');
      if(!container) return;
      const leaves = [
        {% if worker %}
          {% for l in worker.leaves.all %}
            {start:'{{ l.start_date|date:"Y-m-d" }}', end:'{{ l.end_date|date:"Y-m-d" }}'},
          {% endfor %}
        {% endif %}
      ];
  window.initCalendar('calendar', { workerId: container.dataset.workerId, leaves: leaves, requestUrl: '{% if token %}{% url "rota:request_leave_token" token %}{% else %}{% url "rota:request_leave" %}{% endif %}', leavesUrl: '{% if worker %}{% url "rota:worker_leaves_json" worker.id %}{% endif %}', mode: container.dataset.mode || 'inline' });
    })();
  </script>
{% endblock %}