{% extends "base.html" %}

{% block title %}Suche{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row gap-6">
    <!-- Filter-Sidebar -->
    <div class="w-full md:w-1/3 lg:w-1/4 mb-6">
        <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 shadow-lg">
            <h4 class="text-xl font-semibold mb-4">Erweiterte Suche</h4>
            <form id="search-form">
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-1">Suchbegriff</label>
                    <div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
                        <span class="px-3 py-2 text-gray-400">
                            <i class="fas fa-search"></i>
                        </span>
                        <input type="text" class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="q" placeholder="Suche...">
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-1">Schlagworte</label>
                    <div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
                        <span class="px-3 py-2 text-gray-400">
                            <i class="fas fa-tags"></i>
                        </span>
                        <input type="text" class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="keywords" placeholder="Schlagworte (kommagetrennt)">
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-1">Minimale Bewertung</label>
                    <div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
                        <span class="px-3 py-2 text-gray-400">
                            <i class="fas fa-star"></i>
                        </span>
                        <select class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="min_rating">
                            <option value="">Alle</option>
                            <option value="4">4+ Sterne</option>
                            <option value="3">3+ Sterne</option>
                            <option value="2">2+ Sterne</option>
                            <option value="1">1+ Stern</option>
                        </select>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-1">Quellentyp</label>
                    <div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
                        <span class="px-3 py-2 text-gray-400">
                            <i class="fas fa-file-alt"></i>
                        </span>
                        <select class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="source_type">
                            <option value="">Alle</option>
                            <option value="PDF">PDF</option>
                            <option value="Markdown">Markdown</option>
                            <option value="Text">Text</option>
                        </select>
                    </div>
                </div>
                
                <div class="mb-5">
                    <label class="block text-sm font-medium mb-1">Beziehungstyp</label>
                    <div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
                        <span class="px-3 py-2 text-gray-400">
                            <i class="fas fa-project-diagram"></i>
                        </span>
                        <select class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="relation_type">
                            <option value="">Alle</option>
                            <option value="SUPPORTS">Stützt</option>
                            <option value="CONTRADICTS">Widerspricht</option>
                            <option value="BUILDS_UPON">Baut auf auf</option>
                            <option value="GENERALIZES">Verallgemeinert</option>
                            <option value="SPECIFIES">Spezifiziert</option>
                            <option value="INSPIRES">Inspiriert</option>
                        </select>
                    </div>
                </div>
                
                <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-2 px-4 rounded-lg hover:opacity-90 transition-all flex items-center justify-center">
                    <i class="fas fa-search mr-2"></i> Suchen
                </button>
            </form>
        </div>
    </div>
    
    <!-- Suchergebnisse -->
    <div class="w-full md:w-2/3 lg:w-3/4">
        <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 shadow-lg mb-6">
            <h3 class="text-2xl font-semibold mb-2">Suchergebnisse</h3>
            <p class="text-gray-300 text-sm">Nutze die Filter links, um deine Suche zu präzisieren.</p>
        </div>
        
        <div id="search-results" class="mb-6">
            <!-- Suchergebnisse werden hier dynamisch eingefügt -->
            <div class="bg-white/10 backdrop-blur-md rounded-xl p-8 shadow-lg text-center">
                <i class="fas fa-search text-5xl mb-6 text-blue-400"></i>
                <h5 class="text-xl font-medium mb-3">Wissen entdecken</h5>
                <p class="text-gray-300">Gib einen Suchbegriff ein, um in der wissenschaftlichen Wissensdatenbank zu suchen.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}