{% extends "base.html" %}

{% block title %}{{ meta_title }}{% endblock %}

{% block content %}
<section class="page-hero-sm">
  <div class="container-xxl px-3 px-lg-4 d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-end">
    <div>
      <p class="section-kicker">History</p>
      <h1 class="section-title mb-2">Trip log</h1>
      <p class="section-subtitle">Filter past mileage entries by date range, tax period, or trip type.</p>
    </div>
    <a class="btn btn-primary app-btn-primary" href="{% url 'trip_create' %}">Add another trip</a>
  </div>
</section>
<section class="section-shell section-tight pt-0">
  <div class="container-xxl px-3 px-lg-4">
    <div class="glass-panel mb-4">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-md-3"><label class="form-label" for="{{ form.start_date.id_for_label }}">Start date</label>{{ form.start_date }}</div>
        <div class="col-md-3"><label class="form-label" for="{{ form.end_date.id_for_label }}">End date</label>{{ form.end_date }}</div>
        <div class="col-6 col-md-2"><label class="form-label" for="{{ form.month.id_for_label }}">Month</label>{{ form.month }}</div>
        <div class="col-6 col-md-2"><label class="form-label" for="{{ form.year.id_for_label }}">Year</label>{{ form.year }}</div>
        <div class="col-md-2"><label class="form-label" for="{{ form.trip_type.id_for_label }}">Trip type</label>{{ form.trip_type }}</div>
        <div class="col-12 d-flex flex-wrap gap-2"><button class="btn btn-primary app-btn-primary" type="submit">Apply filters</button><a class="btn btn-outline-light app-btn-secondary" href="{% url 'trip_list' %}">Reset</a></div>
      </form>
    </div>
    <div class="row g-4 mb-4">
      <div class="col-md-4"><div class="metric-card panel-solid h-100"><p>Total business miles</p><h2>{{ summary.business_miles|floatformat:1 }}</h2><span>Within the filtered period</span></div></div>
      <div class="col-md-4"><div class="metric-card panel-solid h-100"><p>Personal + commuting + repair miles</p><h2>{{ summary.non_business_miles|floatformat:1 }}</h2><span>Included for full context</span></div></div>
      <div class="col-md-4"><div class="metric-card panel-solid h-100"><p>Total trips</p><h2>{{ summary.trip_count }}</h2><span>Entries matched by the current filters</span></div></div>
    </div>
    <div class="glass-panel table-panel">
      {% if trips %}
      <div class="table-responsive">
        <table class="table app-table align-middle mb-0">
          <thead><tr><th>Date</th><th>Route</th><th>Type</th><th>Miles</th><th>Source</th><th></th></tr></thead>
          <tbody>
            {% for trip in trips %}
            <tr>
              <td><strong>{{ trip.date|date:"M j, Y" }}</strong><br><span class="table-muted">{{ trip.start_time|time:"g:i A" }}–{{ trip.end_time|time:"g:i A" }}</span></td>
              <td><strong>{{ trip.start_location }}</strong><div class="table-muted">to {{ trip.end_location }}</div></td>
              <td>{{ trip.get_trip_type_display }}</td>
              <td>{{ trip.distance_miles|floatformat:1 }}</td>
              <td>{{ trip.get_distance_source_display }}</td>
              <td class="text-end"><a href="{% url 'trip_detail' trip.pk %}">Details</a></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="empty-state-card compact-empty"><h3>No trips match those filters</h3><p>Adjust the date range or log a new trip to populate your history.</p><a class="btn btn-primary app-btn-primary" href="{% url 'trip_create' %}">Log a trip</a></div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}