{% extends "attendance/base.html" %}
{% block title %}{{ target.name }} · {{ start|date:"m/Y" }} · BADGR{% endblock %}
{% block content %}
{% if badge %}
<div id="quick-badge" class="mb-3" hx-get="{% url 'quick_badge' %}" hx-trigger="calendarChanged from:body, every 60s" hx-swap="innerHTML">
  {% with d=badge.d expected=badge.expected open_since=badge.open_since worked_so_far=badge.worked_so_far today=badge.today CHECK_IN=badge.CHECK_IN CHECK_OUT=badge.CHECK_OUT %}
  {% include "attendance/partials/quick_badge.html" %}
  {% endwith %}
</div>
{% endif %}
<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
  <div class="btn-group">
    <a class="btn btn-outline-secondary" href="{% url 'calendar' target.userid prev.year prev.month %}" title="{% t 'Previous month' %}"><i class="bi bi-chevron-left"></i></a>
    <a class="btn btn-outline-secondary" href="{% url 'calendar' target.userid today.year today.month %}">{% t "Today" %}</a>
    <a class="btn btn-outline-secondary" href="{% url 'calendar' target.userid next.year next.month %}" title="{% t 'Next month' %}"><i class="bi bi-chevron-right"></i></a>
  </div>
  <h1 class="h4 mb-0 ms-1">{{ start|date:"F"|tr }} {{ start.year }}</h1>
  {% include "attendance/partials/readonly_note.html" %}
  <div class="ms-auto d-flex gap-2 align-items-center">
    {% if people %}
    <select class="form-select form-select-sm" style="min-width: 12rem" aria-label="{% t 'Employee' %}"
            onchange="window.location = this.value">
      {% for p in people %}
      <option value="{% url 'calendar' p.userid start.year start.month %}" {% if p.userid == target.userid %}selected{% endif %}>{{ p.name }}</option>
      {% endfor %}
    </select>
    {% endif %}
    {% if not view_only %}
    <button class="btn btn-sm btn-primary text-nowrap" onclick="Badgr.loadPanel('{% url 'range_leave' target.userid %}')">
      <i class="bi bi-calendar-plus"></i> <span class="d-none d-sm-inline">{% t "Add leave" %}</span>
    </button>
    {% endif %}
  </div>
</div>

<div id="month" hx-get="{% url 'calendar_grid' target.userid start.year start.month %}" hx-trigger="calendarChanged from:body" hx-swap="innerHTML">
  {% include "attendance/partials/month.html" %}
</div>
{% endblock %}