{% extends "pos/base.html" %}
{% block title %}Leave Records{% endblock %}
{% block heading %}Leave Records{% endblock %}
{% block content %}
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <a href="{% url 'payroll:leave_add' %}" class="btn btn-success">Add Leave</a>
      <a href="{% url 'payroll:leave_upload' %}" class="btn btn-secondary">Bulk Upload</a>
    </div>
  </div>

  <form method="get" action="{% url 'payroll:leave_list' %}" class="row g-3 mb-4">
    <div class="col-md-4">
      <input 
        type="text" 
        name="staff" 
        placeholder="Staff Name" 
        value="{{ staff_q }}" 
        class="form-control"
      >
    </div>
    <div class="col-md-4">
      <input 
        type="date" 
        name="date" 
        value="{{ date_q }}" 
        class="form-control"
      >
    </div>
    <div class="col-md-4">
      <button type="submit" class="btn btn-primary">Filter</button>
    </div>
  </form>

  <table class="table table-striped table-bordered align-middle">
    <thead class="table-light">
      <tr>
        <th>#</th>
        <th>Staff</th>
        <th>Date</th>
        <th>Type</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for leave in leave_list %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ leave.staff.name }}</td>
        <td>{{ leave.date }}</td>
        <td>{{ leave.leave_type }}</td>
        <td>
          <a 
            href="{% url 'payroll:leave_delete' leave.id %}" 
            class="btn btn-sm btn-danger"
            onclick="return confirm('Delete leave for {{ leave.staff.name }} on {{ leave.date }}?');"
          >Delete</a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="5" class="text-center">No leave records found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}