<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
  <script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
  <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', path='favicon_io/apple-touch-icon.png') }}">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', path='favicon_io/favicon-32x32.png') }}">
  <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', path='favicon_io/favicon-16x16.png') }}">
  <link rel="manifest" href="{{ url_for('static', path='favicon_io/site.webmanifest') }}">
  <title>{% block title %}My FastAPI App{% endblock %}</title>
  {% block css %}
  {% endblock %}
</head>

<body>


  <nav class="bg-white border-gray-200 dark:bg-gray-900">
    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
      <a href="https://security.ekstrah.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
        <img src="{{ url_for('static', path='logo.png') }}" class="h-24" alt="Flowbite Logo" />
      </a>
      <button data-collapse-toggle="navbar-default" type="button"
        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
        aria-controls="navbar-default" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M1 1h15M1 7h15M1 13h15" />
        </svg>
      </button>
      <div class="hidden w-full md:block md:w-auto" id="navbar-default">
        <ul
          class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
          <li>
            <a href="#"
              class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
              aria-current="page">Home</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  {% block content %}
  {% endblock %}
  {% block js %}
  {% endblock %}
  <footer class="flex justify-center mt-8">
    <p>&copy; 2025 EKSTRAH Security Application</p>
  </footer>

  <script src="{{ url_for('static', path='js/favicon_animator.js') }}"></script>
</body>

</html>