{% extends "base.html" %}

{% block title %}Projekte durchsuchen{% endblock %}

{% block content %}
<section class="hero">
    <div class="container">
        <h1 class="hero-title">Open-Source Projekte für die Verwaltung</h1>
        <p class="hero-subtitle">Finden Sie passende Projekte und bewerben Sie sich als Mitarbeitende – oder reichen Sie Ihr eigenes Projekt ein.</p>
    </div>
</section>

<section class="search-section">
    <div class="container">
        <form method="get" action="{{ url_for('index') }}" class="search-form">
            <div class="row g-3 align-items-end">
                <div class="col-md-6">
                    <label for="suche" class="form-label">Suche</label>
                    <input type="text" id="suche" name="suche" class="form-control form-control-lg" placeholder="Titel oder Beschreibung durchsuchen..." value="{{ suche }}">
                </div>
                <div class="col-md-4">
                    <label for="kategorie" class="form-label">Kategorie</label>
                    <select id="kategorie" name="kategorie" class="form-select form-select-lg">
                        <option value="">Alle Kategorien</option>
                        {% for k in kategorien %}
                        <option value="{{ k }}" {% if aktuelle_kategorie == k %}selected{% endif %}>{{ k }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary btn-lg w-100">Suchen</button>
                </div>
            </div>
        </form>
    </div>
</section>

<section class="projects-section">
    <div class="container">
        <h2 class="section-title">Verfügbare Projekte</h2>
        {% if projekte %}
        <div class="project-grid">
            {% for projekt in projekte %}
            <article class="project-card">
                <span class="project-card-badge">{{ projekt.kategorie }}</span>
                <h3 class="project-card-title">{{ projekt.titel }}</h3>
                <p class="project-card-desc">{{ projekt.beschreibung[:180] }}{% if projekt.beschreibung|length > 180 %}…{% endif %}</p>
                <div class="project-card-meta">
                    <span class="project-card-behoerde">{{ projekt.behoerde }}</span>
                    <span class="project-card-status status-{{ projekt.status }}">{{ projekt.status }}</span>
                </div>
                <a href="{{ url_for('projekt_detail', id=projekt.id) }}" class="project-card-link">Details & Bewerben</a>
            </article>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <p>Keine Projekte gefunden. Versuchen Sie andere Suchbegriffe oder <a href="{{ url_for('projekt_einreichen') }}">reichen Sie ein Projekt ein</a>.</p>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}