
<!doctype html>
<html data-bs-theme="light">
  <head>
    {% set base = "" %}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <!--
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    -->
    <link rel="stylesheet" href="{{ parent_path }}static/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ parent_path }}static/css/bootstrap-icons.min.css">
    <link href="{{ parent_path }}static/css/theme.css" rel="stylesheet">
    <title>{{ page_title }}</title>
    {% block head_includes %}
    {% endblock %}
   </head>
  <body>
    <div id="top_wrapper">
      <div id= "top_header" class="row top_header">
          <img id="top_header_image" src="{{ parent_path }}static/images/header.jpg" class="img-fluid">
          <div id="top_title" class="row">
            <a class="top_header_text">{{ page_title }}</a>
          </div>
      </div>
      <div id="menu_container" class="row justify-content-end pe-2 py-2" >
        <div id="menu_wrapper" class="col-auto fw-bold">
          <a class="link-body-emphasis mx-2 text-decoration-none" href="{{ parent_path }}index.html">Home</a>
          <a class="link-body-emphasis mx-2 text-decoration-none" id="categories_toggle" href="#!">Categories</a>
          <a class="link-body-emphasis mx-2 text-decoration-none" href="{{ parent_path }}static/about.html">About</a>
          <a class="link-body-emphasis mx-2 text-decoration-none" id="dark_theme_toggle" href="#!">🌓︎</a>
        </div>
      </div>
      <div id="categories_container" class="container">
        <div id="categories_menu" class="row justify-content-center mx-auto mb-2" style="display: none">
          {% for category in categories %}
            <a href="{{ parent_path }}categories/{{ category }}.html" class="mx-1 text-decoration-none">{{ category }}</a>
          {% endfor %}
        </div>
      </div>    
    </div>
    <div id="content_wrapper" class="container-fluid mb-2">
      {% block content %}
      {% endblock %}
    </div>
    <div id="footer_wrapper" class="container-fluid">
      <div id="footer-data" class="row d-flex text-muted justify-content-end">
        {% block footer_includes %}
        {% endblock %}
        {% if footer_data %}
        <div class="d-flex align-items-center justify-content-center">
          <p class="my-0">{{ footer_data }}</p>
        </div>
        {% endif %}
      </div>
      <div id="footer-data-secondary" class="row d-flex text-muted justify-content-end">
        <div class="d-flex align-items-center justify-content-center">
          <p class="small my-0" style="font-size: 0.75rem;">Page created with <a class="text-decoration-none" href="#microgen">microgen</a></p>
        </div>
      </div>
    </div>
    <script src="{{ parent_path }}static/js/popper.min.js"></script>
    <script src="{{ parent_path}}static/js/bootstrap.min.js"></script>
    <script defer src="{{ parent_path }}static/js/theme.js"></script>
</body>
