{% load helpers %}

<div class="row mb-3">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-file-document-outline"></i> Loki Logs
                </h5>
                <div class="btn-group" role="group" aria-label="Time range">
                    <a href="?range=300" class="btn btn-sm {% if time_range == 300 %}btn-primary{% else %}btn-outline-secondary{% endif %}">5m</a>
                    <a href="?range=900" class="btn btn-sm {% if time_range == 900 %}btn-primary{% else %}btn-outline-secondary{% endif %}">15m</a>
                    <a href="?range=3600" class="btn btn-sm {% if time_range == 3600 %}btn-primary{% else %}btn-outline-secondary{% endif %}">1h</a>
                    <a href="?range=14400" class="btn btn-sm {% if time_range == 14400 %}btn-primary{% else %}btn-outline-secondary{% endif %}">4h</a>
                    <a href="?range=86400" class="btn btn-sm {% if time_range == 86400 %}btn-primary{% else %}btn-outline-secondary{% endif %}">24h</a>
                    <a href="?range=604800" class="btn btn-sm {% if time_range == 604800 %}btn-primary{% else %}btn-outline-secondary{% endif %}">7d</a>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                    <small class="text-muted">Query:</small>
                    <code class="small">{{ query }}</code>
                    {% if search_type == 'ip' %}
                    <span class="badge bg-info text-dark">Matched by IP</span>
                    {% else %}
                    <span class="badge bg-secondary text-white">Matched by name</span>
                    {% endif %}
                    <small class="text-muted">Found: <strong>{{ total_results }}</strong> log lines</small>
                    <small class="text-muted">Showing: <strong>{{ logs|length }}</strong></small>
                </div>

                {% if error %}
                <div class="alert alert-danger" role="alert">
                    <i class="mdi mdi-alert-circle"></i>
                    <strong>Error:</strong> {{ error }}
                </div>
                {% endif %}

                {% if logs %}
                <div class="table-responsive">
                    <table class="table table-hover table-sm">
                        <thead class="table-light">
                        <tr>
                            <th style="width: 180px;">Timestamp</th>
                            <th style="width: 160px;">Source</th>
                            <th style="width: 120px;">Job</th>
                            <th style="width: 140px;">Severity</th>
                            <th>Message</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for log in logs %}
                        <tr>
                            <td class="text-nowrap">
                                <small>{{ log.message.timestamp_display|default:log.message.timestamp }}</small>
                            </td>
                            <td>
                                <small class="text-muted">{{ log.message.source|default:"-" }}</small>
                            </td>
                            <td>
                                <span class="badge text-bg-info">{{ log.message.job|default:"-" }}</span>
                            </td>
                            <td>
                                {% with severity=log.message.severity|lower %}
                                {% if severity == 'critical' or severity == 'fatal' or severity == 'error' %}
                                <span class="badge text-bg-danger">{{ log.message.severity|default:"-" }}</span>
                                {% elif severity == 'warn' or severity == 'warning' %}
                                <span class="badge text-bg-warning">{{ log.message.severity|default:"-" }}</span>
                                {% elif severity == 'info' %}
                                <span class="badge text-bg-primary">{{ log.message.severity|default:"-" }}</span>
                                {% elif severity == 'account' %}
                                <span class="badge text-bg-secondary">{{ log.message.severity|default:"-" }}</span>
                                {% else %}
                                <span class="badge border text-body">{{ log.message.severity|default:"-" }}</span>
                                {% endif %}
                                {% endwith %}
                            </td>
                            <td>
                                <code class="small d-inline-block py-1 px-2" style="word-break: break-word; white-space: pre-wrap;">{{ log.message.message|truncatechars:500 }}</code>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% elif not error %}
                <div class="alert alert-info" role="alert">
                    <i class="mdi mdi-information-outline"></i>
                    No Loki logs found for this object in the selected time range.
                </div>
                {% endif %}

                {% if external_log_url %}
                <div class="mt-3">
                    <a href="{{ external_log_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
                        <i class="mdi mdi-open-in-new"></i> Open Loki
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>