<!DOCTYPE html>
<html lang="de" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Frankenbot{% endblock %} · Frankenbot</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  {% block head %}{% endblock %}
</head>
<body>

  <nav class="navbar navbar-expand-lg">
    <div class="container">
      <a class="navbar-brand" href="/">
        <span class="brand-icon">⚡</span>
        Frankenbot
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto gap-1">
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/' %}active{% endif %}" href="/">
              <span>⬡</span> Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/chat' %}active{% endif %}" href="/chat">
              <span>💬</span> Chat
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/orchestrator' %}active{% endif %}" href="/orchestrator">
              <span>🤖</span> Orchestrator
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/tasks' %}active{% endif %}" href="/tasks">
              <span>✓</span> Tasks
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/files' %}active{% endif %}" href="/files">
              <span>📂</span> Dateien
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/agents' %}active{% endif %}" href="/agents">
              <span>⚙</span> Agenten
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/emails' %}active{% endif %}" href="/emails">
              <span>✉</span> Emails
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/email-log' %}active{% endif %}" href="/email-log">
              <span>📋</span> Log
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/settings' %}active{% endif %}" href="/settings">
              <span>⚙</span> Settings
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container py-4">
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show mb-3" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}
  </div>

  <footer>
    <div class="container">
      Frankenbot &middot; Diversity-Ball Wien 2026 &middot;
      <span style="color:var(--accent);">Agent Orchestration System</span>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  {% block scripts %}{% endblock %}
</body>
</html>
