{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">Logi API</h4>
            <p class="text-muted mb-0">Historia żądań do API playlist</p>
        </div>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <a class="nav-link" href="{$baseUrl}/admin/logs">
                <i class="bi bi-journal-text me-1"></i>Logi aplikacji
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="{$baseUrl}/admin/logs/api">
                <i class="bi bi-cloud-arrow-down me-1"></i>Logi API
            </a>
        </li>
    </ul>

    <!-- Logs Table -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>MAC</th>
                            <th>Kod</th>
                            <th>Urządzenie</th>
                            <th>Użytkownik</th>
                            <th>Status</th>
                            <th>Playlisty</th>
                            <th>IP</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $logs as $log}
                        <tr>
                            <td>
                                <span class="text-nowrap">{$log.created_at|date_format:"%d.%m.%Y"}</span>
                                <br><small class="text-muted">{$log.created_at|date_format:"%H:%M:%S"}</small>
                            </td>
                            <td><code>{$log.mac|default:'-'}</code></td>
                            <td><code>{$log.code|default:'-'}</code></td>
                            <td>
                                {if $log.device_name}
                                <a href="{$baseUrl}/playlists?device_id={$log.device_id}">{$log.device_name}</a>
                                {else}
                                <span class="text-muted">Nieznane</span>
                                {/if}
                            </td>
                            <td>{$log.username|default:'<span class="text-muted">-</span>'}</td>
                            <td>
                                <span class="badge bg-{if $log.response_status == 'success'}success{elseif $log.response_status == 'blocked'}warning{else}danger{/if}">
                                    {$log.response_status}
                                </span>
                            </td>
                            <td>{$log.playlists_count}</td>
                            <td><code>{$log.ip}</code></td>
                        </tr>
                        {foreachelse}
                        <tr>
                            <td colspan="8" class="text-center py-5">
                                <div class="text-muted mb-3">
                                    <i class="bi bi-cloud" style="font-size: 3rem;"></i>
                                </div>
                                <p class="mb-0">Brak logów API</p>
                            </td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>

        {if $pagination.total_pages > 1}
        <div class="card-footer">
            <nav>
                <ul class="pagination pagination-sm mb-0 justify-content-center">
                    <li class="page-item{if !$pagination.has_prev} disabled{/if}">
                        <a class="page-link" href="?page={$pagination.current_page - 1}">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>
                    {foreach $pagination.pages as $page}
                        {if $page === '...'}
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                        {else}
                        <li class="page-item{if $page == $pagination.current_page} active{/if}">
                            <a class="page-link" href="?page={$page}">{$page}</a>
                        </li>
                        {/if}
                    {/foreach}
                    <li class="page-item{if !$pagination.has_next} disabled{/if}">
                        <a class="page-link" href="?page={$pagination.current_page + 1}">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        {/if}
    </div>
</div>
{/block}
