{% if not lines %}
<p style="color: var(--text-muted); font-size: 0.9em;">No journal errors found for the past 24h.</p>
{% else %}
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;">
    <span style="color: var(--text-muted); font-size: 0.88em;">
        {{ total }} error{{ "s" if total != 1 else "" }} in the past 24h
        {% if total > lines | length %} — showing first {{ lines | length }}{% endif %}
    </span>

    {% if has_claude or has_ollama %}
    <span style="color: var(--text-muted); font-size: 0.82em; margin-left: 8px;">Analyse with AI:</span>
    {% if has_claude %}
    <button class="btn btn-sm btn-secondary"
            hx-post="/htmx/journal-analyze?provider=claude"
            hx-target="#journal-ai"
            hx-swap="innerHTML"
            hx-indicator="#journal-ai-spinner">Claude</button>
    {% endif %}
    {% if has_ollama %}
    <button class="btn btn-sm btn-secondary"
            hx-post="/htmx/journal-analyze?provider=ollama"
            hx-target="#journal-ai"
            hx-swap="innerHTML"
            hx-indicator="#journal-ai-spinner">Ollama ({{ ollama_model }})</button>
    {% endif %}
    <span id="journal-ai-spinner" class="htmx-indicator"><span class="spinner"></span></span>
    {% endif %}
</div>

<pre class="journal-log">{% for line in lines %}{{ line }}
{% endfor %}</pre>

<div id="journal-ai">
{% if reports %}
<div style="margin-top:14px;">
    <h4 style="font-size:0.85em;color:var(--text-muted);margin-bottom:6px;">Saved reports</h4>
    <table style="font-size:0.88em;width:auto;">
    <thead><tr><th>Date</th><th>Provider</th><th></th></tr></thead>
    <tbody>
    {% for r in reports %}
    <tr>
        <td style="font-size:0.85em;color:var(--text-muted);white-space:nowrap;">{{ r.timestamp }}</td>
        <td style="font-size:0.85em;">{{ r.provider }}</td>
        <td><a href="#" style="font-size:0.82em;color:var(--accent);"
               hx-get="/htmx/journal-report/{{ r.filename }}"
               hx-target="#journal-ai" hx-swap="innerHTML">View</a></td>
    </tr>
    {% endfor %}
    </tbody>
    </table>
</div>
{% endif %}
</div>
{% endif %}