{% extends 'base.html.twig' %}

{% block title %}Logs vom Typ {{ logType }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .log-entry {
            border-left: 4px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
            background: #f9f9f9;
        }
        .log-entry.ERROR { border-left-color: #dc3545; background: #f8d7da; }
        .log-entry.WARNING { border-left-color: #ffc107; background: #fff3cd; }
        .log-entry.ADMIN { border-left-color: #6f42c1; background: #e2d9f3; }
        .log-entry.CONNECTION { border-left-color: #17a2b8; background: #d1ecf1; }
        .log-entry.COMBAT { border-left-color: #fd7e14; background: #ffeaa7; }
        .log-entry.CHAT { border-left-color: #28a745; background: #d4edda; }
        
        .log-timestamp {
            font-size: 0.9em;
            color: #666;
        }
        .log-type {
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.8em;
        }
        .log-message {
            margin-top: 5px;
            word-break: break-word;
        }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ path('server_logs_index') }}">
                            <i class="fas fa-server"></i> Server Logs
                        </a>
                    </li>
                    <li class="breadcrumb-item active">{{ logType }}</li>
                </ol>
            </nav>
            
            <h1 class="mb-4">
                <i class="fas fa-tag"></i> Logs vom Typ {{ logType }}
                <span class="badge bg-primary">{{ totalLogs }} Einträge</span>
            </h1>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-list"></i> {{ logType }}-Logs
                    </h5>
                </div>
                <div class="card-body">
                    {% if logs is empty %}
                        <div class="text-center py-5">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <h4>Keine {{ logType }}-Logs gefunden</h4>
                            <p class="text-muted">Es wurden noch keine Logs vom Typ "{{ logType }}" erfasst.</p>
                            <a href="{{ path('server_logs_index') }}" class="btn btn-primary">Zurück zu allen Logs</a>
                        </div>
                    {% else %}
                        {% for log in logs %}
                            <div class="log-entry {{ log.logType }}">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <span class="log-timestamp">
                                            <i class="fas fa-clock"></i> {{ log.timestamp|date('d.m.Y H:i:s') }}
                                        </span>
                                        <span class="log-type bg-{{ log.logType|lower }}">{{ log.logType }}</span>
                                        {% if log.action %}
                                            <span class="badge bg-secondary">{{ log.action }}</span>
                                        {% endif %}
                                        {% if log.playerName %}
                                            <span class="text-primary">
                                                <i class="fas fa-user"></i> {{ log.playerName }}
                                            </span>
                                        {% endif %}
                                        {% if log.steamId %}
                                            <span class="text-muted">
                                                <i class="fab fa-steam"></i> {{ log.steamId }}
                                            </span>
                                        {% endif %}
                                    </div>
                                    <div>
                                        <small class="text-muted">{{ log.filename }}</small>
                                    </div>
                                </div>
                                <div class="log-message">{{ log.logMessage }}</div>
                                {% if log.metadata and log.metadata.coordinates %}
                                    <small class="text-muted">
                                        <i class="fas fa-map-marker-alt"></i> 
                                        {{ log.metadata.coordinates.x|round(2) }}, {{ log.metadata.coordinates.y|round(2) }}, {{ log.metadata.coordinates.z|round(2) }}
                                    </small>
                                {% endif %}
                            </div>
                        {% endfor %}

                        <!-- Pagination -->
                        {% if totalPages > 1 %}
                            <nav aria-label="Log pagination">
                                <ul class="pagination justify-content-center">
                                    {% if currentPage > 1 %}
                                        <li class="page-item">
                                            <a class="page-link" href="{{ path('server_logs_type', {'logType': logType, 'page': currentPage - 1}) }}">
                                                <i class="fas fa-chevron-left"></i> Zurück
                                            </a>
                                        </li>
                                    {% endif %}
                                    
                                    {% for page in 1..totalPages %}
                                        {% if page == currentPage %}
                                            <li class="page-item active">
                                                <span class="page-link">{{ page }}</span>
                                            </li>
                                        {% elseif page <= 3 or page > totalPages - 3 or (page >= currentPage - 2 and page <= currentPage + 2) %}
                                            <li class="page-item">
                                                <a class="page-link" href="{{ path('server_logs_type', {'logType': logType, 'page': page}) }}">{{ page }}</a>
                                            </li>
                                        {% elseif page == 4 and currentPage > 6 %}
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        {% elseif page == totalPages - 3 and currentPage < totalPages - 5 %}
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                    
                                    {% if currentPage < totalPages %}
                                        <li class="page-item">
                                            <a class="page-link" href="{{ path('server_logs_type', {'logType': logType, 'page': currentPage + 1}) }}">
                                                Weiter <i class="fas fa-chevron-right"></i>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}