<!DOCTYPE html>
{% extends "base.html" %}

{% block title %}studio einszwovier{% endblock %}

{% block content %}
<div class="container">

    <div class="status-cards-container">
        <!-- Studio Status Card -->
        <div class="status-card">
            <div class="status-header">Studio Status</div>
            <div class="status-body">
                {% if studio_open %}
                <span class="status-indicator open"></span>
                <span class="status-text">Wir sind gerade im Studio! Komm vorbei und sieh dir unsere aktuellen Projekte
                    an.</span>
                {% else %}
                <span class="status-indicator closed"></span>
                <span class="status-text">
                    Momentan geschlossen.<br>
                    Unsere regulären Öffnungszeiten: {{ opening_hours }}<br>
                    Schau gerne später wieder vorbei!
                </span>
                {% endif %}
            </div>
        </div>

        <!-- Disclaimer Card -->
        <div class="status-card">
            <div class="status-header">Hinweis</div>
            <div class="status-body">
                Diese Website ist ein gemeinschaftliches Projekt. Jede*r ist eingeladen, Verbesserungen beizutragen:
                <a href="https://forgejo.petau.net/aron/124-webapp" target="_blank">Quellcode ansehen</a>.
            </div>
        </div>
    </div>

    <!-- Information and Tools Cards -->
    <div class="link-cards-grid">
        <a class="link-card" href="/about">
            <i class="fas fa-info-circle card-icon"></i>
            <div class="card-content">
                <div class="title">einszwovier - Über uns</div>
                <div class="tagline">Erfahre, wer wir sind, welche Projekte wir realisieren und wie du uns findest.
                </div>
            </div>
        </a>

        <a class="link-card" href="/cost">
            <i class="fas fa-calculator card-icon"></i>
            <div class="card-content">
                <div class="title">Großformat - Kostenrechner</div>
                <div class="tagline">Berechne einfach Druck- und Materialkosten für Posterprints und andere Großformate.
                </div>
            </div>
        </a>

        <a class="link-card" href="http://{{ server_hostname }}:{{ bookstack_port }}" target="_blank">
            <i class="fas fa-book card-icon"></i>
            <div class="card-content">
                <div class="title">Wissenssammlung</div>
                <div class="tagline">Zugriff auf geteilte Anleitungen und Dokumente innerhalb von BookStack – ideal für
                    die
                    Zusammenarbeit. Schreib uns eine kurze E-Mail, um einen Login zu erhalten.</div>
            </div>
        </a>

        <a class="link-card" href="http://{{ server_hostname }}:{{ openwebui_port }}" target="_blank">
            <i class="fas fa-robot card-icon"></i>
            <div class="card-content">
                <div class="title">Lokaler Chatbot</div>
                <div class="tagline">Teste unsere schulischen Large Language Models direkt über die Weboberfläche.</div>
            </div>
        </a>

        <a class="link-card" href="http://{{ server_hostname }}:8001/hub/" target="_blank">
            <i class="fas fa-code card-icon"></i>
            <div class="card-content">
                <div class="title">JupyterHub</div>
                <div class="tagline">Interaktive Python-Notebooks für Datenanalyse, Visualisierung und kollaboratives
                    Programmieren. Schreib uns eine E-Mail für Login-Daten.</div>
            </div>
        </a>

        <a class="link-card" href="http://{{ server_hostname }}:{{ forgejo_port }}" target="_blank">
            <i class="fab fa-git-alt card-icon"></i>
            <div class="card-content">
                <div class="title">Forgejo Git Server</div>
                <div class="tagline">Versionskontrolle und Code-Hosting für kollaborative Softwareprojekte. Ideal für
                    gemeinsame
                    Entwicklung und Projektmanagement.</div>
            </div>
        </a>

        <a class="link-card" href="http://{{ server_hostname }}:{{ element_port }}" target="_blank">
            <i class="fas fa-comments card-icon"></i>
            <div class="card-content">
                <div class="title">Matrix Chat</div>
                <div class="tagline">Browser-basierter Chat für die studio einszwovier Community. Nutzt den bestehenden
                    Matrix-Server – keine App-Installation nötig.</div>
            </div>
        </a>

        <a class="link-card" href="http://autokanban.local:8000" target="_blank">
            <i class="fas fa-tasks card-icon"></i>
            <div class="card-content">
                <div class="title">Autokanban</div>
                <div class="tagline">Kollektive To‑Do‑Liste: Jede*r kann Aufgaben posten und lösen. Für das Lösen
                    von Aufgaben gibt es Badges — sammle Anerkennung für deinen Beitrag!</div>
            </div>
        </a>

        <a class="link-card" href="http://voicepi.local:1024" target="_blank">
            <i class="fas fa-microchip card-icon"></i>
            <div class="card-content">
                <div class="title">Calliope Flasher on VoicePi</div>
                <div class="tagline">Flash Calliope / micro:bit-compatible devices connected to VoicePi.</div>
            </div>
        </a>

        <a class="link-card" href="mailto:einszwovier@gvb-gymnasium.de" target="_blank">
            <i class="fas fa-envelope card-icon"></i>
            <div class="card-content">
                <div class="title">Kontakt</div>
                <div class="tagline">Schreibe uns direkt an: einszwovier@gvb-gymnasium.de</div>
            </div>
        </a>
    </div>

</div>

<!-- Footer with Admin Panel and Source Link -->
<footer class="footer">
    <!-- Architecture Diagram Spoiler -->
    <details class="architecture-spoiler">
        <summary class="architecture-summary">
            <i class="fas fa-sitemap"></i>
            <span>Systemarchitektur anzeigen</span>
        </summary>
        <div class="architecture-content">
            <img src="/static/images/architecture.png" alt="Studio einszwovier Architecture Diagram"
                class="architecture-image">
            <p class="architecture-caption">Übersicht über alle Dienste und deren Zusammenspiel im Studio einszwovier
                System</p>
        </div>
    </details>

    <div class="footer-container">
        <a href="http://{{ server_hostname }}:{{ portainer_port }}" target="_blank" class="admin-link">Admin Panel
            (Portainer)</a>
        <span class="footer-source">
            | <a href="https://forgejo.petau.net/aron/124-webapp" target="_blank">Quellcode der Website</a>
        </span>
    </div>
</footer>

{% endblock %}