<!DOCTYPE html>
<html lang="{{ lang }}" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>{% block title %}{{ deployment.home.hero.title }}{% endblock %}</title>

  <!-- SEO -->
  <meta name="description" content="{% block description %}{{ deployment.home.mission.description }}{% endblock %}">
  <meta name="keywords" content="Crumbforest, Kinderfragen, Lernen, Terminal, Raspberry Pi, Open Source">
  <meta name="author" content="Die Crumbforest-Crew">
  <meta name="robots" content="index, follow">

  <!-- Open Graph -->
  <meta property="og:title" content="{% block og_title %}{{ deployment.home.hero.title }}{% endblock %}">
  <meta property="og:description" content="{{ deployment.home.hero.subtitle }}">
  <meta property="og:url" content="{{ deployment.base_url }}">

  <!-- CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <link rel="stylesheet" href="/static/css/home_{{ deployment.home.theme }}.css">

  {% block extra_css %}{% endblock %}
</head>
<body>
  <!-- Navigation -->
  <nav class="container-fluid">
    <ul>
      <li><strong>{{ t.home.hero_title }}</strong></li>
    </ul>
    <ul>
      <li><a href="/">🏠 {{ t.nav.home }}</a></li>
      <li><a href="/about">🌲 {{ t.nav.mission }}</a></li>
      <li><a href="/crew">🌟 {{ t.nav.crew }}</a></li>
      <li><a href="/hardware">🔧 {{ t.nav.hardware }}</a></li>
      <li><a href="/software">💻 {{ t.nav.software }}</a></li>
      <li><a href="/de/login">🔐 {{ t.nav.login }}</a></li>
    </ul>
  </nav>

  <!-- Main Content -->
  {% block content %}{% endblock %}

  <!-- Footer -->
  <footer class="container">
    <small>
      {{ t.footer.tagline }}
      | <a href="/impressum">{{ t.footer.impressum }}</a>
      | <a href="/datenschutz">{{ t.footer.datenschutz }}</a>
    </small>
  </footer>

  {% block extra_js %}{% endblock %}
</body>
</html>
