<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Log Viewer{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
        body {
            font-family: "Lexend", sans-serif;
            line-height: 1.3;
            padding: 20px;
            max-width: 1100px;
            margin: 0 auto;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1200px;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .history-item {
            margin: 15px 0;
            padding: 15px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background-color: #fff;
        }
        .history-item.agent {
            border-left: 4px solid #28a745;
        }
        .history-item.observation {
            border-left: 4px solid #47a0ff;
        }
        .metadata {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        .metadata-grid {
            display: flex;
            gap: 5%;
        }
        .tool-call {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border-left: 3px solid #fd7e14;
            font-size: 90%;
        }
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            max-height: 400px;
            overflow-y: auto;
        }
        .timestamp {
            color: #6c757d;
            font-size: 0.875rem;
        }
        .badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 5px;
        }
        .badge.source {
            background-color: #e9ecef;
        }
        .badge.action {
            background-color: #cff4fc;
        }
        .collapsible {
            cursor: pointer;
        }
        .collapsible:hover {
            background-color: #f1f3f5;
        }
        .content {
            display: none;
            padding: 10px;
        }
        .content.active {
            display: block;
        }
        .error {
            border-left: 4px solid #dc3545;
            background-color: #f8d7da;
            color: #721c24;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .metrics {
            margin-top: 15px;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 4px;
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body>
    <div class="container">
        <header class="mb-4">
            <h1 class="display-5">{% block header %}Log Viewer{% endblock %}</h1>
        </header>
        <main>
            {% block content %}{% endblock %}
        </main>
    </div>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>