module Pages
  class Layout < ::Phlex::HTML
    def pages = {
      home: {
        title: "Home",
        url: "/"
      },
      blog: {
        title: "Blog",
        url: "/blog"
      },
      about: {
        title: "About",
        url: "/about"
      }
    }

    def initialize(page, banner: nil, meta: {})
      @page = page
      if @page.is_a? Symbol
        @page_info = pages[page]
      else
        @page_info = @page
      end
      @banner = banner
      @meta = meta
    end
    def view_template

      doctype
      html {
        head {
          title { @page_info[:title] + " | Aleks Rūtiņš" }
          meta(charset: "utf-8")
          meta(name: "viewport", content: "width=device-width, initial-scale=1.0")
          link(rel: "stylesheet", href: "/tailwind.css")

          script(defer: true, 'data-domain' => "farthergate.com", src: "https://plausible.farthergate.com/js/script.js")

          @meta.each { |name, content|
            meta(name: name, content: content)
          }
        }
        body(class: 'm-0 p-0 font-sans') {
          header(class: "#{@banner ? 'fixed' : 'sticky'} top-0 w-screen bg-transparent pointer-events-none flex p-3 items-center justify-center") {
            nav(class: 'flex gap-2 p-2 rounded-full border border-gray-300 bg-white/50 backdrop-blur-md pointer-events-auto') {
              pages.each { |key, page|
                a(href: page[:url], class: "block rounded-full px-3 py-1 #{key == @page ? 'bg-gray-100/50' : ''}") { page[:title] }
              }
            }
          }
          img(src: @banner, class: 'w-full h-[400px] object-cover') if @banner
          main(class: 'p-6 max-w-4xl mx-auto') {
            yield
          }

          footer(class: 'text-gray-500 py-4 text-center flex flex-col items-center gap-3') {
            p {
              a(href: 'https://git.farthergate.com/p') { 'git' }
              plain ' ~ '
              a(href: 'https://bsky.app/profile/farthergate.com') { 'bsky' }
              plain ' ~ '
              a(href: 'https://git.farthergate.com/p/rad:z3eNe9ayEhwgxmeJb92jwiY1QsANh') { 'source' }
            }
            p { "built with phlexite and tailwindcss" }
            p { "© #{Time.now.year} Aleks Rūtiņš" }
          }
        }
      }
    end
  end
end