{% extends "base.html" %}
{% block titel %}Übersicht — {{ app_name }}{% endblock %}
{% block inhalt %}
<h1 class="text-2xl font-bold text-slate-900 mb-1">Willkommen, {{ user.display_name }}!</h1>
<p class="text-slate-600 mb-6">
  Rolle: <span class="font-medium">{{ rollen_anzeige[user.role] or user.role }}</span>
</p>

{% if karten %}
<section aria-label="Übersicht" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mb-8">
  {% for karte in karten %}
  {% set ton_rand = {
    'neutral': 'border-slate-200',
    'ok': 'border-emerald-200',
    'warnung': 'border-amber-300',
    'fehler': 'border-red-300',
  }[karte.ton] | default('border-slate-200') %}
  {% set ton_wert = {
    'neutral': 'text-slate-900',
    'ok': 'text-emerald-700',
    'warnung': 'text-amber-700',
    'fehler': 'text-red-700',
  }[karte.ton] | default('text-slate-900') %}
  <div class="bg-white rounded-xl border {{ ton_rand }} shadow-sm p-4 flex flex-col">
    <h2 class="text-base font-semibold text-slate-800 mb-1">{{ karte.titel }}</h2>
    {% if karte.wert %}
    <p class="text-3xl font-bold {{ ton_wert }} leading-tight mb-1">{{ karte.wert }}</p>
    {% endif %}
    {% if karte.beschreibung %}
    <p class="text-sm text-slate-500 mb-1">{{ karte.beschreibung }}</p>
    {% endif %}
    {% if karte.zeilen %}
    <ul class="text-sm text-slate-600 space-y-0.5 mt-1">
      {% for zeile in karte.zeilen %}
      <li class="truncate" title="{{ zeile }}">{{ zeile }}</li>
      {% endfor %}
    </ul>
    {% endif %}
    {% if karte.link_url %}
    <a href="{{ karte.link_url }}"
       class="mt-auto pt-3 text-sm font-medium text-emerald-700 hover:text-emerald-900">{{ karte.link_label }} &rarr;</a>
    {% endif %}
  </div>
  {% endfor %}
</section>
{% endif %}

{% if user.role == 'admin' %}
<details class="mb-8">
  <summary class="text-sm text-slate-500 cursor-pointer hover:text-emerald-700">
    Technik: geladene Plugins ({{ geladene_plugins|length }})
  </summary>
  <div class="mt-3 bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
    {% for plugin in geladene_plugins %}
    <div class="px-4 py-3 flex flex-wrap items-baseline gap-x-3 gap-y-1">
      <span class="font-medium">{{ plugin.title or plugin.name }}</span>
      <span class="text-xs text-slate-400">v{{ plugin.version }}</span>
      <span class="text-sm text-slate-500">{{ plugin.description }}</span>
    </div>
    {% endfor %}
  </div>
</details>
{% endif %}
{% endblock %}