{% extends "layouts/admin.twig" %}

{% block title %}{{ ta.plugin_config|default('Plugin Configuratie: ') }}{{ pluginName }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h2 class="mb-0"><i class="bi bi-gear"></i> {{ ta.plugin_config|default('Plugin Configuratie: ') }}{{ pluginName }}</h2>
    <a href="/admin/plugins" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> {{ ta.back|default('Terug') }}
    </a>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card shadow-sm">
            <div class="card-header">
                <i class="bi bi-sliders"></i> {{ ta.plugin_settings|default('Instellingen') }}
            </div>
            <div class="card-body">
                {% if settingsSchema is empty %}
                    <p class="text-muted mb-0">{{ ta.plugin_no_settings|default('Deze plugin heeft geen instelbare configuratie.') }}</p>
                {% else %}
                <form method="POST" action="/admin/plugins-config?plugin={{ pluginName|url_encode }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    {% for setting in settingsSchema %}
                    {% set settingLabel = setting.resolved_label|default('') ? setting.resolved_label : (setting.label|default(setting.key)) %}
                    {% set settingHelp = setting.resolved_help|default('') ? setting.resolved_help : (setting.help|default('')) %}
                    {% set settingOptions = setting.resolved_options is not null ? setting.resolved_options : (setting.options|default([])) %}
                    <div class="mb-4">
                        <label class="form-label fw-bold" for="setting-{{ setting.key }}">{{ settingLabel }}</label>
                        {% set currentValue = resolvedConfig[setting.key]|default(setting.default) %}
                        {% if setting.type == 'select' %}
                            <select class="form-select" id="setting-{{ setting.key }}" name="setting_{{ setting.key }}">
                                {% for optValue, optLabel in settingOptions %}
                                <option value="{{ optValue }}" {{ currentValue == optValue ? 'selected' : '' }}>{{ optLabel }}</option>
                                {% endfor %}
                            </select>
                        {% elseif setting.type == 'multi-select' %}
                            <div class="d-flex flex-wrap gap-2">
                                {% for optValue, optLabel in settingOptions %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="setting-{{ setting.key }}-{{ optValue }}" name="setting_{{ setting.key }}[]" value="{{ optValue }}" {{ optValue in currentValue ? 'checked' : '' }}>
                                    <label class="form-check-label" for="setting-{{ setting.key }}-{{ optValue }}">{{ optLabel }}</label>
                                </div>
                                {% endfor %}
                            </div>
                        {% elseif setting.type == 'checkbox' %}
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="setting-{{ setting.key }}" name="setting_{{ setting.key }}" {{ currentValue ? 'checked' : '' }}>
                                <label class="form-check-label" for="setting-{{ setting.key }}">{{ settingLabel }}</label>
                            </div>
                        {% elseif setting.type == 'number' %}
                            <input type="number" class="form-control" id="setting-{{ setting.key }}" name="setting_{{ setting.key }}" value="{{ currentValue }}" min="1">
                        {% else %}
                            <input type="text" class="form-control" id="setting-{{ setting.key }}" name="setting_{{ setting.key }}" value="{{ currentValue }}">
                        {% endif %}
                        {% if settingHelp %}
                        <small class="form-text text-muted">{{ settingHelp }}</small>
                        {% endif %}
                    </div>
                    {% endfor %}
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg"></i> {{ ta.save|default('Opslaan') }}
                        </button>
                        <a href="/admin/plugins" class="btn btn-outline-secondary">{{ ta.cancel|default('Annuleren') }}</a>
                    </div>
                </form>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <i class="bi bi-info-circle"></i> {{ ta.plugin_info|default('Plugin informatie') }}
            </div>
            <div class="card-body">
                <table class="table table-sm mb-0">
                    <tr><td class="text-muted">{{ ta.plugin_name|default('Naam') }}</td><td>{{ pluginJson.name|default(pluginName) }}</td></tr>
                    <tr><td class="text-muted">{{ ta.version|default('Versie') }}</td><td>{{ pluginJson.version|default('-') }}</td></tr>
                    <tr><td class="text-muted">{{ ta.author|default('Auteur') }}</td><td>{{ pluginJson.author|default('-') }}</td></tr>
                    <tr><td class="text-muted">{{ ta.type|default('Type') }}</td><td><span class="badge bg-{{ pluginJson.type == 'system' ? 'primary' : 'success' }}">{{ pluginJson.type|default('content') }}</span></td></tr>
                </table>
            </div>
        </div>
        {% if pluginJson.description %}
        <div class="card shadow-sm">
            <div class="card-header">
                <i class="bi bi-card-text"></i> {{ ta.description|default('Beschrijving') }}
            </div>
            <div class="card-body">
                <p class="card-text">{{ pluginJson.description }}</p>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}