<!DOCTYPE html>
<!-- templates/about.html -->
{% extends "base.html" %}

{% block title %}Über uns – studio einszwovier{% endblock %}

{% block content %}
<div class="container">
    <section>
        <h2>Über den Makerspace</h2>
        <p>Seit Dezember 2024 trägt unser Maker Space den Namen <strong>studio einszwovier</strong>. Er ist ein
            innovativer, digitaler Lernraum, der Kreativität, Technik und Bildungsgerechtigkeit verbindet. Hier wird
            „Making“ erlebbar: Lernende gestalten ihren Lernprozess aktiv, entdecken individuelle Stärken und erleben
            durch Selbstwirksamkeit besondere Motivation.
            Betreut wird der Maker Space von <strong>Aron Petau</strong> und <strong>Friedrich Weber</strong>. Einfach vorbeischauen, Ideen vorstellen und loslegen!
        </p>
    </section>

    <section>
        <h2>Ausstattung</h2>
        <ul>
            <li><strong>3D-Drucker:</strong> Für Modelle und Prototypen.</li>
            <li><strong>Großformatdrucker (A0):</strong> Präzisionsdruck für große Formate.</li>
            <li><strong>Lasercutter:</strong> Präzises Schneiden und Gravieren von Materialien.</li>
            <li><strong>Stickmaschine:</strong> Professionelle Textilveredelung.</li>
            <li><strong>Microcontroller:</strong> Elektronik und Programmierung.</li>
            <li><strong>Holzbearbeitung:</strong> Handwerkliche Projekte.</li>
            <li><strong>Textildruckgeräte:</strong> Kreative Designs auf Stoffen.</li>
            <li><strong>Drohnen:</strong> Flugexperimente und Luftbildfotografie.</li>
            <li><strong>LEGO SPIKE Roboter:</strong> Spielerisches Erlernen von Robotik und Programmierung.</li>
        </ul>

        Wenn du mehr über unsere Ausstattung erfahren möchtest oder spezielle Geräte suchst, schau in unsere
        <a href="{{ bookstack_url }}" target="_blank">Wissenssammlung</a> oder frag uns direkt im Studio!
    </section>

    <section>
        <h2>Öffnungszeiten + Kontakt</h2>
        <p>Dienstag bis Donnerstag: 11:00 – 16:00 Uhr<br>
            Raum 124, Gabriele-von-Bülow-Gymnasium</p>
        <p>E-Mail: <a href="mailto:einszwovier@gvb-gymnasium.de">einszwovier@gvb-gymnasium.de</a></p>
                <h2>Standort</h2>
        <p>Gabriele-von-Bülow-Gymnasium<br>
            Tile-Brügge-Weg 63, 13509 Berlin (Tegel)<br>
            Telefon: 030 21 00 52 460<br>
            E-Mail: <a href="mailto:info@gvb-gymnasium.de">info@gvb-gymnasium.de</a></p>

    </section>


    <section>
        <h2>Aktuelle Kurse</h2>
        {% if courses %}
        <div class="courses-grid">
            {% for course in courses %}
            <div class="course-card">
                {% if course.image %}
                <div class="course-image" onclick="openImageModal('{{ course.image }}', '{{ course.title }}')">
                    <img src="{{ course.image }}" alt="{{ course.title }}">
                </div>
                {% endif %}
                <div class="course-content">
                    <h3 class="course-title">{{ course.title }}</h3>
                    {% if course.description %}
                    <p class="course-description">{{ course.description }}</p>
                    {% endif %}
                    <div class="course-meta">
                        {% if course.dates %}
                        <div class="course-dates">📅 {{ course.dates }}</div>
                        {% endif %}
                        {% if course.offen_fuer %}
                        <div class="course-audience">👥 {{ course.offen_fuer }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p>Aktuell sind keine Kurse geplant. Schaut bald wieder vorbei!</p>
        {% endif %}
    </section>

    <!-- Image Modal -->
    <div id="imageModal" class="image-modal" onclick="closeImageModal()">
        <span class="modal-close">&times;</span>
        <img class="modal-content" id="modalImage">
        <div id="modalCaption"></div>
    </div>

    <script>
        function openImageModal(imageSrc, caption) {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImage');
            const modalCaption = document.getElementById('modalCaption');

            modal.style.display = 'flex';
            modalImg.src = imageSrc;
            modalCaption.textContent = caption;

            // Prevent body scroll when modal is open
            document.body.style.overflow = 'hidden';
        }

        function closeImageModal() {
            const modal = document.getElementById('imageModal');
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // Close modal with Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeImageModal();
            }
        });
    </script>
</div>
{% endblock %}