{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">Definicje ustawień</h4>
            <p class="text-muted mb-0">Zarządzaj parametrami dostępnymi dla urządzeń</p>
        </div>
        <a href="{$baseUrl}/settings/add-definition" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i>Dodaj definicję
        </a>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small text-muted">Grupa</label>
                    <select name="group" class="form-select" onchange="this.form.submit()">
                        <option value="">Wszystkie grupy</option>
                        {foreach $groups as $group}
                        <option value="{$group.group_name}" {if $filterGroup == $group.group_name}selected{/if}>
                            {$groupLabels[$group.group_name]|default:$group.group_name} ({$group.count})
                        </option>
                        {/foreach}
                    </select>
                </div>
                
                {if $filterGroup}
                <div class="col-auto">
                    <a href="{$baseUrl}/settings/definitions" class="btn btn-outline-secondary">
                        <i class="bi bi-x-lg"></i>
                    </a>
                </div>
                {/if}
            </form>
        </div>
    </div>

    <!-- Definitions grouped -->
    {foreach $grouped as $groupName => $groupDefs}
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="bi bi-folder me-2"></i>
                {$groupLabels[$groupName]|default:$groupName}
                <span class="badge bg-secondary ms-2">{count($groupDefs)}</span>
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Klucz</th>
                            <th>Etykieta</th>
                            <th>Typ</th>
                            <th>Min. poziom</th>
                            <th>Domyślna wartość</th>
                            <th>Opcje</th>
                            <th>Status</th>
                            <th class="text-end">Akcje</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $groupDefs as $def}
                        <tr>
                            <td><code>{$def.key}</code></td>
                            <td>
                                <strong>{$def.label}</strong>
                                {if $def.description}
                                <br><small class="text-muted">{$def.description|truncate:50}</small>
                                {/if}
                            </td>
                            <td>
                                <span class="badge bg-{if $def.type == 'boolean'}info{elseif $def.type == 'int'}primary{elseif $def.type == 'long'}warning{else}secondary{/if}">
                                    {$def.type}
                                </span>
                            </td>
                            <td>
                                <span class="badge bg-{if $def.min_scope == 'global'}danger{elseif $def.min_scope == 'reseller'}warning{elseif $def.min_scope == 'user'}info{else}success{/if}">
                                    {$def.min_scope}
                                </span>
                            </td>
                            <td>
                                {if $def.type == 'boolean'}
                                    {if $def.default_value == 'true' || $def.default_value == '1'}
                                    <span class="badge bg-success">true</span>
                                    {else}
                                    <span class="badge bg-secondary">false</span>
                                    {/if}
                                {else}
                                    <code>{$def.default_value|default:'-'}</code>
                                {/if}
                            </td>
                            <td>
                                {if $def.options}
                                <span class="badge bg-info" title="{count($def.options)} opcji">
                                    {count($def.options)} opcji
                                </span>
                                {else}
                                <span class="text-muted">-</span>
                                {/if}
                            </td>
                            <td>
                                {if $def.is_active}
                                <span class="badge bg-success">Aktywna</span>
                                {else}
                                <span class="badge bg-secondary">Nieaktywna</span>
                                {/if}
                            </td>
                            <td class="text-end">
                                <div class="btn-group btn-group-sm">
                                    <a href="{$baseUrl}/settings/edit-definition?id={$def.id}" class="btn btn-outline-primary" title="Edytuj">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button type="button" class="btn btn-outline-danger delete-btn" 
                                            data-id="{$def.id}" data-key="{$def.key}" title="Usuń">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {foreachelse}
    <div class="alert alert-info">
        <i class="bi bi-info-circle me-2"></i>
        Brak definicji ustawień.
    </div>
    {/foreach}
</div>

<!-- Delete Form -->
<form id="deleteForm" method="post" action="{$baseUrl}/settings/delete-definition" 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 key = this.dataset.key;
        
        Swal.fire({
            title: 'Potwierdź usunięcie',
            html: 'Czy na pewno chcesz usunąć definicję <strong>"' + key + '"</strong>?<br><small class="text-muted">Zostaną usunięte wszystkie wartości tego ustawienia.</small>',
            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}
