{% extends "base.html" %}

{% block title %}University Process Hub{% endblock %}

{% block content %}

<div class="bg-white border-b border-gray-200 px-8 py-10">
  <p class="text-xs font-semibold uppercase tracking-widest text-efi mb-2">
    Fakultät EFI · TH Nürnberg
  </p>
  <h1 class="text-2xl font-bold text-gray-900 mb-2">University Process Hub</h1>
  <p class="text-sm text-gray-500 max-w-xl leading-relaxed">
    Modulares Informationssystem für Fakultätsprozesse.
    Startpunkt für studentische Arbeiten und Schnittstelle für interne Dienste.
  </p>
</div>

<div class="px-8 py-7">
  <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-4">
    Verfügbare Module
  </p>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

    {% for module in modules %}
    <div class="bg-white rounded-md border border-gray-200 shadow-sm p-5 relative overflow-hidden
                hover:shadow-md hover:border-efi transition-all duration-150 cursor-pointer">
      <div class="absolute top-0 left-0 right-0 h-0.5 bg-efi"></div>
      <div class="text-2xl mb-2">{{ module.icon }}</div>
      <div class="font-semibold text-gray-900 text-sm mb-1">{{ module.name }}</div>
      <div class="text-xs text-gray-500 leading-relaxed mb-3">{{ module.description }}</div>
      {% if module.status == "active" %}
        <span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-green-50 text-green-700 border border-green-200">Aktiv</span>
      {% else %}
        <span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 border border-gray-200">Geplant</span>
      {% endif %}
    </div>
    {% endfor %}

    <div class="bg-white rounded-md border border-dashed border-gray-300 p-5">
      <div class="text-2xl mb-2 opacity-30">➕</div>
      <div class="font-semibold text-gray-300 text-sm mb-1">Neues Modul</div>
      <div class="text-xs text-gray-300 leading-relaxed">Erweiterbar durch studentische Arbeiten.</div>
    </div>

  </div>
</div>

<div class="bg-white border-t border-gray-200 px-8 py-4 flex flex-wrap items-center gap-8">
  <span class="text-xs text-gray-500">API: <strong class="text-gray-800">FastAPI</strong></span>
  <span class="text-xs text-gray-500">Datenbank: <strong class="text-gray-800">{{ db_mode }}</strong></span>
  <span class="text-xs text-gray-500">WebSocket: <strong class="text-gray-800">aktiv</strong></span>
  <div class="ml-auto text-xs font-medium text-efi">● System online</div>
</div>

{% endblock %}