{% extends "django_program/manage/base.html" %}

{% block title %}Expenses{% endblock %}

{% block breadcrumb %}
<nav class="breadcrumb" aria-label="Breadcrumb">
  <a href="{% url 'manage:dashboard' conference.slug %}">Dashboard</a>
  <span class="breadcrumb-separator"></span>
  <span>Expenses</span>
</nav>
{% endblock %}

{% block page_title %}
<h1>Expenses</h1>
<p>{{ expense_count }} expense{{ expense_count|pluralize }} totaling ${{ total_expenses|floatformat:2 }}</p>
{% endblock %}

{% block page_actions %}
<a href="{% url 'manage:expense-category-list' conference.slug %}" class="btn btn-secondary">Categories</a>
<a href="{% url 'manage:expense-add' conference.slug %}" class="btn btn-primary">Add Expense</a>
{% endblock %}

{% block content %}
<div class="filter-bar">
  <form method="get" style="display:flex;gap:0.75rem;align-items:center;">
    <select name="category" onchange="this.form.submit()">
      <option value="">All Categories</option>
      {% for cat in categories %}
      <option value="{{ cat.pk }}" {% if current_category == cat.pk|stringformat:"d" %}selected{% endif %}>{{ cat.name }}</option>
      {% endfor %}
    </select>
  </form>
</div>

{% if expenses %}
<table class="data-table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Description</th>
      <th>Category</th>
      <th>Vendor</th>
      <th>Amount</th>
      <th>Created By</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for exp in expenses %}
    <tr>
      <td>{{ exp.date|date:"N j, Y" }}</td>
      <td>{{ exp.description }}</td>
      <td><span class="badge badge--accepted">{{ exp.category.name }}</span></td>
      <td>{{ exp.vendor|default:"&mdash;" }}</td>
      <td>${{ exp.amount|floatformat:2 }}</td>
      <td>{% if exp.created_by %}{{ exp.created_by.get_short_name|default:exp.created_by.username }}{% else %}&mdash;{% endif %}</td>
      <td>
        <a href="{% url 'manage:expense-edit' conference.slug exp.pk %}" class="btn btn-sm btn-secondary">Edit</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{% if is_paginated %}
<div class="pagination">
  {% if page_obj.has_previous %}
  <a href="?{% if current_category %}category={{ current_category }}&{% endif %}page={{ page_obj.previous_page_number }}">Previous</a>
  {% endif %}
  <span class="page-info">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
  {% if page_obj.has_next %}
  <a href="?{% if current_category %}category={{ current_category }}&{% endif %}page={{ page_obj.next_page_number }}">Next</a>
  {% endif %}
</div>
{% endif %}

{% else %}
<div class="empty-state">
  <p>No expenses recorded{% if current_category %} for this category{% endif %}.</p>
  <p><a href="{% url 'manage:expense-add' conference.slug %}" class="btn btn-primary">Record First Expense</a></p>
</div>
{% endif %}
{% endblock %}