{% extends 'base.html' %}
{% load help_tags %}

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

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'stiftung:dashboard' %}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{% url 'stiftung:geschichte_list' %}">Geschichte</a></li>
        <li class="breadcrumb-item"><a href="{{ seite.get_absolute_url }}">{{ seite.titel }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Bild hinzufügen</li>
    </ol>
</nav>

<div class="row">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-image me-2"></i>{{ title }}
                </h5>
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label class="form-label" for="{{ form.titel.id_for_label }}">{{ form.titel.label }}</label>
                        {{ form.titel }}
                        {% if form.titel.errors %}
                            <div class="text-danger">{{ form.titel.errors }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label" for="{{ form.bild.id_for_label }}">{{ form.bild.label }}</label>
                        {{ form.bild }}
                        {% if form.bild.errors %}
                            <div class="text-danger">{{ form.bild.errors }}</div>
                        {% endif %}
                        <div class="form-text">{{ form.bild.help_text }}</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label" for="{{ form.alt_text.id_for_label }}">{{ form.alt_text.label }}</label>
                        {{ form.alt_text }}
                        {% if form.alt_text.errors %}
                            <div class="text-danger">{{ form.alt_text.errors }}</div>
                        {% endif %}
                        <div class="form-text">{{ form.alt_text.help_text }}</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label" for="{{ form.beschreibung.id_for_label }}">{{ form.beschreibung.label }}</label>
                        {{ form.beschreibung }}
                        {% if form.beschreibung.errors %}
                            <div class="text-danger">{{ form.beschreibung.errors }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label" for="{{ form.sortierung.id_for_label }}">{{ form.sortierung.label }}</label>
                        {{ form.sortierung }}
                        {% if form.sortierung.errors %}
                            <div class="text-danger">{{ form.sortierung.errors }}</div>
                        {% endif %}
                        <div class="form-text">{{ form.sortierung.help_text }}</div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ seite.get_absolute_url }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>Abbrechen
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-upload me-1"></i>Hochladen
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Bildrichtlinien</h6>
            </div>
            <div class="card-body">
                <ul class="small">
                    <li><strong>Formate:</strong> JPG, PNG, GIF</li>
                    <li><strong>Maximale Größe:</strong> 10 MB</li>
                    <li><strong>Empfohlene Auflösung:</strong> 1200x800px oder höher</li>
                    <li><strong>Alt-Text:</strong> Wichtig für Barrierefreiheit</li>
                </ul>
                <hr>
                <p class="small text-muted">
                    Bilder werden automatisch für die Web-Anzeige optimiert.
                </p>
            </div>
        </div>
        
        {% if seite.bilder.exists %}
        <div class="card mt-3">
            <div class="card-header bg-secondary text-white">
                <h6 class="mb-0"><i class="fas fa-images me-2"></i>Vorhandene Bilder</h6>
            </div>
            <div class="card-body">
                {% for bild in seite.bilder.all %}
                <div class="mb-2">
                    <img src="{{ bild.bild.url }}" alt="{{ bild.alt_text }}" class="img-thumbnail" style="width: 60px; height: 40px; object-fit: cover;">
                    <small class="ms-2">{{ bild.titel }}</small>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}