package web

import (
        "github.com/spf13/viper"
)

templ Base(title string) {
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8"/>
    <title>{title}</title>
    <link rel="stylesheet" href="/assets/styles.css"/>
  </head>
  <body>
    <header>
    @NavBar(title)
    </header>
    <main class="flex-grow">
      <div class="container mx-auto px-4 py-8 sm:px-6 lg:px-8 max-w-8xl">
        { children... }
      </div>
    </main>
    <footer class="bg-gray-800 text-gray-300 py-4">
      <div class="container mx-auto text-center">
        <p>{viper.GetString("ui.name")} by <a href={templ.URL(viper.GetString("ui.byurl"))}>{viper.GetString("ui.byname")}</a> licenced under AGPLv3, </p>
        <p><a href={templ.URL(viper.GetString("ui.source"))}>Source</a></p>
      </div>
      <script src="/assets/htmx.min.js"></script>
    </footer>
  </body>
</html>
}

templ NavBar(title string) {
  <nav class="bg-blue-600 p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
      <!-- Logo or Brand Name -->
      <a href="/" class="text-white text-lg font-bold">
        Logo
      </a>
      <!-- Navigation Links -->
      <div class="flex space-x-4">
        <a
          href="/"
          class="text-white hover:bg-blue-700 px-3 py-2 rounded-md"
        >
          Home
        </a>
        <a
          href="/about"
          class="text-white hover:bg-blue-700 px-3 py-2 rounded-md"
        >
          About
        </a>
        <a
          href="/login"
          class="text-white hover:bg-blue-700 px-3 py-2 rounded-md"
        >
          Login
        </a>
      </div>
    </div>
  </nav>
}
