{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">Logi systemowe</h4>
            <p class="text-muted mb-0">Przeglądaj logi serwera i aplikacji</p>
        </div>
        <div class="btn-group">
            <form method="post" action="{$baseUrl}/admin/clear-logs" class="d-inline">
                <input type="hidden" name="csrf_token" value="{$csrfToken}">
                <input type="hidden" name="type" value="app">
                <button type="submit" class="btn btn-outline-warning" onclick="return confirm('Wyczyścić logi aplikacji?')">
                    <i class="bi bi-trash me-1"></i>Wyczyść logi aplikacji
                </button>
            </form>
            <form method="post" action="{$baseUrl}/admin/clear-logs" class="d-inline ms-2">
                <input type="hidden" name="csrf_token" value="{$csrfToken}">
                <input type="hidden" name="type" value="database">
                <button type="submit" class="btn btn-outline-danger" onclick="return confirm('Wyczyścić stare wpisy z bazy?')">
                    <i class="bi bi-database-x me-1"></i>Wyczyść stare z bazy
                </button>
            </form>
        </div>
    </div>

    <div class="row">
        <!-- Lista plików logów -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0"><i class="bi bi-folder me-2"></i>Pliki logów</h6>
                </div>
                <div class="list-group list-group-flush">
                    {foreach $logFiles as $key => $file}
                    <a href="{$baseUrl}/admin/system-logs?type={$key}&lines={$lines}" 
                       class="list-group-item list-group-item-action d-flex justify-content-between align-items-center {if $selectedType == $key}active{/if}">
                        <span>
                            <i class="{$file.icon} me-2"></i>{$file.name}
                        </span>
                        {if $file.exists}
                        <span class="badge bg-{if $selectedType == $key}light text-dark{else}secondary{/if}">
                            {($file.size / 1024)|number_format:0} KB
                        </span>
                        {else}
                        <span class="badge bg-danger">Brak</span>
                        {/if}
                    </a>
                    {/foreach}
                </div>
            </div>

            <!-- Opcje -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0"><i class="bi bi-sliders me-2"></i>Opcje</h6>
                </div>
                <div class="card-body">
                    <form method="get">
                        <input type="hidden" name="type" value="{$selectedType}">
                        <div class="mb-3">
                            <label class="form-label">Liczba linii</label>
                            <select name="lines" class="form-select" onchange="this.form.submit()">
                                <option value="50" {if $lines == 50}selected{/if}>50</option>
                                <option value="100" {if $lines == 100}selected{/if}>100</option>
                                <option value="200" {if $lines == 200}selected{/if}>200</option>
                                <option value="500" {if $lines == 500}selected{/if}>500</option>
                                <option value="1000" {if $lines == 1000}selected{/if}>1000</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Zawartość logów -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="card-title mb-0">
                        <i class="bi bi-terminal me-2"></i>
                        {$logFiles[$selectedType].name|default:'Log'}
                    </h6>
                    {if $selectedFile}
                    <small class="text-muted">{$selectedFile}</small>
                    {/if}
                </div>
                <div class="card-body p-0">
                    <pre class="log-viewer mb-0" id="logContent">{$content|default:'Brak danych lub plik niedostępny'}</pre>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.log-viewer {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1rem;
    font-size: 0.75rem;
    line-height: 1.4;
    max-height: 600px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
</style>
{/block}

{block name="scripts"}
<script>
// Scroll na dół
document.getElementById('logContent').scrollTop = document.getElementById('logContent').scrollHeight;
</script>
{/block}
