{% extends 'admin_base.html.twig' %}

{% block title %}E-Mail-Templates - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/skins/ui/oxide/skin.min.css" rel="stylesheet">
    <style>
/* Kompakte Statistik-Cards */
.stat-card {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Template-Cards */
.template-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.template-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #007bff;
}

.template-card .card-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
}

.template-card .card-title {
    color: #495057;
    font-weight: 600;
}

/* Badge Styling */
.badge {
    font-size: 0.75rem;
    padding: 0.4em 0.8em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-card {
        margin-bottom: 1rem;
    }
    
    .template-card {
        margin-bottom: 1rem;
    }
}

/* Button Hover Effects */
.btn-outline-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* Course List */
.course-list {
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #f8f9fa;
}

.course-item {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.course-item:last-child {
    border-bottom: none;
}

.course-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.course-name {
    font-weight: 500;
    color: #495057;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-item small {
    margin-left: 1.5rem;
    font-size: 0.75rem;
    color: #6c757d;
}

/* Template Preview */
.template-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.4;
}

.template-preview h1, .template-preview h2, .template-preview h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.template-preview p {
    margin-bottom: 0.5rem;
}

/* Placeholder Dropdown */
.placeholder-dropdown {
    max-height: 400px;
    overflow-y: auto;
    min-width: 350px;
}

.placeholder-dropdown .dropdown-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s;
}

.placeholder-dropdown .dropdown-item:hover {
    background-color: #f8f9fa;
}

.placeholder-dropdown .dropdown-item strong {
    color: #495057;
    font-size: 0.9rem;
}

.placeholder-dropdown .dropdown-item small {
    color: #6c757d;
    font-size: 0.8rem;
    display: block;
    margin-top: 0.25rem;
}

