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

{% block title %}{{ title }} - {{ platformName }}{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">{{ title }}</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">{{ __('layout.menu.dashboard') }}</a></li>
        <li class="breadcrumb-item"><a href="{{ url('admin/themes') }}">Temas</a></li>
        <li class="breadcrumb-item active">Personalizar</li>
    </ol>

    {% if session_has('success') or current_uri matches '/success=1/' %}
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        Configurações salvas com sucesso!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endif %}

    <div class="row">
        <div class="col-lg-8">
            <form action="{{ url('admin/themes/' ~ theme ~ '/customize/save') }}" method="POST">
                {% for section in config.sections %}
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <i class="bi bi-gear-fill me-1"></i>
                        <strong>{{ section.title }}</strong>
                    </div>
                    <div class="card-body">
                        {% for field in section.fields %}
                        <div class="mb-3 row align-items-center">
                            <label for="{{ field.id }}" class="col-sm-4 col-form-label">{{ field.label }}</label>
                            <div class="col-sm-8">
                                {% if field.type == 'color' %}
                                    <div class="d-flex align-items-center">
                                        <input type="color" class="form-control form-control-color me-2" id="{{ field.id }}" name="{{ field.id }}" value="{{ field.value }}" title="Escolha a cor">
                                        <code>{{ field.value }}</code>
                                    </div>
                                {% elseif field.type == 'text' %}
                                    <input type="text" class="form-control" id="{{ field.id }}" name="{{ field.id }}" value="{{ field.value }}">
                                {% elseif field.type == 'switch' %}
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="{{ field.id }}" name="{{ field.id }}" value="1" {{ field.value ? 'checked' : '' }}>
                                    </div>
                                {% elseif field.type == 'select' %}
                                    <select class="form-select" id="{{ field.id }}" name="{{ field.id }}">
                                        {% for val, label in field.options %}
                                        <option value="{{ val }}" {{ field.value == val ? 'selected' : '' }}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                {% endif %}
                                {% if field.description %}
                                <div class="form-text">{{ field.description }}</div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}

                <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-5">
                    <a href="{{ url('admin/themes') }}" class="btn btn-secondary">Cancelar</a>
                    <button type="submit" class="btn btn-primary">Salvar Alterações</button>
                </div>
            </form>
        </div>

        <div class="col-lg-4">
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <i class="bi bi-info-circle me-1"></i>
                    Dica de Uso
                </div>
                <div class="card-body">
                    <p>Essas configurações são injetadas automaticamente no seu tema.</p>
                    <p>Você pode acessá-las no Twig usando:</p>
                    <pre class="bg-light p-2 rounded"><code>{{ '{{ theme_settings.campo_id }}' }}</code></pre>
                    <hr>
                    <h6>Exemplo de CSS dinâmico:</h6>
                    <pre class="bg-light p-2 rounded small"><code>&lt;style&gt;
  :root {
    --primary-color: {{ '{{ theme_settings.primary_color }}' }};
  }
&lt;/style&gt;</code></pre>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}