{% extends 'base.html' %}
{% load static %}

{% block title %}Detalhes do Log - {{ log.id }}{% endblock %}

{% block extra_css %}
<style>
    .log-detail-card {
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
    
    .log-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 10px 10px 0 0;
    }
    
    .log-severity-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .log-severity-badge.critical { background-color: #ff6b6b; color: white; }
    .log-severity-badge.high { background-color: #ffa726; color: white; }
    .log-severity-badge.medium { background-color: #ffd54f; color: #333; }
    .log-severity-badge.low { background-color: #66bb6a; color: white; }
    
    .log-action-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: bold;
        background-color: #e9ecef;
        color: #495057;
    }
    
    .detail-item {
        padding: 15px 20px;
        border-bottom: 1px solid #e9ecef;
    }
    
    .detail-item:last-child {
        border-bottom: none;
    }
    
    .detail-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 5px;
    }
    
    .detail-value {
        color: #333;
    }
    
    .detail-value pre {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        padding: 10px;
        margin: 0;
        font-size: 0.85rem;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    .back-button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        padding: 10px 20px;
        border-radius: 25px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }
    
    .back-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        color: white;
        text-decoration: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="fas fa-file-alt text-primary"></i>
                    Detalhes do Log #{{ log.id }}
                </h1>
                <div>
                    <a href="{% url 'system_logs:list' %}" class="back-button">
                        <i class="fas fa-arrow-left"></i> Voltar à Lista
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="log-detail-card">
                <!-- Cabeçalho do Log -->
                <div class="log-header">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="mb-2">{{ log.description }}</h4>
                            <div class="d-flex align-items-center gap-3">
                                <span class="log-severity-badge {{ log.severity|lower }}">
                                    {{ log.get_severity_display }}
                                </span>
                                <span class="log-action-badge">
                                    {{ log.get_action_display }}
                                </span>
                                <span class="text-white-50">
                                    <i class="fas fa-clock"></i> {{ log.timestamp|date:"d/m/Y H:i:s" }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4 text-md-end">
                            {% if log.user %}
                            <div class="text-white-50">Usuário</div>
                            <div class="fw-bold">{{ log.user.get_full_name|default:log.user.username }}</div>
                            {% else %}
                            <div class="text-white-50">Usuário</div>
                            <div class="fw-bold">Anônimo</div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Informações Básicas -->
                <div class="detail-item">
                    <div class="detail-label">Descrição Completa</div>
                    <div class="detail-value">{{ log.description }}</div>
                </div>

                <!-- Informações do Objeto -->
                {% if log.content_type and log.object_id %}
                <div class="detail-item">
                    <div class="detail-label">Objeto Afetado</div>
                    <div class="detail-value">
                        <strong>Tipo:</strong> {{ log.content_type.model|title }}<br>
                        <strong>ID:</strong> {{ log.object_id }}<br>
                        {% if log.content_object %}
                        <strong>Objeto:</strong> {{ log.content_object }}
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Detalhes Adicionais -->
                {% if log.details %}
                <div class="detail-item">
                    <div class="detail-label">Detalhes Adicionais</div>
                    <div class="detail-value">
                        <pre>{{ log.get_details_display }}</pre>
                    </div>
                </div>
                {% endif %}

                <!-- Informações do Sistema -->
                <div class="detail-item">
                    <div class="detail-label">Informações do Sistema</div>
                    <div class="detail-value">
                        <div class="row">
                            <div class="col-md-6">
                                <strong>Endereço IP:</strong> {{ log.ip_address|default:"Não informado" }}<br>
                                <strong>Método HTTP:</strong> {{ log.method|default:"Não informado" }}<br>
                                <strong>ID da Sessão:</strong> {{ log.session_id|default:"Não informado" }}
                            </div>
                            <div class="col-md-6">
                                <strong>URL:</strong> 
                                {% if log.url %}
                                <a href="{{ log.url }}" target="_blank" class="text-break">{{ log.url }}</a>
                                {% else %}
                                Não informado
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- User Agent -->
                {% if log.user_agent %}
                <div class="detail-item">
                    <div class="detail-label">User Agent</div>
                    <div class="detail-value">
                        <pre style="font-size: 0.8rem;">{{ log.user_agent }}</pre>
                    </div>
                </div>
                {% endif %}

                <!-- Informações de Data/Hora -->
                <div class="detail-item">
                    <div class="detail-label">Informações de Data/Hora</div>
                    <div class="detail-value">
                        <strong>Data/Hora:</strong> {{ log.timestamp|date:"d/m/Y H:i:s" }}<br>
                        <strong>Timestamp:</strong> {{ log.timestamp|date:"U" }}<br>
                        <strong>Fuso Horário:</strong> {{ log.timestamp|date:"T" }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Logs Relacionados -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-link text-info"></i>
                        Logs Relacionados
                    </h5>
                </div>
                <div class="card-body">
                    {% if log.content_type and log.object_id %}
                    <p>Outros logs relacionados ao mesmo objeto:</p>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Data/Hora</th>
                                    <th>Usuário</th>
                                    <th>Ação</th>
                                    <th>Severidade</th>
                                    <th>Descrição</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for related_log in log.content_type.systemlog_set.filter|slice:":5" %}
                                {% if related_log.id != log.id %}
                                <tr>
                                    <td>{{ related_log.timestamp|date:"d/m/Y H:i:s" }}</td>
                                    <td>{{ related_log.user.get_full_name|default:related_log.user.username|default:"Anônimo" }}</td>
                                    <td>
                                        <span class="log-action-badge">{{ related_log.get_action_display }}</span>
                                    </td>
                                    <td>
                                        <span class="log-severity-badge {{ related_log.severity|lower }}">{{ related_log.get_severity_display }}</span>
                                    </td>
                                    <td>{{ related_log.description|truncatechars:50 }}</td>
                                </tr>
                                {% endif %}
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center text-muted">Nenhum log relacionado encontrado.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted">Nenhum objeto relacionado para mostrar logs similares.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}