{% extends "base.html" %}

{% set active_page = "logs" %}

{% block title %}HAProxy • Logs{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}"><i class="bi bi-house"></i></a></li>
        <li class="breadcrumb-item active" aria-current="page">Logs</li>
    </ol>
</nav>
{% endblock %}

{% block content %}

<div class="card shadow-sm mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>HAProxy Logs</h5>
    </div>
    
    <div class="card-body">
        {% if error_message %}
        <div class="alert alert-warning">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ error_message }}
        </div>
        {% endif %}

        <!-- Log Loading Controls -->
        <div class="row mb-3 align-items-end">
            <div class="col-md-6">
                <label for="logs_per_page" class="form-label">Logs Per Page</label>
                <select class="form-select" id="logs_per_page">
                    <option value="25" selected>25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                </select>
            </div>
            <div class="col-md-6">
                <button class="btn btn-primary w-100" id="refresh_logs_btn">
                    <i class="bi bi-arrow-clockwise me-2"></i>Refresh
                </button>
            </div>
        </div>

        <!-- Statistics -->
        <div class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            <strong>Loaded:</strong> <span id="loaded_count">{{ loaded_count|default(0) }}</span> / 
            <strong>Total:</strong> <span id="total_count">{{ total_logs|default(0) }}</span> logs
        </div>

        <!-- Logs Container -->
        <div style="max-height: 600px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa;">
            <table class="table table-sm mb-0">
                <tbody id="logs_container">
                    {% if logs %}
                        {% for entry in logs %}
                        <tr>
                            <td>
                                <small style="font-family: monospace; color: #666;">
                                    <i class="bi bi-clock text-muted me-1"></i>{{ entry.get('timestamp', 'N/A') }}<br>
                                    <span class="text-muted">{{ entry.get('source', 'N/A') }}</span><br>
                                    <code style="color: #333; word-break: break-all; display: block; margin-top: 4px;">
                                        {{ entry.get('message', 'N/A') }}
                                    </code>
                                </small>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                    <tr>
                        <td class="text-center text-muted py-4">
                            <i class="bi bi-inbox"></i> No logs available
                        </td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="mt-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
            <small class="text-muted">
                Page <span id="current_page">1</span> of <span id="total_pages">1</span>
            </small>
            <div class="btn-group" role="group">
                <button class="btn btn-sm btn-outline-primary" id="prev_btn" disabled>
                    <i class="bi bi-chevron-left"></i> Previous
                </button>
                <button class="btn btn-sm btn-outline-primary" id="next_btn">
                    Next <i class="bi bi-chevron-right"></i>
                </button>
                <button class="btn btn-sm btn-outline-secondary" id="load_all_btn">
                    <i class="bi bi-download me-1"></i>Load All
                </button>
            </div>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/logs.js') }}"></script>

{% endblock %}