{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.image_compressor.title'|trans }}{% endblock %}

{% block body %}
<div class="container-fluid px-3 px-lg-4 py-4">
    <div class="admin-card p-4 mb-4">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start gap-3">
            <div>
                <h1 class="h3 gradient-text fw-bold mb-2">
                    <i class="bi bi-file-earmark-image me-2"></i>{{ 'admin.image_compressor.title'|trans }}
                </h1>
                <p class="text-muted mb-0">{{ 'admin.image_compressor.description'|trans }}</p>
            </div>
            <a href="{{ path('app_admin_module_image_compressor_create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-1"></i>{{ 'admin.image_compressor.add_new_setting'|trans }}
            </a>
        </div>
    </div>

    <div class="admin-card p-4 mb-4">
        <h2 class="h6 fw-bold mb-2">
            <i class="bi bi-lightning-charge me-1"></i>{{ 'admin.image_compressor.batch_button'|trans }}
        </h2>
        <p class="text-muted small mb-3">{{ 'admin.image_compressor.batch_hint'|trans }}</p>
        <form method="post" action="{{ path('app_admin_module_image_compressor_batch') }}" class="row g-2 align-items-end">
            <input type="hidden" name="_token" value="{{ csrf_token('image_compressor_batch') }}">
            <div class="col-sm-4 col-md-3">
                <label class="form-label small text-muted mb-0" for="batch-max-files">{{ 'admin.image_compressor.batch_max_label'|trans }}</label>
                <input type="number" class="form-control" id="batch-max-files" name="max_files" value="200" min="1" max="500">
            </div>
            <div class="col-sm-auto">
                <button type="submit" class="btn btn-outline-primary">
                    <i class="bi bi-play-fill me-1"></i>{{ 'admin.image_compressor.batch_button'|trans }}
                </button>
            </div>
        </form>
        <p class="small text-muted mt-3 mb-0"><code>php bin/console terraflow:images:compress</code> · <code>--limit=500</code></p>
    </div>

    {% if settings is not empty %}
    <div class="admin-card p-4 mb-4">
        <label class="form-label small text-muted" for="compressor-search">{{ 'admin.search'|trans }}</label>
        <input type="search" id="compressor-search" class="form-control" placeholder="{{ 'admin.search'|trans }}" autocomplete="off">
    </div>
    {% endif %}

    {% if settings is empty %}
        <div class="admin-card p-5 text-center text-muted">
            <i class="bi bi-sliders display-6 d-block mb-3"></i>
            {{ 'admin.image_compressor.empty'|trans }}
        </div>
    {% else %}
        <div class="admin-card p-0 overflow-hidden">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="settingsTable">
                    <thead class="table-light">
                        <tr>
                            <th>{{ 'admin.image_compressor.file_format'|trans }}</th>
                            <th class="text-end">{{ 'form.image_compressor.quality'|trans }}</th>
                            <th class="text-end">{{ 'form.image_compressor.png_level'|trans }}</th>
                            <th class="text-center">{{ 'form.image_compressor.strip_metadata'|trans }}</th>
                            <th>{{ 'admin.image_compressor.active'|trans }}</th>
                            <th class="text-end">{{ 'admin.custom_fields.actions'|trans }}</th>
                        </tr>
                    </thead>
                    <tbody id="settingsTableBody">
                        {% for setting in settings %}
                            <tr>
                                <td><code>{{ setting.fileFormat }}</code></td>
                                <td class="text-end small">{{ setting.quality }}</td>
                                <td class="text-end small">{{ setting.pngLevel }}</td>
                                <td class="text-center">
                                    {% if setting.stripMetadata %}
                                        <span class="badge bg-info text-dark">{{ 'admin.yes'|trans }}</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ 'admin.no'|trans }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if setting.active %}
                                        <span class="badge bg-success">{{ 'admin.yes'|trans }}</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ 'admin.no'|trans }}</span>
                                    {% endif %}
                                </td>
                                <td class="text-end">
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ path('app_admin_module_image_compressor_edit', { id: setting.id }) }}" class="btn btn-outline-primary" title="{{ 'admin.edit'|trans }}">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>
                                        <button type="button" class="btn btn-outline-danger" title="{{ 'admin.delete'|trans }}" onclick="handleDeleteSetting('{{ path('app_admin_module_image_compressor_delete', {id: setting.id}) }}', '{{ setting.fileFormat|e('js') }}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}
</div>

<script>
    (function () {
        var search = document.getElementById('compressor-search');
        if (!search) return;
        search.addEventListener('input', function () {
            var q = this.value.toLowerCase();
            document.querySelectorAll('#settingsTableBody tr').forEach(function (row) {
                row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
            });
        });
    })();

    async function handleDeleteSetting(url, fileFormat) {
        const confirmed = await showDeleteConfirm(`{{ 'admin.image_compressor.delete_confirm_prefix'|trans }} "${fileFormat}"`);
        if (confirmed) {
            window.location.href = url;
        }
    }
</script>
{% endblock %}