{% load crispy_forms_tags %}
<div class="modal is-active" id="worker-overview-modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Worker: {{ worker.name }}</p>
      <button class="delete" aria-label="close" onclick="document.getElementById('modal').innerHTML='' "></button>
    </header>
    <section class="modal-card-body">
      <div class="content">
        <h4 class="title is-6">Basic info</h4>
        <p><strong>Site:</strong> {{ worker.site }}</p>
        <p><strong>Grade:</strong> {{ worker.grade }}</p>
        <p><strong>FTE:</strong> {{ worker.fte }}</p>
        <p><strong>Email:</strong> {{ worker.email }}</p>

        <h4 class="title is-6">Leaves</h4>
        <div>
          {% include 'rota/partials/leave_list.html' with leaves=worker.leaves.all token=None %}
        </div>

        <h4 class="title is-6">Configured constraints & options</h4>
        <p class="help">Below are the worker's configured options. Values are shown read-only.</p>

        <div class="box" style="white-space:pre-wrap; font-family:monospace; font-size:0.9rem;">
          {{ pretty_options }}
        </div>

        <h4 class="title is-6">Quick summary</h4>
        <div class="tags">
          {% for it in worker.options.hard_day_exclusions %}
            <span class="tag is-light" title="{{ it|escape }}">HDE</span>
          {% empty %}{% endfor %}
          {% for it in worker.options.hard_day_dependencies %}
            <span class="tag is-light" title="{{ it|escape }}">HDD</span>
          {% empty %}{% endfor %}
          {% for it in worker.options.forced_assignments %}
            <span class="tag is-light" title="{{ it|escape }}">FA</span>
          {% empty %}{% endfor %}
          {% for it in worker.options.forced_assignments_by_date %}
            <span class="tag is-light" title="{{ it|escape }}">FAD</span>
          {% empty %}{% endfor %}
          {% for it in worker.options.allowed_multi_shift_sets %}
            <span class="tag is-light" title="{{ it|escape }}">AMS</span>
          {% empty %}{% endfor %}
        </div>

      </div>

      <div style="margin-top:1rem; display:flex; gap:0.5rem;">
        <button class="button is-small is-light" hx-get="{% url 'rota:worker_edit' rota.id worker.id %}" hx-target="#modal" hx-swap="innerHTML">Edit</button>
        <a class="button is-small" href="{% url 'rota:worker_detail' worker.id %}">Open full page</a>
        <button type="button" class="button" onclick="document.getElementById('modal').innerHTML=''">Close</button>
      </div>

    </section>
  </div>
</div>