{extends file="layout.tpl"}

{block name="content"}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Zestawy ustawień (Presety)</h4>
            <p class="text-muted mb-0">Gotowe zestawy parametrów do szybkiego aplikowania</p>
        </div>
        <a href="{$baseUrl}/settings/add-preset" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i>Dodaj preset
        </a>
    </div>

    <!-- Presets -->
    <div class="row">
        {foreach $presets as $preset}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-collection me-2"></i>
                        {$preset.name}
                    </h5>
                    {if $preset.is_active}
                    <span class="badge bg-success">Aktywny</span>
                    {else}
                    <span class="badge bg-secondary">Nieaktywny</span>
                    {/if}
                </div>
                <div class="card-body">
                    {if $preset.description}
                    <p class="text-muted">{$preset.description}</p>
                    {/if}
                    <p class="mb-2">
                        <strong>{$preset.items_count}</strong> ustawień w presecie
                    </p>
                    <small class="text-muted">
                        Utworzony przez: {$preset.created_by_name|default:'System'}<br>
                        {$preset.created_at|date_format:"%d.%m.%Y %H:%M"}
                    </small>
                </div>
                <div class="card-footer">
                    <div class="btn-group w-100">
                        <a href="{$baseUrl}/settings/edit-preset?id={$preset.id}" class="btn btn-outline-primary">
                            <i class="bi bi-pencil me-1"></i>Edytuj
                        </a>
                        <button type="button" class="btn btn-outline-danger delete-btn" 
                                data-id="{$preset.id}" data-name="{$preset.name|escape:'html'}">
                            <i class="bi bi-trash me-1"></i>Usuń
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {foreachelse}
        <div class="col-12">
            <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                Brak presetów. <a href="{$baseUrl}/settings/add-preset">Dodaj pierwszy preset</a>.
            </div>
        </div>
        {/foreach}
    </div>
</div>

<!-- Delete Form -->
<form id="deleteForm" method="post" action="{$baseUrl}/settings/delete-preset" style="display:none;">
    <input type="hidden" name="csrf_token" value="{$csrfToken}">
    <input type="hidden" name="id" id="deleteId">
</form>
{/block}

{block name="scripts"}
{literal}
<script>
document.querySelectorAll('.delete-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var id = this.dataset.id;
        var name = this.dataset.name;
        
        Swal.fire({
            title: 'Potwierdź usunięcie',
            html: 'Czy na pewno chcesz usunąć preset <strong>"' + name + '"</strong>?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Usuń',
            cancelButtonText: 'Anuluj',
            confirmButtonColor: '#dc3545',
            background: '#1a1d21',
            color: '#e1e1e1'
        }).then(function(result) {
            if (result.isConfirmed) {
                document.getElementById('deleteId').value = id;
                document.getElementById('deleteForm').submit();
            }
        });
    });
});
</script>
{/literal}
{/block}
