{% extends 'base.html' %}

{% block title %}{{ title }} - Stiftung{% endblock %}

{% block breadcrumb %}
<a href="{% url 'stiftung:home' %}">Stiftungsverwaltung</a>
<span class="mx-1">/</span>
<a href="{% url 'stiftung:administration' %}">Administration</a>
<span class="mx-1">/</span>
{{ title }}
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-envelope"></i>
                        {{ title }}
                    </h3>
                    <a href="{% url 'stiftung:administration' %}" class="btn btn-sm btn-secondary">
                        <i class="fas fa-arrow-left"></i> Zurück
                    </a>
                </div>

                <div class="card-body">
                    {% if test_result %}
                    <div class="alert alert-{% if test_result.success %}success{% else %}danger{% endif %} alert-dismissible fade show">
                        <i class="fas fa-{% if test_result.success %}check-circle{% else %}exclamation-triangle{% endif %} me-1"></i>
                        {{ test_result.message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                    {% endif %}

                    <form method="post">
                        {% csrf_token %}

                        {% for setting in imap_settings %}
                        <div class="mb-3">
                            <label for="setting_{{ setting.key }}" class="form-label">
                                <strong>{{ setting.display_name }}</strong>
                            </label>
                            {% if setting.description %}
                            <div class="form-text mb-1">{{ setting.description }}</div>
                            {% endif %}

                            {% if setting.setting_type == 'boolean' %}
                            <div class="form-check form-switch">
                                <input type="checkbox"
                                       class="form-check-input"
                                       id="setting_{{ setting.key }}"
                                       name="setting_{{ setting.key }}"
                                       value="True"
                                       {% if setting.get_typed_value %}checked{% endif %}>
                                <label class="form-check-label" for="setting_{{ setting.key }}">Aktiviert</label>
                            </div>

                            {% elif setting.setting_type == 'password' %}
                            <div class="input-group">
                                <input type="password"
                                       class="form-control"
                                       id="setting_{{ setting.key }}"
                                       name="setting_{{ setting.key }}"
                                       value="{{ setting.value }}"
                                       placeholder="{% if setting.value %}••••••••{% else %}Passwort eingeben{% endif %}">
                                <button type="button" class="btn btn-outline-secondary" onclick="togglePassword(this)" title="Passwort anzeigen">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>

                            {% elif setting.setting_type == 'number' %}
                            <input type="number"
                                   class="form-control"
                                   id="setting_{{ setting.key }}"
                                   name="setting_{{ setting.key }}"
                                   value="{{ setting.value }}">

                            {% else %}
                            <input type="text"
                                   class="form-control"
                                   id="setting_{{ setting.key }}"
                                   name="setting_{{ setting.key }}"
                                   value="{{ setting.value }}">
                            {% endif %}
                        </div>
                        {% endfor %}

                        <hr>
                        <div class="d-flex gap-2">
                            <button type="submit" name="action" value="save" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Speichern
                            </button>
                            <button type="submit" name="action" value="test" class="btn btn-outline-primary">
                                <i class="fas fa-plug me-1"></i> Verbindung testen
                            </button>
                            <a href="{% url 'stiftung:email_eingang_list' %}" class="btn btn-outline-secondary ms-auto">
                                <i class="fas fa-inbox me-1"></i> Zum Posteingang
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Info sidebar -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-info-circle"></i> Hinweise
                </div>
                <div class="card-body" style="font-size: 0.85rem;">
                    <p>Konfigurieren Sie hier die IMAP-Verbindung zum E-Mail-Server. Eingehende E-Mails werden automatisch alle <strong>15 Minuten</strong> abgerufen und den Destinatären zugeordnet.</p>
                    <hr>
                    <p class="mb-1"><strong>Typische Einstellungen:</strong></p>
                    <ul class="mb-0" style="font-size: 0.8rem;">
                        <li>SSL/TLS: Port <code>993</code></li>
                        <li>Unverschlüsselt: Port <code>143</code></li>
                    </ul>
                    <hr>
                    <p class="mb-0"><i class="fas fa-shield-alt text-success me-1"></i> Das Passwort wird in der Datenbank gespeichert. Umgebungsvariablen (<code>IMAP_HOST</code>, etc.) werden als Fallback verwendet, wenn hier keine Werte gesetzt sind.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function togglePassword(btn) {
    const input = btn.parentElement.querySelector('input');
    const icon = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}
</script>
{% endblock %}