{% with iso=d.day|date:"Y-m-d" %}
<div x-data="{ mode: 'full', worked: false }">
  <h2 class="h5 mb-0">{{ d.day|date:"l"|slice:":3"|tr }} {{ d.day|date:"d/m/Y" }}</h2>
  <div class="text-body-secondary small mb-2">
    {{ target.name }}
    {% if d.holiday %} · <i class="bi bi-stars"></i> {{ d.holiday }}{% endif %}
    {% if d.planned_minutes %} · {% t "Planned" %} {{ d.planned_minutes|hm }}{% endif %}
  </div>

  <div class="d-flex flex-wrap gap-1 mb-2">{% include "attendance/partials/readonly_note.html" %}</div>
  {% if error %}<div class="alert alert-danger py-2 small">{{ error }}</div>{% endif %}
  {% if message %}<div class="alert alert-success py-2 small">{{ message }}</div>{% endif %}
  {% include "attendance/partials/calendar_notice.html" %}
  {% if d.issues %}<div class="alert alert-warning py-2 small"><i class="bi bi-exclamation-triangle me-1"></i>{% for i in d.issues %}{{ i.value|tr }}{% if not forloop.last %}, {% endif %}{% endfor %}</div>{% endif %}

  <div class="d-flex gap-3 small mb-1">
    <div>{% t "Worked" %} <strong>{{ d.worked_minutes|hm }}</strong></div>
    <div>{% t "Justified" %} <strong>{{ d.justified_minutes|hm }}</strong></div>
    {% if d.is_extra_day %}<div>{% t "Extra day" %} <strong>{{ d.extra_minutes|hm }}</strong></div>{% endif %}
  </div>

  {% if bar %}
  <div class="day-bar mt-2" role="img" aria-label="{% t 'Day' %}">
    <div class="day-bar-track">
      {% for s in bar.segments %}<span class="seg {{ s.css }}" style="left: {{ s.left }}%; width: {{ s.width }}%" title="{{ s.title }}"></span>{% endfor %}
      {% for t in bar.ticks %}<span class="tick {% if t.kind == 0 %}tick-in{% else %}tick-out{% endif %}" style="left: {{ t.left }}%"></span>{% endfor %}
    </div>
    <div class="day-bar-hours">{% for h in bar.hours %}<span style="left: {{ h.left }}%">{{ h.label }}</span>{% endfor %}</div>
  </div>
  {% endif %}

  <div class="section-title">{% t "Day" %}</div>
  <div class="timeline">
    {% for e in timeline %}
    {% if e.check %}{% with c=e.check %}
    <div class="entry">
      <i class="bi {% if c.kind == 0 %}bi-box-arrow-in-right kind-in{% else %}bi-box-arrow-right kind-out{% endif %}"></i>
      <span class="time">{{ c.time|date:"H:i" }}</span>
      <span class="small">{% if c.kind == 0 %}{% t "Check-in" %}{% else %}{% t "Check-out" %}{% endif %}</span>
      {% if settings.highlight_virtual_checks and c.virtual %}<span class="badge text-bg-secondary virtual-mark">{% t "Virtual" %}</span>{% endif %}
      {% if can_edit %}<form class="ms-auto" hx-post="{% url 'delete_check' target.userid c.id %}" hx-target="#panel-body">
        <input type="hidden" name="day" value="{{ iso }}">
        <button class="btn btn-sm btn-link text-danger p-0" title="{% t 'Delete' %}"><i class="bi bi-trash3"></i></button>
      </form>{% endif %}
    </div>
    {% endwith %}{% else %}{% with lv=e.leave c=classes|get_item:e.leave.class_id %}
    <div class="entry entry-leave effect-{{ c.effect|default:'justified' }}">
      <span class="leave-dot"></span>
      <span class="time">{{ lv.begin|date:"H:i" }}–{{ lv.end|date:"H:i" }}</span>
      <span class="small fw-semibold">{{ c.name|default:lv.class_id }}</span>
      {% if lv.reason and lv.reason != c.name %}<span class="small text-body-secondary text-truncate">{{ lv.reason }}</span>{% endif %}
      {% if can_edit %}<form class="ms-auto" hx-post="{% url 'delete_leave' target.userid lv.id %}" hx-target="#panel-body">
        <input type="hidden" name="day" value="{{ iso }}">
        <button class="btn btn-sm btn-link text-danger p-0" title="{% t 'Delete' %}"><i class="bi bi-trash3"></i></button>
      </form>{% endif %}
    </div>
    {% endwith %}{% endif %}
    {% empty %}<div class="small text-body-secondary">{% t "No checks" %}</div>{% endfor %}
  </div>

  {% if can_edit %}
  <div class="section-title">{% t "Add check" %}</div>
  <form class="row g-2 align-items-end" hx-post="{% url 'add_check' target.userid %}" hx-target="#panel-body">
    <input type="hidden" name="day" value="{{ iso }}">
    <div class="col-5">
      <select name="kind" class="form-select form-select-sm" aria-label="{% t 'Check type' %}">
        <option value="0" {% if default_kind == 0 %}selected{% endif %}>{% t "Check-in" %}</option>
        <option value="1" {% if default_kind == 1 %}selected{% endif %}>{% t "Check-out" %}</option>
      </select>
    </div>
    <div class="col-4"><input type="time" name="time" class="form-control form-control-sm" value="{{ now }}" required></div>
    <div class="col-3 d-grid"><button class="btn btn-sm btn-primary">{% t "Add" %}</button></div>
  </form>

  <div class="section-title">{% t "Add leave" %}</div>
  <form class="d-flex flex-column gap-2" hx-post="{% url 'add_leave' target.userid %}" hx-target="#panel-body">
    <input type="hidden" name="day" value="{{ iso }}">
    <select name="class_id" class="form-select form-select-sm" aria-label="{% t 'Leave class' %}"
            x-init="worked = $el.selectedOptions[0]?.dataset.effect === 'worked'"
            @change="worked = $event.target.selectedOptions[0].dataset.effect === 'worked'"
            x-effect="worked && (mode = 'partial')">
      {% for c in class_list %}<option value="{{ c.id }}" data-effect="{{ c.effect }}">{{ c.name }}</option>{% endfor %}
    </select>
    {# `worked` Leaves (business trips) are never full-day: start and duration are always explicit #}
    <div class="btn-group btn-group-sm" role="group" x-show="!worked">
      <input type="radio" class="btn-check" name="mode" id="mode-full" value="full" x-model="mode">
      <label class="btn btn-outline-secondary" for="mode-full">{% t "Full day" %}</label>
      <input type="radio" class="btn-check" name="mode" id="mode-part" value="partial" x-model="mode">
      <label class="btn btn-outline-secondary" for="mode-part">{% t "Partial" %}</label>
    </div>
    <div class="row g-2" x-show="mode === 'partial'" x-cloak>
      <div class="col-6">
        <label class="form-label small mb-0">{% t "Start" %}</label>
        <select name="start" class="form-select form-select-sm">
          {% for s in slots %}<option value="{{ s|time:'H:i' }}" {% if s|time:'H:i' == "14:00" %}selected{% endif %}>{{ s|time:"H:i" }}</option>{% endfor %}
        </select>
      </div>
      <div class="col-6">
        <label class="form-label small mb-0">{% t "Duration" %}</label>
        <select name="minutes" class="form-select form-select-sm">
          {% for m in durations %}<option value="{{ m }}" {% if m == 120 %}selected{% endif %}>{{ m|hm }}</option>{% endfor %}
        </select>
      </div>
    </div>
    <input type="text" name="reason" maxlength="200" class="form-control form-control-sm" placeholder="{% t 'Reason' %}">
    <button class="btn btn-sm btn-primary">{% t "Add leave" %}</button>
  </form>
  {% endif %}
</div>
{% endwith %}