{% extends "base.html" %}

{% block title %}Zugmodelle auswählen{% endblock %}

{% block content %}

<div class="container my-4">
  <h1 class="mb-4 text-center">Wähle dein Zugmodell</h1>

  {% if configs %}
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
      {% for cfg in configs %}
        <div class="col">
          <div class="card h-100 shadow-sm">
            {% if cfg.image %}
              <img src="{{ url_for('main.serve_config_file', filename=cfg.image) }}"
                   class="card-img-top" alt="{{ cfg.name }}"
                   style="height: 180px; object-fit: cover;">
            {% else %}
              <div class="card-img-top bg-light d-flex align-items-center justify-content-center"
                   style="height: 180px;">
                <i class="bi bi-train-freight-front fs-1 text-muted"></i>
              </div>
            {% endif %}
            <div class="card-body d-flex flex-column">
              <h5 class="card-title">{{ cfg.name }}</h5>
              <p class="card-text text-muted small">
                Hub-ID: {{ cfg.hub_id | default('?') }} • 
                {{ cfg.hub_type | default('unbekannt') }}
              </p>
              <div class="mt-auto">
                <a href="{{ url_for('main.load_config', filename=cfg.filename) }}"
                   class="btn btn-primary w-100">
                  Auswählen & Steuern
                </a>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="alert alert-info text-center my-5">
      <h4>Noch keine Konfigurationen vorhanden</h4>
      <p>Lege im <code>configs/</code>-Ordner JSON-Dateien an oder gehe zum <a href="{{ url_for('admin.admin') }}">Admin-Bereich</a>.</p>
    </div>
  {% endif %}

  <div class="text-center mt-5">
    <a href="{{ url_for('admin.admin') }}" class="btn btn-outline-secondary">
      <i class="bi bi-gear me-2"></i>Admin-Bereich
    </a>
  </div>
</div>

{% endblock %}