{% extends "base.html" %}
{% block title %}Meine Fahrten – PBT{% endblock %}
{% block head %}
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
{% endblock %}
{% block content %}
  <h2 style="font-size: 1.1rem; font-weight: 600;">Meine Fahrten</h2>

  {% if not fahrten %}
    <div class="card" style="text-align: center;">
      <p style="color: var(--text-muted);">Noch keine Fahrten erfasst.</p>
      <a href="{{ url_for('neue_fahrt') }}" class="btn" style="display: inline-block; width: auto; padding: 0.6rem 1.2rem;">Erste Fahrt hinzufügen</a>
    </div>
  {% else %}
    <table>
      <thead>
        <tr>
          <th>Datum</th>
          <th>Verkehrsmittel</th>
          <th>Linie</th>
          <th>Strecke</th>
          <th>Bewertung</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for f in fahrten %}
          <tr>
            <td>{{ f.trip_date.strftime("%d.%m.%Y") }}</td>
            <td>{{ f.transport_mode }}</td>
            <td>
              {{ f.line or "–" }}
              {% if f.course %}<br><span style="color: var(--text-muted); font-size: 0.8rem;">{{ f.course }}</span>{% endif %}
            </td>
            <td>
              {{ f.origin }}{% if f.origin_stop %}<span class="stop-dot" title="Verifizierte Haltestelle"> ●</span>{% endif %}
              → {{ f.destination }}{% if f.destination_stop %}<span class="stop-dot" title="Verifizierte Haltestelle"> ●</span>{% endif %}
            </td>
            <td class="stars">{{ "★" * f.rating }}{{ "☆" * (5 - f.rating) }}</td>
            <td>
              <div class="row-actions">
                <button type="button" class="icon-btn map" title="Route auf Karte anzeigen"
                        aria-label="Route auf Karte anzeigen" data-show-map
                        data-origin-label="{{ f.origin }}" data-destination-label="{{ f.destination }}"
                        {% if f.origin_stop %}data-origin-lat="{{ f.origin_stop.latitude }}" data-origin-lon="{{ f.origin_stop.longitude }}"{% endif %}
                        {% if f.destination_stop %}data-destination-lat="{{ f.destination_stop.latitude }}" data-destination-lon="{{ f.destination_stop.longitude }}"{% endif %}
                        {% if not f.origin_stop and not f.destination_stop %}disabled{% endif %}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                       stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                </button>
                <a class="icon-btn edit" href="{{ url_for('fahrt_bearbeiten', fahrt_id=f.id) }}"
                   title="Fahrt bearbeiten" aria-label="Fahrt bearbeiten">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                       stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                  </svg>
                </a>
                <form method="post" action="{{ url_for('fahrt_loeschen', fahrt_id=f.id) }}"
                      onsubmit="return confirm('Fahrt wirklich löschen?');">
                  <button type="submit" class="icon-btn delete" title="Fahrt löschen" aria-label="Fahrt löschen">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                         stroke-linecap="round" stroke-linejoin="round">
                      <polyline points="3 6 5 6 21 6"></polyline>
                      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
                      <path d="M10 11v6"></path>
                      <path d="M14 11v6"></path>
                      <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
                    </svg>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          {% if f.comment %}
            <tr><td></td><td colspan="5" style="color: var(--text-muted); font-size: 0.85rem;">{{ f.comment }}</td></tr>
          {% endif %}
        {% endfor %}
      </tbody>
    </table>
  {% endif %}

  <dialog id="route-map-dialog" class="map-dialog">
    <div class="map-dialog-header">
      <span id="route-map-dialog-title"></span>
      <button type="button" class="icon-btn" data-close-map-dialog aria-label="Schließen">✕</button>
    </div>
    <div id="dialog-route-map" class="route-map"></div>
  </dialog>
{% endblock %}
{% block scripts %}
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
          integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="" defer></script>
  <script src="{{ url_for('static', filename='map.js') }}" defer></script>
{% endblock %}