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

{% block title %}Contatti e azioni — {{ bot.name }}{% endblock %}

{% block backend %}
<div style="max-width:820px">
    <div class="page-head page-head--row">
        <div>
            <h1>Contatti e azioni</h1>
            <p class="muted">Recapiti e azioni che <b>{{ bot.name }}</b> propone da solo quando servono al cliente (parlare con lo staff, prenotare, aprire una pagina).</p>
        </div>
        <a href="{{ path('bot_show', {id: bot.id}) }}" class="btn btn--sm btn--ghost"><i class="fa-solid fa-arrow-left"></i> Torna all'assistente</a>
    </div>

    {# Elenco azioni esistenti #}
    {% if azioni is empty %}
        <div class="card empty-state" style="margin-bottom:1.5rem">
            <p class="muted">Non hai ancora aggiunto contatti o azioni.</p>
            <p class="muted" style="font-size:.9rem">Aggiungine uno qui sotto: comparirà nelle risposte del bot quando è utile.</p>
        </div>
    {% else %}
        <div class="card" style="padding:0; margin-bottom:1.5rem; overflow:hidden">
            {% for a in azioni %}
                <div style="display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; {% if not loop.last %}border-bottom:1px solid var(--line){% endif %}">
                    <span class="action-ico"><i class="{{ a.type.icon }}"></i></span>
                    <div style="flex:1; min-width:0">
                        <div style="font-weight:700">
                            {{ a.label }}
                            {% if not a.active %}<span class="pill pill--off" style="margin-left:.4rem">Disattivata</span>{% endif %}
                        </div>
                        <div class="muted" style="font-size:.9rem; word-break:break-word">{{ a.value }}</div>
                        {% if a.hint %}<div class="muted" style="font-size:.82rem; margin-top:.15rem"><i class="fa-solid fa-circle-info"></i> {{ a.hint }}</div>{% endif %}
                    </div>
                    <div style="display:flex; gap:.4rem; flex-shrink:0">
                        <a href="{{ path('bot_action_edit', {id: bot.id, aid: a.id}) }}" class="btn btn--sm btn--ghost"><i class="fa-solid fa-pen"></i></a>
                        <form method="post" action="{{ path('bot_action_delete', {id: bot.id, aid: a.id}) }}" class="inline-form" onsubmit="return confirm('Eliminare questa azione?')">
                            <input type="hidden" name="_token" value="{{ csrf_token('del_action_' ~ a.id) }}">
                            <button type="submit" class="btn btn--sm btn--danger"><i class="fa-solid fa-trash"></i></button>
                        </form>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    {# Form aggiungi / modifica #}
    <div class="card" style="padding:1.5rem">
        <h3 style="font-weight:800; margin-bottom:1rem">
            {% if edit %}<i class="fa-solid fa-pen"></i> Modifica azione{% else %}<i class="fa-solid fa-plus"></i> Aggiungi un contatto o azione{% endif %}
        </h3>

        {{ form_start(form) }}
            <div class="field">
                {{ form_label(form.label) }}
                {{ form_widget(form.label) }}
                <div class="field__error">{{ form_errors(form.label) }}</div>
            </div>
            <div class="grid grid--2" style="gap:14px">
                <div class="field">
                    {{ form_label(form.type) }}
                    {{ form_widget(form.type) }}
                </div>
                <div class="field">
                    {{ form_label(form.value) }}
                    {{ form_widget(form.value) }}
                    <div class="field__error">{{ form_errors(form.value) }}</div>
                </div>
            </div>
            <div class="field">
                {{ form_label(form.hint) }}
                {{ form_widget(form.hint) }}
                <p class="muted" style="font-size:.82rem; margin-top:6px">Aiuta il bot a capire quando proporla. Lascia vuoto se è sempre utile.</p>
            </div>
            <label class="toggle" style="margin:.4rem 0 1rem">
                {{ form_widget(form.active) }}
                <span class="toggle__track"><span class="toggle__dot"></span></span>
                <span class="toggle__text"><span class="toggle__title">Attiva</span></span>
            </label>
            <div style="display:flex; gap:.6rem; flex-wrap:wrap">
                <button type="submit" class="btn"><i class="fa-solid fa-floppy-disk"></i> {{ edit ? 'Salva modifiche' : 'Aggiungi' }}</button>
                {% if edit %}<a href="{{ path('bot_actions', {id: bot.id}) }}" class="btn btn--ghost">Annulla</a>{% endif %}
            </div>
        {{ form_end(form) }}
    </div>
</div>
{% endblock %}