{% extends "base.html" %}

{% block content %}
  <div class="page-section-title">
    <h1>Rueckgabe</h1>
    <p>Ausgegebene Tuerchips, Parkkarten und Poolfahrzeuge wieder zuruecknehmen.</p>
  </div>

  <section class="card form-card">
    <div class="card-body">
      <h2 class="card-title"><i class="ti ti-arrow-back-up me-1"></i>Medium zuruecknehmen</h2>
      <form method="post" action="{{ url_for('return_asset') }}">
        <div class="mb-3">
          <label class="form-label">User</label>
          <select class="form-select" name="user_id" required>
            <option value="">Bitte waehlen</option>
            {% for user in users %}
              <option value="{{ user.id }}">{{ user.full_name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Typ</label>
          <select class="form-select" name="asset_type" id="asset_type" required>
            <option value="chip" {% if selected_asset_type == 'chip' %}selected{% endif %}>Tuerchip</option>
            <option value="parking_card" {% if selected_asset_type == 'parking_card' %}selected{% endif %}>Parkkarte</option>
            <option value="pool_vehicle" {% if selected_asset_type == 'pool_vehicle' %}selected{% endif %}>Poolfahrzeug</option>
          </select>
        </div>
        <button class="btn btn-primary" type="submit"><i class="ti ti-check me-1"></i>Rueckgabe speichern</button>
      </form>
    </div>
  </section>
  <script>
    (() => {
      const select = document.getElementById("asset_type");
      if (!select) return;

      const syncField = () => {
        select.title = select.value === "pool_vehicle" ? "Poolfahrzeug" : select.options[select.selectedIndex].text;
      };

      select.addEventListener("change", syncField);
      syncField();
    })();
  </script>
{% endblock %}