139 lines
4.5 KiB
HTML
139 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Suche{% endblock %}
|
|
{% block breadcrumb_items %}
|
|
<li class="breadcrumb-item active" aria-current="page">Suche</li>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<!-- Search Form -->
|
|
<div class="card search-form sticky-top" style="top: 1rem;">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">🔍 Suche</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form action="/search/" method="post" id="search-form">
|
|
{% csrf_token %}
|
|
|
|
<!-- Main Search Field -->
|
|
<div class="mb-3">
|
|
<label for="query" class="form-label">Suchbegriff</label>
|
|
<div class="input-group">
|
|
<input type="text"
|
|
class="form-control"
|
|
id="query"
|
|
name="q"
|
|
placeholder="Suchbegriff eingeben …"
|
|
value="{{ search_term|default:'' }}"
|
|
required
|
|
maxlength="200">
|
|
<button class="btn btn-primary" type="submit">
|
|
Suchen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-outline btn-sm w-100" onclick="history.back()">
|
|
← Zurück zur Suche
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-8">
|
|
<!-- Search Results -->
|
|
{% if search_term %}
|
|
<div class="search-results">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2>Suchresultate für "{{ search_term }}"</h2>
|
|
<span class="badge bg-primary">
|
|
{% if resultat.geltungsbereich %}
|
|
{{ resultat.geltungsbereich|length }}
|
|
{% endif %}
|
|
{% if resultat.all %}
|
|
{% for standard, vorgaben in resultat.all.items %}
|
|
{{ vorgaben|length }}
|
|
{% endfor %}
|
|
{% endif %}
|
|
Ergebnisse
|
|
</span>
|
|
</div>
|
|
|
|
<!-- No Results -->
|
|
{% if not resultat.geltungsbereich and not resultat.all %}
|
|
<div class="text-center py-5">
|
|
<div class="mb-3">
|
|
<span style="font-size: 3rem;">🔍</span>
|
|
</div>
|
|
<h3 class="text-muted">Keine Resultate für "{{ search_term }}"</h3>
|
|
<p class="text-muted mb-4">
|
|
Es wurden keine Ergebnisse gefunden. Versuchen Sie es mit anderen Suchbegriffen.
|
|
</p>
|
|
<button class="btn btn-primary" onclick="history.back()">
|
|
← Zurück zur Suche
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<!-- Initial Search State -->
|
|
<div class="text-center py-5">
|
|
<div class="mb-4">
|
|
<span style="font-size: 4rem;">🔍</span>
|
|
</div>
|
|
<h2>Willkommen bei der Suche</h2>
|
|
<p class="text-muted mb-4">
|
|
Geben Sie einen Suchbegriff ein, um Standards, Vorgaben und Geltungsbereiche zu durchsuchen.
|
|
</p>
|
|
|
|
<!-- Quick Search Examples -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Beispielsuchen</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-2">
|
|
<div class="col-md-4">
|
|
<button class="btn btn-outline btn-sm w-100 quick-search" data-term="Passwort">
|
|
🔐 Passwort
|
|
</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-outline btn-sm w-100 quick-search" data-term="Netzwerk">
|
|
🌐 Netzwerk
|
|
</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-outline btn-sm w-100 quick-search" data-term="Verschlüsselung">
|
|
🔒 Verschlüsselung
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript for quick search -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Quick search buttons
|
|
const quickSearchButtons = document.querySelectorAll('.quick-search');
|
|
quickSearchButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const term = this.dataset.term;
|
|
document.getElementById('query').value = term;
|
|
document.getElementById('search-form').submit();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |