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

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

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-cogs"></i>
                        {{ title }}
                    </h3>
                    <a href="{% url 'stiftung:administration' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i>
                        Back to Administration
                    </a>
                </div>
                
                <div class="card-body">
                    <form method="post" class="settings-form">
                        {% csrf_token %}
                        
                        {% for category_name, settings in categories.items %}
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h4 class="mb-0">
                                        <i class="fas fa-{% if category_name == 'Paperless Integration' %}file-alt{% elif category_name == 'E-Mail / IMAP' %}envelope{% elif category_name == 'System' %}cog{% elif category_name == 'Database' %}database{% else %}folder{% endif %}"></i>
                                        {{ category_name }}
                                    </h4>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        {% for setting in settings %}
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label for="setting_{{ setting.key }}" class="form-label">
                                                        <strong>{{ setting.display_name }}</strong>
                                                        {% if setting.is_system %}
                                                            <span class="badge badge-secondary ml-1">System</span>
                                                        {% endif %}
                                                    </label>
                                                    
                                                    {% if setting.description %}
                                                        <small class="form-text text-muted">{{ setting.description }}</small>
                                                    {% endif %}
                                                    
                                                    {% if setting.setting_type == 'boolean' %}
                                                        <div class="form-check">
                                                            <input type="checkbox"
                                                                   class="form-check-input"
                                                                   id="setting_{{ setting.key }}"
                                                                   name="setting_{{ setting.key }}"
                                                                   value="True"
                                                                   {% if setting.get_typed_value %}checked{% endif %}
                                                                   {% if setting.is_system %}disabled{% endif %}>
                                                            <label class="form-check-label" for="setting_{{ setting.key }}">
                                                                Enabled
                                                            </label>
                                                        </div>
                                                        {% if not setting.get_typed_value %}
                                                            <input type="hidden" name="setting_{{ setting.key }}" value="False">
                                                        {% endif %}
                                                    {% elif setting.setting_type == 'password' %}
                                                        <input type="password"
                                                               class="form-control"
                                                               id="setting_{{ setting.key }}"
                                                               name="setting_{{ setting.key }}"
                                                               value="{{ setting.value }}"
                                                               {% if setting.is_system %}readonly{% endif %}>
                                                    {% elif setting.setting_type == 'integer' or setting.setting_type == 'number' %}
                                                        <input type="number"
                                                               class="form-control"
                                                               id="setting_{{ setting.key }}"
                                                               name="setting_{{ setting.key }}"
                                                               value="{{ setting.get_typed_value }}"
                                                               {% if setting.is_system %}readonly{% endif %}>
                                                    {% elif setting.setting_type == 'text' or setting.setting_type == 'url' %}
                                                        <input type="{% if setting.setting_type == 'url' %}url{% else %}text{% endif %}"
                                                               class="form-control"
                                                               id="setting_{{ setting.key }}"
                                                               name="setting_{{ setting.key }}"
                                                               value="{{ setting.value }}"
                                                               {% if setting.is_system %}readonly{% endif %}>
                                                    {% else %}
                                                        <textarea class="form-control" 
                                                                  id="setting_{{ setting.key }}" 
                                                                  name="setting_{{ setting.key }}"
                                                                  rows="3"
                                                                  {% if setting.is_system %}readonly{% endif %}>{{ setting.value }}</textarea>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% empty %}
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i>
                                No configuration settings are available. 
                                <a href="{% url 'stiftung:administration' %}" class="alert-link">Initialize settings first</a>.
                            </div>
                        {% endfor %}
                        
                        {% if categories %}
                            <div class="text-right mt-4">
                                <button type="button" class="btn btn-secondary mr-2" onclick="window.history.back()">
                                    <i class="fas fa-times"></i>
                                    Cancel
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i>
                                    Save Settings
                                </button>
                            </div>
                        {% endif %}
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.settings-form .card {
    border-left: 4px solid #007bff;
}

.settings-form .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.settings-form .form-group label {
    font-weight: 500;
}

.settings-form .badge {
    font-size: 0.7em;
}

.settings-form input[readonly],
.settings-form textarea[readonly] {
    background-color: #f8f9fa;
    opacity: 0.8;
}

.settings-form .form-check {
    padding-top: 0.375rem;
}
</style>
{% endblock %}