{% extends "base.html" %}
{% block content %}
<section class="hero">
  <h1>Fahrten koordinieren — ohne WhatsApp-Chaos</h1>
  <p class="lede">Verfügbarkeiten, Anfragen und Touren an einem Ort. Wähle eine Rolle, um die Demo auszuprobieren.</p>

  <div class="role-grid">
    {% for u in demo_users %}
    <form method="post" action="{% url 'demo_login' u.id %}">{% csrf_token %}
      <button class="role-card">
        <span class="role-dot role-{{ u.profile.role }}"></span>
        <strong>{{ u.get_full_name|default:u.username }}</strong>
        <span class="muted">{{ u.profile.get_role_display }}</span>
      </button>
    </form>
    {% empty %}
    <p class="empty">Noch keine Demo-Daten. Bitte zuerst <code>python manage.py seed_demo</code> ausführen.</p>
    {% endfor %}
  </div>

  <p class="hint">Demo-Login ohne Passwort — nur in der lokalen Vorschau aktiv.</p>
</section>
{% endblock %}