@extends('layout')

@section('content')
    <div class="observability-page technical-logs-page">
        <div class="page-head page-head--rich">
            @include('partials.context-back')
            <div class="t">
                <div class="eyebrow"><i class="ic sm">terminal</i> Observabilidade técnica</div>
                <h1>LOGs</h1>
                <p class="lead">Requisições, erros e eventos técnicos com rota, IP, status, duração e identificação da origem.</p>
            </div>
            <div class="actions">
                <a class="btn btn--subtle" href="{{ url('operacao/movimentacoes') }}"><i class="ic">manage_history</i><span class="lbl">Histórico de movimentações</span></a>
                <a class="btn btn--subtle" href="{{ url('operacao') }}" title="Atualizar logs técnicos"><i class="ic">refresh</i><span class="lbl">Atualizar</span></a>
            </div>
        </div>

        <section class="card observability-card observability-card--logs" id="technical-logs-card">
            <div class="card-head observability-logs-head">
                <div>
                    <h2><i class="ic sm">terminal</i> Eventos técnicos</h2>
                    <p>Requisições, erros e eventos do sistema. Abra um registro para ver metadados e contexto seguro.</p>
                </div>
                <div class="observability-logs-summary" aria-label="Resumo das últimas 24 horas">
                    <span class="observability-logs-summary__label">Últimas 24h</span>
                    <span class="observability-logs-summary__item observability-logs-summary__item--bad"><i class="health-dot health-dot--bad"></i>{{ $logSummary['errors'] }} erros</span>
                    <span class="observability-logs-summary__item observability-logs-summary__item--warn"><i class="health-dot health-dot--warn"></i>{{ $logSummary['warnings'] }} alertas</span>
                    <span class="observability-logs-summary__item"><i class="ic sm">schedule</i>{{ $logSummary['slow'] }} lentos</span>
                </div>
            </div>
            <div class="card-body flush" id="technical-logs" data-logs-container aria-live="polite">
                @include('observability._logs', ['logs' => $logs, 'filters' => $filters])
            </div>
        </section>

        <dialog class="observability-log-modal" data-technical-log-modal aria-labelledby="technical-log-modal-title">
            <div class="observability-log-modal__head">
                <div>
                    <span class="eyebrow"><i class="ic sm" aria-hidden="true">terminal</i> Evento técnico</span>
                    <h2 id="technical-log-modal-title" data-technical-log-modal-title>Detalhes do log</h2>
                </div>
                <button type="button" class="icon-btn" data-technical-log-close aria-label="Fechar detalhes do log" title="Fechar">
                    <i class="ic" aria-hidden="true">close</i>
                </button>
            </div>
            <div class="observability-log-modal__body" data-technical-log-modal-content aria-live="polite"></div>
        </dialog>
    </div>
@endsection