{% extends "base.html" %}
{% block title %}Neue Fahrt – PBT{% endblock %}
{% block content %}
  <div class="card">
    <h2>Neue Fahrt erfassen</h2>
    <form method="post">
      <div class="field">
        <label for="transport_mode">Verkehrsmittel<span class="required">*</span></label>
        <select id="transport_mode" name="transport_mode" required>
          {% for option in verkehrsmittel_optionen %}
            <option value="{{ option }}">{{ option }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="field combo">
        <label for="origin">Von<span class="required">*</span></label>
        <input type="text" id="origin" name="origin" required
               placeholder="Haltestelle suchen …"
               data-stop-input data-stop-target="#origin_stop_id">
        <input type="hidden" id="origin_stop_id" name="origin_stop_id">
        <p class="field-hint" data-stop-hint></p>
      </div>

      <div class="field combo">
        <label for="destination">Nach<span class="required">*</span></label>
        <input type="text" id="destination" name="destination" required
               placeholder="Haltestelle suchen …"
               data-stop-input data-stop-target="#destination_stop_id">
        <input type="hidden" id="destination_stop_id" name="destination_stop_id">
        <p class="field-hint" data-stop-hint></p>
      </div>

      <div class="field combo">
        <label for="line">Linie</label>
        <input type="text" id="line" name="line" placeholder="z.B. S3, 693"
               data-line-input>
        <p class="field-hint" data-line-hint>Halte oben wählen für Linienvorschläge.</p>
      </div>

      <div class="field">
        <label for="trip_date">Datum<span class="required">*</span></label>
        <input type="date" id="trip_date" name="trip_date" value="{{ heute }}" required>
      </div>

      <div class="field">
        <label for="rating">Bewertung<span class="required">*</span></label>
        <select id="rating" name="rating" required>
          <option value="5">★★★★★ Sehr gut</option>
          <option value="4">★★★★☆ Gut</option>
          <option value="3" selected>★★★☆☆ Okay</option>
          <option value="2">★★☆☆☆ Schlecht</option>
          <option value="1">★☆☆☆☆ Sehr schlecht</option>
        </select>
      </div>

      <div class="field">
        <label for="comment">Kommentar</label>
        <textarea id="comment" name="comment" rows="3"></textarea>
      </div>

      <button type="submit">Speichern</button>
    </form>
  </div>
{% endblock %}
{% block scripts %}
  <script src="{{ url_for('static', filename='stops.js') }}" defer></script>
{% endblock %}