{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">Twoja pełna historia logowań do systemu</p>
        </div>
        <a href="{$baseUrl}/profile" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Powrót do profilu
        </a>
    </div>

    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>IP</th>
                            <th>Przeglądarka</th>
                            <th>System</th>
                            <th>Urządzenie</th>
                            <th>Lokalizacja</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $logins as $login}
                        <tr>
                            <td>{$login.created_at|date_format:"%d.%m.%Y %H:%M"}</td>
                            <td><code>{$login.ip_address}</code></td>
                            <td>{$login.browser|default:'-'}</td>
                            <td>{$login.os|default:'-'}</td>
                            <td>
                                {if $login.device_type == 'Mobile'}
                                <span class="badge bg-info">Mobile</span>
                                {elseif $login.device_type == 'Tablet'}
                                <span class="badge bg-warning">Tablet</span>
                                {else}
                                <span class="badge bg-secondary">Desktop</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">Sukces</span>
                                {else}
                                <span class="badge bg-danger" title="{$login.failure_reason|default:''}">Błąd</span>
                                {/if}
                            </td>
                        </tr>
                        {foreachelse}
                        <tr>
                            <td colspan="7" class="text-center py-4 text-muted">Brak historii logowań</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}
