{block content}

<!-- DataTables CSS s Bootstrap 5 vzhledem -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.6/css/dataTables.bootstrap5.min.css">

<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h3 mb-0">Přehled databází</h2>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm p-3 bg-white border-start border-primary border-4">
                <div class="text-muted small">Celkem databází</div>
                <div class="fs-4 fw-bold text-primary">{$celkemCount} ks</div>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm p-3 bg-white border-start border-success border-4">
                <div class="text-muted small">Aktivní</div>
                <div class="fs-4 fw-bold text-success">{$aktivniCount} ks</div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0 p-3 bg-white">
        <div class="table-responsive">
            <table class="table table-hover align-middle w-100" id="databaze-table">
                <thead class="table-light">
                    <tr>
                        <th>Databáze</th>
                        <th>Server</th>
                        <th>Login</th>
                        <th class="text-center">Firma ID</th>
                        <th>Poslední přihlášení</th>
                        <th class="text-center">Stav</th>
                        <th class="text-center">Role</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $loginy as $login}
                        <tr n:class="!$login->AKTIVNI ? 'table-light text-muted'">
                            <td class="fw-bold" data-order="{$login->DATABASE}">
                                <i class="bi bi-database me-1 text-muted"></i>{$login->DATABASE}
                            </td>
                            <td>{$login->SERVER}</td>
                            <td>
                                <a href="mailto:{$login->EMAIL}" class="text-decoration-none">{$login->EMAIL}</a>
                            </td>
                            <td class="text-center">{$login->FIRMA_ID}</td>
                            <td data-order="{if $login->POSLEDNI_PRIHLASENI}{$login->POSLEDNI_PRIHLASENI|date:'YmdHis'}{/if}">
                                {if $login->POSLEDNI_PRIHLASENI}
                                    {$login->POSLEDNI_PRIHLASENI|date:'d.m.Y H:i'}
                                {else}
                                    <span class="text-muted">—</span>
                                {/if}
                            </td>
                            <td class="text-center" data-order="{$login->AKTIVNI}">
                                {if $login->AKTIVNI}
                                    <span class="badge bg-success">Aktivní</span>
                                {else}
                                    <span class="badge bg-secondary">Neaktivní</span>
                                {/if}
                            </td>
                            <td class="text-center" data-order="{$login->IS_ADMIN}">
                                {if $login->IS_ADMIN}
                                    <span class="badge bg-dark">Admin</span>
                                {else}
                                    <span class="badge bg-light text-dark border">Uživatel</span>
                                {/if}
                            </td>
                        </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/datatables.net@1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.6/js/dataTables.bootstrap5.min.js"></script>

{syntax off}
<script>
$(document).ready(function() {
    $('#databaze-table').DataTable({
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/cs.json'
        },
        order: [[0, 'asc']],
        pageLength: 25
    });
});
</script>
{/syntax}