{block content}

<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="mb-3">
        <h2 class="h3 mb-1">Databáze</h2>
        <p class="text-muted small mb-0">
            Jen databáze označené metadaty <code>kufrik_app=1</code> (bez systémových DB a <code>kufrik_master</code>).
        </p>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-4 col-lg-3">
            <div class="card border-0 shadow-sm p-3 bg-white border-start border-primary border-4">
                <div class="text-muted small">Databází</div>
                <div class="fs-4 fw-bold text-primary">{$celkemCount} 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 table-cards align-middle w-100" id="databaze-table">
                <thead class="table-light">
                    <tr>
                        <th>Databáze</th>
                        <th>Server</th>
                        <th class="text-center">Firem</th>
                        <th class="text-center">Uživatelů</th>
                        <th class="text-end" data-orderable="false">Akce</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $databases as $db}
                        <tr>
                            <td data-label="Databáze" class="fw-bold">
                                <i class="bi bi-database me-1 text-muted"></i>{$db->DATABASE}
                            </td>
                            <td data-label="Server">{$db->SERVER}</td>
                            <td data-label="Firem" class="text-center">{$db->FIRMY}</td>
                            <td data-label="Uživatelů" class="text-center">{$db->USERS}</td>
                            <td class="text-end text-nowrap cell-actions">
                                <a n:href="Admin:firmy, db => $db->DATABASE" class="btn btn-sm btn-outline-primary me-1" title="Firmy v databázi">
                                    <i class="bi bi-building"></i>
                                </a>
                                <a n:href="Admin:uzivatele, db => $db->DATABASE" class="btn btn-sm btn-outline-secondary" title="Uživatelé databáze">
                                    <i class="bi bi-people"></i>
                                </a>
                            </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,
        autoWidth: false
    });
});
</script>
{/syntax}