/* TinyMCE Styling */
.tox-tinymce {
    border-radius: 4px !important;
}
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-muted mb-0">
                        {% if showTrash %}
                            Papierkorb und Wiederherstellung gelöschter E-Mail-Templates
                        {% else %}
                            Verwalten Sie alle E-Mail-Templates für das System
                        {% endif %}
                    </p>
                    <h1 class="h3 mb-0">
                        <i class="fas {% if showTrash %}fa-trash-restore{% else %}fa-envelope{% endif %} me-2"></i>
                        {% if showTrash %}E-Mail-Template Papierkorb{% else %}E-Mail-Templates{% endif %}
                    </h1>
                </div>
                <div class="btn-group">
                    {% if not showTrash %}
                        <button class="btn btn-primary" id="showCreateTemplateForm">
                            <i class="fas fa-plus me-2"></i>Neues Template
                        </button>
                    {% endif %}
                    <a href="{{ path('admin_email_templates_index', showTrash ? {} : {'trash': 1}) }}" class="btn btn-outline-warning">
                        <i class="fas {% if showTrash %}fa-arrow-left{% else %}fa-trash{% endif %} me-2"></i>
                        {% if showTrash %}Zur Übersicht{% else %}Papierkorb{% endif %}
                    </a>
                    <a href="{{ path('admin_dashboard') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Zurück zum Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    {% if not showTrash %}
    {% include 'admin/email_templates/_system_fallbacks.html.twig' with {
        fallbackEmails: fallbackEmails|default([])|filter(e => e.system == 'swim')
    } %}
    {% endif %}

    <!-- Statistiken -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stat-card bg-primary">
                <div class="stat-number">{{ templates|length }}</div>
                <div class="stat-label">{% if showTrash %}Gelöscht{% else %}Templates{% endif %}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card bg-success">
                <div class="stat-number">
                    {% if showTrash %}
                        {{ templates|filter(t => t.deletedBy)|length }}
                    {% else %}
                        {{ templates|filter(t => t.isActive)|length }}
                    {% endif %}
                </div>
                <div class="stat-label">{% if showTrash %}Mit Benutzer{% else %}Aktiv{% endif %}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card bg-info">
                <div class="stat-number">
                    {% if showTrash %}
                        {{ templates|filter(t => t.deletedAt)|length }}
                    {% else %}
                        {{ templates|filter(t => t.type == 'booking')|length }}
                    {% endif %}
                </div>
                <div class="stat-label">{% if showTrash %}Mit Löschdatum{% else %}Buchungen{% endif %}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card bg-warning">
                <div class="stat-number">
                    {% if showTrash %}
                        {{ templates|filter(t => t.deletedBy is null)|length }}
                    {% else %}
                        {{ templates|filter(t => t.type == 'reminder')|length }}
                    {% endif %}
                </div>
                <div class="stat-label">{% if showTrash %}Ohne Benutzer{% else %}Erinnerungen{% endif %}</div>
            </div>
        </div>
    </div>

    <!-- Templates als Cards -->
    <div class="row" id="templatesGrid">
        {% for template in templates %}
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 template-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="card-title mb-0">
                            <i class="fas {% if showTrash %}fa-trash{% else %}fa-envelope{% endif %} me-2"></i>
                            {{ template.name }}
                        </h6>
                        <div class="btn-group" role="group">
                            {% if showTrash %}
                                <button class="btn btn-sm btn-outline-success restore-template"
                                        data-template-id="{{ template.id }}"
                                        title="Wiederherstellen">
                                    <i class="fas fa-trash-restore"></i>
                                </button>
                            {% else %}
                                <button class="btn btn-sm btn-outline-primary edit-template" 
                                        data-template-id="{{ template.id }}"
                                        title="Bearbeiten">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger delete-template" 
                                        data-template-id="{{ template.id }}"
                                        title="Löschen">
                                    <i class="fas fa-trash"></i>
                                </button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <p class="mb-1">
                                <i class="fas fa-tag me-2 text-muted"></i>
                                <strong>Typ:</strong> 
                                <span class="badge bg-info">{{ template.type|title }}</span>
                            </p>
                            
                            <p class="mb-1">
                                <i class="fas fa-toggle-on me-2 text-muted"></i>
                                <strong>Status:</strong> 
                                {% if template.isActive %}
                                    <span class="badge bg-success">Aktiv</span>
                                {% else %}
                                    <span class="badge bg-secondary">Inaktiv</span>
                                {% endif %}
                            </p>
                            
                            <p class="mb-1">
                                <i class="fas fa-clock me-2 text-muted"></i>
                                <strong>{% if showTrash %}Gelöscht:{% else %}Erstellt:{% endif %}</strong>
                                {{ (showTrash ? template.deletedAt : template.createdAt)|date('d.m.Y H:i') }}
                            </p>
                            {% if showTrash %}
                                <p class="mb-1">
                                    <i class="fas fa-user-shield me-2 text-muted"></i>
                                    <strong>Gelöscht von:</strong> {{ template.deletedBy ? template.deletedBy.email : 'Unbekannt' }}
                                </p>
                            {% endif %}
                        </div>

                        {% if template.subject %}
                            <div class="mb-3">
                                <h6 class="text-muted mb-2">Betreff:</h6>
                                <p class="text-muted small">{{ template.subject }}</p>
                            </div>
                        {% endif %}

                        {% if template.availabilities|length > 0 %}
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="text-muted mb-0">Zugeordnete Kurse ({{ template.availabilities|length }}):</h6>
                                    {% if template.availabilities|length > 3 %}
                                        <button class="btn btn-sm btn-outline-primary" onclick="toggleCourseList(this)">
                                            <i class="fas fa-chevron-down me-1"></i>Alle anzeigen
                                        </button>
                                    {% endif %}
                                </div>
                                <div class="course-list" id="courseList-{{ template.id }}">
                                    {% for availability in template.availabilities %}
                                        <div class="course-item {% if loop.index > 3 %}d-none{% endif %}">
                                            <div class="course-info">
                                                <i class="fas fa-graduation-cap me-2 text-primary"></i>
                                                <span class="course-name">{{ availability.name|slice(0, 40) }}{% if availability.name|length > 40 %}...{% endif %}</span>
                                            </div>
                                            {% if availability.location %}
                                                <small class="text-muted">{{ availability.location.name }}</small>
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% else %}
                            <div class="mb-3">
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <strong>Keine Kurse zugeordnet</strong><br>
                                    <small>Dieses Template ist noch keinem Kurs zugeordnet.</small>
                                </div>
                            </div>
                        {% endif %}

                        <!-- Status Badges -->
                        <div class="mb-3">
                            <span class="badge bg-info me-1">{{ template.type|title }}</span>
                            {% if template.isActive %}
                                <span class="badge bg-success me-1">Aktiv</span>
                            {% else %}
                                <span class="badge bg-secondary me-1">Inaktiv</span>
                            {% endif %}
                            {% if showTrash %}
                                <span class="badge bg-danger me-1">Gelöscht</span>
                            {% endif %}
                            {% if template.subject %}
                                <span class="badge bg-primary me-1">Betreff</span>
                            {% endif %}
                            {% if template.content %}
                                <span class="badge bg-warning me-1">Inhalt</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-envelope fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">{% if showTrash %}Papierkorb ist leer{% else %}Keine Templates gefunden{% endif %}</h5>
                        <p class="text-muted">
                            {% if showTrash %}
                                Es befinden sich aktuell keine gelöschten E-Mail-Templates im Papierkorb.
                            {% else %}
                                Es sind noch keine E-Mail-Templates angelegt.
                            {% endif %}
                        </p>
                        {% if not showTrash %}
                            <button class="btn btn-primary" id="showCreateTemplateForm">
                                <i class="fas fa-plus me-2"></i>Erstes Template anlegen
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<!-- Create Template Modal -->
<div class="modal fade" id="createTemplateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus me-2"></i>Neues E-Mail-Template
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="createTemplateForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-tag me-1"></i>Name
                            </label>
                            <input type="text" class="form-control" id="createTemplateName" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-list me-1"></i>Typ
                            </label>
                            <select class="form-select" id="createTemplateType" required>
                                <option value="">Typ wählen</option>
                                <option value="booking_confirmation">Buchungsbestätigung</option>
                                <option value="booking_validation">Buchungsvalidierung</option>
                                <option value="payment">Zahlungsbestätigung</option>
                                <option value="booking_change">Buchungsänderung</option>
                                <option value="cancellation">Absage</option>
                                <option value="waitlist">Warteliste</option>
                                <option value="reminder">Erinnerung</option>
                            </select>

                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-envelope me-1"></i>Betreff
                            </label>
                            <input type="text" class="form-control" id="createTemplateSubject" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-at me-1"></i>Absender E-Mail
                            </label>
                            <input type="email" class="form-control" id="createTemplateFromEmail" placeholder="Leer = Standard-Absender">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-user me-1"></i>Absender Name
                            </label>
                            <input type="text" class="form-control" id="createTemplateFromName" placeholder="z. B. Buchung Bewegungszentrum">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-edit me-1"></i>Inhalt
                            </label>
                            <div class="mb-2">
                                <button type="button" class="btn btn-outline-info btn-sm me-2" id="showPlaceholders">
                                    <i class="fas fa-info-circle me-1"></i>Verfügbare Platzhalter
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="previewTemplate">
                                    <i class="fas fa-eye me-1"></i>Vorschau
                                </button>
                                <div class="dropdown d-inline-block ms-2">
                                    <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" id="placeholderDropdown" data-bs-toggle="dropdown">
                                        <i class="fas fa-code me-1"></i>Platzhalter einfügen
                                    </button>
                                    
                                    <ul class="dropdown-menu placeholder-dropdown">
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Name]]"><strong>Name</strong><br><small>Vollständiger Name des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Vorname]]"><strong>Vorname</strong><br><small>Vorname des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Nachname]]"><strong>Nachname</strong><br><small>Nachname des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[E-Mail]]"><strong>E-Mail</strong><br><small>E-Mail-Adresse des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Telefon]]"><strong>Telefon</strong><br><small>Telefonnummer des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Datum]]"><strong>Datum</strong><br><small>Termin-Datum</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Zeit]]"><strong>Zeit</strong><br><small>Termin-Zeit</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Dauer]]"><strong>Dauer</strong><br><small>Termin-Dauer</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Kurs]]"><strong>Kurs</strong><br><small>Name des Kurses</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Preis]]"><strong>Preis</strong><br><small>Kurspreis (falls vorhanden)</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[KursTyp]]"><strong>KursTyp</strong><br><small>Typ des Kurses</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Ort]]"><strong>Ort</strong><br><small>Name des Veranstaltungsorts</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Adresse]]"><strong>Adresse</strong><br><small>Vollständige Adresse</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[PLZ]]"><strong>PLZ</strong><br><small>Postleitzahl</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Stadt]]"><strong>Stadt</strong><br><small>Stadt</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Anfahrt]]"><strong>Anfahrt</strong><br><small>Anfahrtsbeschreibung</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[QR-Code]]"><strong>QR-Code</strong><br><small>QR-Code für den Termin</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[TerminLink]]"><strong>TerminLink</strong><br><small>Link zum Termin</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[KalenderLink]]"><strong>KalenderLink</strong><br><small>Link zum Kalendereintrag</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[StornierungsLink]]"><strong>StornierungsLink</strong><br><small>Link zur Stornierung</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[BuchungsID]]"><strong>BuchungsID</strong><br><small>Eindeutige Buchungsnummer</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[ValidierungsLink]]"><strong>ValidierungsLink</strong><br><small>Link zur Terminbestätigung</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[MeineBuchungenLink]]"><strong>MeineBuchungenLink</strong><br><small>Link zur Buchungsverwaltung</small></a></li>
                                    </ul>
                                </div>
                            </div>
                            <textarea class="form-control" id="createTemplateContent" rows="10" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-calendar-alt me-1"></i>Zugeordnete Kurse
                            </label>
                            <select class="form-select" id="createTemplateCourses" name="createTemplateCourses" multiple style="min-height: 120px;">
                                {% if courses %}
                                    {% for course in courses %}
                                        <option value="{{ course.id }}">{{ course.name }}</option>
                                    {% endfor %}
                                {% endif %}
                            </select>
                            <div class="form-text">Halten Sie Strg (Windows) oder Cmd (Mac) gedrückt, um mehrere Kurse auszuwählen</div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="createTemplateActive" checked>
                                <label class="form-check-label" for="createTemplateActive">
                                    Template aktivieren
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" id="saveCreateTemplate">
                    <i class="fas fa-save me-1"></i>Template speichern
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Template Modal -->
<div class="modal fade" id="editTemplateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>Template bearbeiten
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editTemplateForm">
                    <input type="hidden" id="editTemplateId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-tag me-1"></i>Name
                            </label>
                            <input type="text" class="form-control" id="editTemplateName" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-list me-1"></i>Typ
                            </label>
                            <select class="form-select" id="editTemplateType" required>
                                <option value="">Typ wählen</option>
                                <option value="booking_confirmation">Buchungsbestätigung</option>
                                <option value="booking_validation">Buchungsvalidierung</option>
                                <option value="payment">Zahlungsbestätigung</option>
                                <option value="booking_change">Buchungsänderung</option>
                                <option value="cancellation">Absage</option>
                                <option value="waitlist">Warteliste</option>
                                <option value="reminder">Erinnerung</option>
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-envelope me-1"></i>Betreff
                            </label>
                            <input type="text" class="form-control" id="editTemplateSubject" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-at me-1"></i>Absender E-Mail
                            </label>
                            <input type="email" class="form-control" id="editTemplateFromEmail" placeholder="Leer = Standard-Absender">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-user me-1"></i>Absender Name
                            </label>
                            <input type="text" class="form-control" id="editTemplateFromName" placeholder="z. B. Buchung Bewegungszentrum">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-edit me-1"></i>Inhalt
                            </label>
                            <div class="mb-2">
                                <button type="button" class="btn btn-outline-info btn-sm me-2" id="showPlaceholdersEdit">
                                    <i class="fas fa-info-circle me-1"></i>Verfügbare Platzhalter
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="previewTemplateEdit">
                                    <i class="fas fa-eye me-1"></i>Vorschau
                                </button>
                                <div class="dropdown d-inline-block ms-2">
                                    <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" id="placeholderDropdownEdit" data-bs-toggle="dropdown">
                                        <i class="fas fa-code me-1"></i>Platzhalter einfügen
                                    </button>
                                    <ul class="dropdown-menu placeholder-dropdown">
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Name]]"><strong>Name</strong><br><small>Vollständiger Name des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Vorname]]"><strong>Vorname</strong><br><small>Vorname des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Nachname]]"><strong>Nachname</strong><br><small>Nachname des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[E-Mail]]"><strong>E-Mail</strong><br><small>E-Mail-Adresse des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Telefon]]"><strong>Telefon</strong><br><small>Telefonnummer des Kunden</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Datum]]"><strong>Datum</strong><br><small>Termin-Datum</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Zeit]]"><strong>Zeit</strong><br><small>Termin-Zeit</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Dauer]]"><strong>Dauer</strong><br><small>Termin-Dauer</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Kurs]]"><strong>Kurs</strong><br><small>Name des Kurses</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Preis]]"><strong>Preis</strong><br><small>Kurspreis (falls vorhanden)</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[KursTyp]]"><strong>KursTyp</strong><br><small>Typ des Kurses</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Ort]]"><strong>Ort</strong><br><small>Name des Veranstaltungsorts</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Adresse]]"><strong>Adresse</strong><br><small>Vollständige Adresse</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[PLZ]]"><strong>PLZ</strong><br><small>Postleitzahl</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Stadt]]"><strong>Stadt</strong><br><small>Stadt</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[Anfahrt]]"><strong>Anfahrt</strong><br><small>Anfahrtsbeschreibung</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[QR-Code]]"><strong>QR-Code</strong><br><small>QR-Code für den Termin</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[TerminLink]]"><strong>TerminLink</strong><br><small>Link zum Termin</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[KalenderLink]]"><strong>KalenderLink</strong><br><small>Link zum Kalendereintrag</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[StornierungsLink]]"><strong>StornierungsLink</strong><br><small>Link zur Stornierung</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[BuchungsID]]"><strong>BuchungsID</strong><br><small>Eindeutige Buchungsnummer</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[ValidierungsLink]]"><strong>ValidierungsLink</strong><br><small>Link zur Terminbestätigung</small></a></li>
                                        <li><a class="dropdown-item" href="#" data-placeholder="[[MeineBuchungenLink]]"><strong>MeineBuchungenLink</strong><br><small>Link zur Buchungsverwaltung</small></a></li>
                                    </ul>
                                </div>
                            </div>
                            <textarea class="form-control" id="editTemplateContent" rows="10" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-calendar-alt me-1"></i>Zugeordnete Kurse
                            </label>
                            <select class="form-select" id="editTemplateCourses" name="editTemplateCourses" multiple style="min-height: 120px;">
                                {% if courses %}
                                    {% for course in courses %}
                                        <option value="{{ course.id }}">{{ course.name }}</option>
                                    {% endfor %}
                                {% endif %}
                            </select>
                            <div class="form-text">Halten Sie Strg (Windows) oder Cmd (Mac) gedrückt, um mehrere Kurse auszuwählen</div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editTemplateActive">
                                <label class="form-check-label" for="editTemplateActive">
                                    Template aktivieren
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" id="saveEditTemplate">
                    <i class="fas fa-save me-1"></i>Änderungen speichern
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/tinymce.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Show create template modal
            document.getElementById('showCreateTemplateForm')?.addEventListener('click', function() {
                const modal = new bootstrap.Modal(document.getElementById('createTemplateModal'));
                modal.show();
            });

            // Handle create template form submission
            document.getElementById('saveCreateTemplate').addEventListener('click', function() {
                createTemplate();
            });

            // Handle edit template buttons
            document.querySelectorAll('.edit-template').forEach(button => {
                button.addEventListener('click', function() {
                    const templateId = this.getAttribute('data-template-id');
                    editTemplate(templateId);
                });
            });

            // Handle delete template buttons
            document.querySelectorAll('.delete-template').forEach(button => {
                button.addEventListener('click', function() {
                    const templateId = this.getAttribute('data-template-id');
                    if (confirm('Soll dieses Template in den Papierkorb verschoben werden?')) {
                        deleteTemplate(templateId);
                    }
                });
            });

            document.querySelectorAll('.restore-template').forEach(button => {
                button.addEventListener('click', function() {
                    const templateId = this.getAttribute('data-template-id');
                    restoreTemplate(templateId);
                });
            });

            // Handle edit template form submission
            document.getElementById('saveEditTemplate').addEventListener('click', function() {
                updateTemplate();
            });

            // Handle placeholder insertion
            document.querySelectorAll('[data-placeholder]').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    const placeholder = this.getAttribute('data-placeholder');
                    const textarea = document.getElementById('createTemplateContent');
                    if (textarea) {
                        insertPlaceholder(textarea, placeholder);
                    }
                });
            });

            // Handle placeholder insertion for edit modal
            document.querySelectorAll('#editTemplateModal [data-placeholder]').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    const placeholder = this.getAttribute('data-placeholder');
                    const textarea = document.getElementById('editTemplateContent');
                    if (textarea) {
                        insertPlaceholder(textarea, placeholder);
                    }
                });
            });

            // Handle placeholder info buttons
            document.getElementById('showPlaceholders')?.addEventListener('click', function() {
                showPlaceholderInfo();
            });

            document.getElementById('showPlaceholdersEdit')?.addEventListener('click', function() {
                showPlaceholderInfo();
            });

            // Handle preview buttons
            document.getElementById('previewTemplate')?.addEventListener('click', function() {
                previewTemplate('createTemplateContent');
            });

            document.getElementById('previewTemplateEdit')?.addEventListener('click', function() {
                previewTemplate('editTemplateContent');
            });

            // Initialize TinyMCE when modals are shown
            document.getElementById('createTemplateModal').addEventListener('shown.bs.modal', function () {
                initializeTinyMCE('createTemplateContent');
            });

            document.getElementById('editTemplateModal').addEventListener('shown.bs.modal', function () {
                initializeTinyMCE('editTemplateContent');
                
                // Set selected courses after modal is shown
                if (window.selectedCourseIds && window.selectedCourseIds.length > 0) {
                    const courseSelect = document.getElementById('editTemplateCourses');
                    if (courseSelect) {
                        // Clear all selections first
                        Array.from(courseSelect.options).forEach(option => {
                            option.selected = false;
                        });
                        
                        // Select courses that were stored
                        window.selectedCourseIds.forEach(courseId => {
                            // Try multiple methods to find the option
                            let option = courseSelect.querySelector(`option[value="${courseId}"]`);
                            if (!option) {
                                // Try as number
                                option = Array.from(courseSelect.options).find(opt => parseInt(opt.value) === parseInt(courseId));
                            }
                            if (!option) {
                                // Try as string comparison
                                option = Array.from(courseSelect.options).find(opt => opt.value == courseId);
                            }
                            if (option) {
                                option.selected = true;
                            }
                        });
                        
                        // Trigger change event to ensure UI updates
                        courseSelect.dispatchEvent(new Event('change'));
                    }
                }
            });

            // Cleanup TinyMCE when modals are hidden
            document.getElementById('createTemplateModal').addEventListener('hidden.bs.modal', function () {
                if (tinymce.get('createTemplateContent')) {
                    tinymce.get('createTemplateContent').destroy();
                }
            });

            document.getElementById('editTemplateModal').addEventListener('hidden.bs.modal', function () {
                if (tinymce.get('editTemplateContent')) {
                    tinymce.get('editTemplateContent').destroy();
                }
                // Clear stored course IDs
                window.selectedCourseIds = null;
            });
        });

        function initializeTinyMCE(elementId) {
            tinymce.init({
                selector: '#' + elementId,
                plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
                toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
                height: 400,
                menubar: true,
                branding: false,
                promotion: false,
                content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }',
                setup: function(editor) {
                    editor.on('change', function() {
                        editor.save();
                    });
                }
            });
        }

        function createTemplate() {
            // TinyMCE Content abrufen
            let content = '';
            if (tinymce.get('createTemplateContent')) {
                content = tinymce.get('createTemplateContent').getContent();
            } else {
                content = document.getElementById('createTemplateContent').value;
            }

            // Get selected courses
            const selectedCourses = Array.from(document.getElementById('createTemplateCourses').selectedOptions).map(option => option.value);
            
            const formData = {
                name: document.getElementById('createTemplateName').value,
                type: document.getElementById('createTemplateType').value,
                subject: document.getElementById('createTemplateSubject').value,
                content: content,
                isActive: document.getElementById('createTemplateActive').checked,
                courseIds: selectedCourses,
                fromEmail: document.getElementById('createTemplateFromEmail').value.trim() || null,
                fromName: document.getElementById('createTemplateFromName').value.trim() || null
            };

            fetch('{{ path('app_email_template_create') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Fehler beim Erstellen des Templates: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Fehler:', error);
                alert('Ein Fehler ist aufgetreten.');
            });
        }

        function editTemplate(templateId) {
            fetch(`{{ path('app_email_template_get', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', templateId))
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('editTemplateId').value = data.template.id;
                    document.getElementById('editTemplateName').value = data.template.name;
                    document.getElementById('editTemplateType').value = data.template.type;
                    document.getElementById('editTemplateSubject').value = data.template.subject;
                    document.getElementById('editTemplateContent').value = data.template.content;
                    document.getElementById('editTemplateActive').checked = data.template.isActive;
                    document.getElementById('editTemplateFromEmail').value = data.template.fromEmail || '';
                    document.getElementById('editTemplateFromName').value = data.template.fromName || '';
                    
                    // Store course IDs for later selection (after modal is shown)
                    window.selectedCourseIds = data.template.courses && Array.isArray(data.template.courses) 
                        ? data.template.courses.map(c => c.id.toString())
                        : [];

                    // TinyMCE für Edit-Modal initialisieren
                    setTimeout(() => {
                        initializeTinyMCE('editTemplateContent');
                    }, 100);

                    const modal = new bootstrap.Modal(document.getElementById('editTemplateModal'));
                    modal.show();
                } else {
                    alert('Fehler beim Laden des Templates: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Fehler:', error);
                alert('Ein Fehler ist aufgetreten.');
            });
        }

        function updateTemplate() {
            const templateId = document.getElementById('editTemplateId').value;
            
            // TinyMCE Content abrufen
            let content = '';
            if (tinymce.get('editTemplateContent')) {
                content = tinymce.get('editTemplateContent').getContent();
            } else {
                content = document.getElementById('editTemplateContent').value;
            }

            // Get selected courses
            const selectedCourses = Array.from(document.getElementById('editTemplateCourses').selectedOptions).map(option => option.value);
            
            const formData = {
                name: document.getElementById('editTemplateName').value,
                type: document.getElementById('editTemplateType').value,
                subject: document.getElementById('editTemplateSubject').value,
                content: content,
                body: content, // For compatibility
                isActive: document.getElementById('editTemplateActive').checked,
                courseIds: selectedCourses,
                fromEmail: document.getElementById('editTemplateFromEmail').value.trim() || null,
                fromName: document.getElementById('editTemplateFromName').value.trim() || null
            };

            fetch(`{{ path('app_email_template_update', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', templateId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Fehler beim Aktualisieren des Templates: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Fehler:', error);
                alert('Ein Fehler ist aufgetreten.');
            });
        }

        function deleteTemplate(templateId) {
            fetch(`{{ path('app_email_template_delete', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', templateId), {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Fehler beim Löschen des Templates: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Fehler:', error);
                alert('Ein Fehler ist aufgetreten.');
            });
        }

        function restoreTemplate(templateId) {
            fetch(`{{ path('app_email_template_restore', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', templateId), {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Fehler beim Wiederherstellen des Templates: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Fehler:', error);
                alert('Ein Fehler ist aufgetreten.');
            });
        }

        function insertPlaceholder(textarea, placeholder) {
            // Prüfe ob TinyMCE aktiv ist
            if (tinymce.get(textarea.id)) {
                tinymce.get(textarea.id).insertContent(placeholder);
            } else {
                // Fallback für normales Textarea
                const start = textarea.selectionStart;
                const end = textarea.selectionEnd;
                const text = textarea.value;
                const before = text.substring(0, start);
                const after = text.substring(end, text.length);
                
                textarea.value = before + placeholder + after;
                textarea.focus();
                textarea.setSelectionRange(start + placeholder.length, start + placeholder.length);
            }
        }

        function showPlaceholderInfo() {
            const placeholders = [
                '[[Name]] - Vollständiger Name des Kunden',
                '[[Vorname]] - Vorname des Kunden',
                '[[Nachname]] - Nachname des Kunden',
                '[[E-Mail]] - E-Mail-Adresse des Kunden',
                '[[Telefon]] - Telefonnummer des Kunden',
                '[[Datum]] - Termin-Datum',
                '[[Zeit]] - Termin-Zeit',
                '[[Dauer]] - Termin-Dauer',
                '[[Kurs]] - Name des Kurses',
                '[[Preis]] - Kurspreis (falls vorhanden)',
                '[[KursTyp]] - Typ des Kurses',
                '[[Ort]] - Name des Veranstaltungsorts',
                '[[Adresse]] - Vollständige Adresse',
                '[[PLZ]] - Postleitzahl',
                '[[Stadt]] - Stadt',
                '[[Anfahrt]] - Anfahrtsbeschreibung',
                '[[QR-Code]] - QR-Code für den Termin',
                '[[TerminLink]] - Link zum Termin',
                '[[KalenderLink]] - Link zum Kalendereintrag',
                '[[StornierungsLink]] - Link zur Stornierung',
                '[[BuchungsID]] - Eindeutige Buchungsnummer',
                '[[ValidierungsLink]] - Link zur Terminbestätigung',
                '[[MeineBuchungenLink]] - Link zur Buchungsverwaltung'
            ];
            
            alert('Verfügbare Platzhalter:\n\n' + placeholders.join('\n'));
        }

        function previewTemplate(textareaId) {
            let content = '';
            if (tinymce.get(textareaId)) {
                content = tinymce.get(textareaId).getContent();
            } else {
                content = document.getElementById(textareaId).value;
            }
            
            if (!content.trim()) {
                alert('Bitte geben Sie zuerst einen Inhalt ein.');
                return;
            }
            
            // Erstelle ein neues Fenster für die Vorschau
            const previewWindow = window.open('', '_blank', 'width=800,height=600');
            previewWindow.document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <title>E-Mail Vorschau</title>
                    <style>
                        body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }
                        .preview-header { background: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
                        .preview-content { border: 1px solid #dee2e6; padding: 20px; border-radius: 5px; }
                    </style>
                </head>
                <body>
                    <div class="preview-header">
                        <h3>E-Mail Vorschau</h3>
                        <p><strong>Hinweis:</strong> Dies ist eine Vorschau. Platzhalter werden in der tatsächlichen E-Mail durch echte Daten ersetzt.</p>
                    </div>
                    <div class="preview-content">
                        ${content.replace(/\n/g, '<br>')}
                    </div>
                </body>
                </html>
            `);
            previewWindow.document.close();
        }

        function toggleCourseList(button) {
            const templateId = button.closest('.template-card').querySelector('[data-template-id]').getAttribute('data-template-id');
            const courseList = document.getElementById('courseList-' + templateId);
            const hiddenItems = courseList.querySelectorAll('.course-item.d-none');
            const icon = button.querySelector('i');
            
            if (hiddenItems.length > 0) {
                // Zeige alle Kurse
                hiddenItems.forEach(item => item.classList.remove('d-none'));
                button.innerHTML = '<i class="fas fa-chevron-up me-1"></i>Weniger anzeigen';
                courseList.style.maxHeight = '200px';
            } else {
                // Verstecke zusätzliche Kurse
                const allItems = courseList.querySelectorAll('.course-item');
                allItems.forEach((item, index) => {
                    if (index > 2) {
                        item.classList.add('d-none');
                    }
                });
                button.innerHTML = '<i class="fas fa-chevron-down me-1"></i>Alle anzeigen';
                courseList.style.maxHeight = '120px';
            }
        }
    </script>
{% endblock %}