{% extends "base.html" %}
{% block title %}Timesheets{% endblock %}
{% block page_title %}Timesheets{% endblock %}
{% block topbar_actions %}
  {% if user.role in ('staff', 'admin') %}
    <button class="btn btn-primary btn-sm"
            hx-get="/timesheets/new-dialog"
            hx-target="#timesheet-modal-host"
            hx-swap="innerHTML">Log Hours</button>
  {% endif %}
{% endblock %}

{% block content %}
<div class="toolbar">
  <div class="toolbar-left">
    {% if user.role != 'staff' %}
    <form method="get" action="/timesheets">
      <select name="employee_id" class="filter-select" onchange="this.form.submit()">
        <option value="">All employees</option>
        {% for emp in employees %}
          <option value="{{ emp.id }}" {% if employee_filter == emp.id|string %}selected{% endif %}>{{ emp.name }}</option>
        {% endfor %}
      </select>
    </form>
    {% endif %}
  </div>
  <small style="color:var(--subtext0)">{{ total }} entries</small>
</div>

<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Employee</th>
        <th>Start</th>
        <th>End</th>
        <th>Hours</th>
        {% if user.role in ('staff', 'admin') %}<th>Actions</th>{% endif %}
      </tr>
    </thead>
    <tbody>
      {% for entry in entries %}
        {% include "timesheets/_row.html" with context %}
      {% else %}
        <tr><td colspan="6" style="text-align:center;color:var(--subtext0);padding:2rem">No timesheet entries found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if total_pages > 1 %}
<div class="pagination">
  {% if page_num > 1 %}
    <a href="?page={{ page_num - 1 }}{% if employee_filter %}&employee_id={{ employee_filter }}{% endif %}" class="page-link">←</a>
  {% endif %}
  {% for p in range(1, total_pages + 1) %}
    {% if p == page_num %}
      <span class="page-link active">{{ p }}</span>
    {% elif p <= 2 or p >= total_pages - 1 or (p >= page_num - 2 and p <= page_num + 2) %}
      <a href="?page={{ p }}{% if employee_filter %}&employee_id={{ employee_filter }}{% endif %}" class="page-link">{{ p }}</a>
    {% elif p == 3 or p == total_pages - 2 %}
      <span class="page-ellipsis">…</span>
    {% endif %}
  {% endfor %}
  {% if page_num < total_pages %}
    <a href="?page={{ page_num + 1 }}{% if employee_filter %}&employee_id={{ employee_filter }}{% endif %}" class="page-link">→</a>
  {% endif %}
</div>
{% endif %}

<div id="timesheet-modal-host"></div>
<script>
  document.body.addEventListener('htmx:afterSwap', function(e) {
    if (e.target.id === 'timesheet-modal-host') {
      var dialog = e.target.querySelector('dialog');
      if (dialog) dialog.showModal();
    }
  });
</script>
{% endblock %}