{% 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">Trip detail</p>
      <h1 class="section-title mb-2">{{ trip.date|date:"F j, Y" }}</h1>
      <p class="section-subtitle">{{ trip.start_location }} → {{ trip.end_location }}</p>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <a class="btn btn-outline-light app-btn-secondary" href="{% url 'trip_list' %}">Back to list</a>
      <a class="btn btn-primary app-btn-primary" href="{% url 'trip_update' trip.pk %}">Edit trip</a>
    </div>
  </div>
</section>
<section class="section-shell section-tight pt-0">
  <div class="container-xxl px-3 px-lg-4">
    <div class="row g-4">
      <div class="col-lg-8">
        <div class="glass-panel detail-panel h-100">
          <div class="detail-grid">
            <article><span>Time</span><strong>{{ trip.start_time|time:"g:i A" }} – {{ trip.end_time|time:"g:i A" }}</strong></article>
            <article><span>Trip type</span><strong>{{ trip.get_trip_type_display }}</strong></article>
            <article><span>Miles</span><strong>{{ trip.distance_miles|floatformat:1 }} ({{ trip.get_distance_source_display }})</strong></article>
            <article><span>Odometer</span><strong>{% if trip.start_odometer or trip.end_odometer %}{{ trip.start_odometer|default:'—' }} → {{ trip.end_odometer|default:'—' }}{% else %}Not recorded{% endif %}</strong></article>
          </div>
          <div class="detail-copy mt-4">
            <h2 class="h5">Business purpose</h2>
            <p>{{ trip.business_purpose }}</p>
            <h2 class="h5 mt-4">Notes</h2>
            <p>{{ trip.notes|default:"No additional notes recorded." }}</p>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="glass-panel side-panel h-100">
          <p class="section-kicker">Audit trail</p>
          <div class="side-stack mb-4">
            <article class="side-card"><h3>Created</h3><p>{{ trip.created_at|date:"M j, Y g:i A" }}</p></article>
            <article class="side-card"><h3>Updated</h3><p>{{ trip.updated_at|date:"M j, Y g:i A" }}</p></article>
          </div>
          {% if confirm_delete %}
          <div class="delete-box">
            <h3>Delete this trip?</h3>
            <p>This removes the mileage entry from your log.</p>
            <form method="post" action="{% url 'trip_delete' trip.pk %}">{% csrf_token %}<div class="d-flex flex-wrap gap-2"><button class="btn btn-danger" type="submit">Confirm delete</button><a class="btn btn-outline-light app-btn-secondary" href="{% url 'trip_detail' trip.pk %}">Cancel</a></div></form>
          </div>
          {% else %}
          <a class="btn btn-outline-danger w-100" href="{% url 'trip_delete' trip.pk %}">Delete trip</a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}