{% extends 'admin/layout.html.twig' %}
{% import 'admin/_macros.html.twig' as m %}
{% block title %}Installations{% endblock %}
{% block main %}

<div class="adm-section-header" style="margin-bottom:16px">
    <h1 style="font-size:1.3rem;margin:0">Photos d'installations</h1>
    <a href="{{ path('admin_installations_new') }}" class="btn btn-primary">+ Ajouter une photo</a>
</div>
<p style="font-size:.83rem;color:#6f6863;margin-bottom:16px">Glissez-déposez les lignes pour modifier l'ordre d'affichage.</p>

<div class="adm-card" style="padding:0;overflow:hidden">
    <div class="adm-table-wrap">
    <table class="adm-table adm-table-mob">
        <thead>
            <tr>
                <th style="width:36px"></th>
                <th style="width:90px">Photo</th>
                <th>Titre</th>
                <th style="width:80px;text-align:center">Visible</th>
                <th style="width:90px"></th>
            </tr>
        </thead>
        <tbody id="sortable-body">
        {% for inst in installations %}
        <tr data-id="{{ inst.id }}">
            <td class="adm-td-drag" title="Déplacer" style="cursor:grab;color:#bbb;font-size:1.2rem;user-select:none;text-align:center">⠿</td>
            <td class="adm-td-thumb">
                <img src="/{{ inst.filename }}" style="height:48px;width:72px;object-fit:cover;border-radius:6px;display:block">
            </td>
            <td class="adm-td-main">{{ inst.title }}</td>
            <td class="adm-td-status" style="text-align:center">
                {% if inst.isActive %}<span class="badge badge-yes">✓</span>{% else %}<span class="badge badge-no">✗</span>{% endif %}
            </td>
            <td class="adm-td-actions" style="text-align:right">
                <div style="display:flex;gap:4px;justify-content:flex-end">
                    {{ m.btn_edit(path('admin_installations_edit', {id: inst.id})) }}
                    {{ m.btn_del(path('admin_installations_delete', {id: inst.id}), 'del-inst-' ~ inst.id, 'Supprimer cette photo ?') }}
                </div>
            </td>
        </tr>
        {% else %}
        <tr>
            <td colspan="5" style="text-align:center;color:#aaa;padding:40px">
                Aucune photo — <a href="{{ path('admin_installations_new') }}">Ajouter la première</a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>
<script>
(function () {
    var body = document.getElementById('sortable-body');
    if (!body || typeof Sortable === 'undefined') return;
    Sortable.create(body, {
        handle: '.adm-td-drag',
        animation: 150,
        ghostClass: 'sortable-ghost',
        onEnd: function () {
            var ids = Array.from(body.querySelectorAll('tr[data-id]')).map(function (r) {
                return parseInt(r.dataset.id, 10);
            });
            fetch('{{ path('admin_installations_sort') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ ids: ids })
            });
        }
    });
})();
</script>
<style>.sortable-ghost{opacity:.4;background:#f4f1ee}.adm-td-drag:hover{color:#691E18}</style>
{% endblock %}