{extends file="layout.tpl"}

{block name="content"}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Historia logowań</h4>
            <p class="text-muted mb-0">Pełna historia logowań do systemu</p>
        </div>
        <a href="{$baseUrl}/reports/export/logins" class="btn btn-outline-primary">
            <i class="bi bi-download me-1"></i>Eksport CSV
        </a>
    </div>

    <!-- Statystyki -->
    <div class="row g-4 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-muted mb-1">Wszystkie logowania (30 dni)</p>
                            <h4 class="mb-0">{$stats.logins.total|default:0}</h4>
                        </div>
                        <div class="text-primary"><i class="bi bi-door-open fs-1"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-muted mb-1">Udane</p>
                            <h4 class="mb-0 text-success">{$stats.logins.successful|default:0}</h4>
                        </div>
                        <div class="text-success"><i class="bi bi-check-circle fs-1"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-muted mb-1">Nieudane</p>
                            <h4 class="mb-0 text-danger">{$stats.logins.failed|default:0}</h4>
                        </div>
                        <div class="text-danger"><i class="bi bi-x-circle fs-1"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-muted mb-1">Unikalne IP</p>
                            <h4 class="mb-0">{$stats.logins.unique_ips|default:0}</h4>
                        </div>
                        <div class="text-info"><i class="bi bi-globe fs-1"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtry -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-3">
                    <select name="user_id" class="form-select">
                        <option value="">Wszyscy użytkownicy</option>
                        {foreach $users as $user}
                        <option value="{$user.id}" {if $filters.user_id == $user.id}selected{/if}>{$user.username}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="text" name="ip" class="form-control" placeholder="Adres IP" value="{$filters.ip_address|default:''}">
                </div>
                <div class="col-md-2">
                    <select name="success" class="form-select">
                        <option value="">Wszystkie</option>
                        <option value="1" {if $filters.success === true}selected{/if}>Udane</option>
                        <option value="0" {if $filters.success === false}selected{/if}>Nieudane</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="date" name="date_from" class="form-control" value="{$filters.date_from|default:''}">
                </div>
                <div class="col-md-2">
                    <input type="date" name="date_to" class="form-control" value="{$filters.date_to|default:''}">
                </div>
                <div class="col-md-1">
                    <button type="submit" class="btn btn-secondary w-100"><i class="bi bi-filter"></i></button>
                </div>
            </form>
        </div>
    </div>

    <!-- Lista logowań -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Użytkownik</th>
                            <th>IP</th>
                            <th>Przeglądarka</th>
                            <th>System</th>
                            <th>Lokalizacja</th>
                            <th>Status</th>
                            <th>Data</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $logins as $login}
                        <tr>
                            <td><strong>{$login.username}</strong></td>
                            <td><code>{$login.ip_address}</code></td>
                            <td>{$login.browser|default:'-'}</td>
                            <td>
                                {$login.os|default:'-'}
                                {if $login.device_type && $login.device_type != 'Desktop'}
                                <span class="badge bg-secondary">{$login.device_type}</span>
                                {/if}
                            </td>
                            <td>
                                {if $login.country}
                                {$login.city|default:''} {$login.country}
                                {else}
                                <span class="text-muted">-</span>
                                {/if}
                            </td>
                            <td>
                                {if $login.success}
                                <span class="badge bg-success">OK</span>
                                {else}
                                <span class="badge bg-danger" title="{$login.failure_reason|default:''}">Błąd</span>
                                {/if}
                            </td>
                            <td>{$login.created_at|date_format:"%d.%m.%Y %H:%M"}</td>
                        </tr>
                        {foreachelse}
                        <tr>
                            <td colspan="7" class="text-center py-4 text-muted">Brak wpisów</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>
                    {for $p=max(1,$pagination.current_page-2) to min($pagination.total_pages,$pagination.current_page+2)}
                    <li class="page-item{if $p == $pagination.current_page} active{/if}">
                        <a class="page-link" href="?page={$p}">{$p}</a>
                    </li>
                    {/for}
                    <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}
