html
  head
    meta charest="utf-8"

    meta name="viewport" content="width=device-width, initial-scale=1.0"

    meta name="theme-color" content="rgb(37, 99, 235)"

    title #{context.content_for(:title)} #{Hanami.app.settings.site_name}

    link rel="authorization_endpoint" href=Hanami.app.settings.micropub_authorization_endpoint
    link rel="token_endpoint" href=Hanami.app.settings.micropub_token_endpoint
    link rel="micropub" href="#{URI.join(Hanami.app.settings.micropub_site_url, "micropub")}"

    link rel="webmention" href=Hanami.app.settings.webmention_url
    link rel="pingback" href=Hanami.app.settings.pingback_url
    link rel="feed" type="text/html" href="/posts"
    link rel="feed alternate" type="application/rss+xml" href="/feeds/rss"
    link rel="feed alternate" type="application/rss+xml" href="/feeds/statuses_rss"

    link rel="me" href=Hanami.app.settings.mastodon_url
    link rel="me" href=Hanami.app.settings.github_url

    link rel="stylesheet" href=context.asset_by_name("index.css")
    link rel="icon" type="image/x-icon" href="/assets/favicon.ico"

    script data-domain="dnitza.com" src="https://stats.dnitza.com/js/script.js" defer="true"
    script src="/assets/gallery.js"
    script src=assets["index.js"]

    script src="https://unpkg.com/htmx.org@1.9.2/dist/htmx.min.js" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"
    script src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js" defer="true"

    link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/styles/github-dark.min.css"
    script src="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/highlight.min.js" defer="true"

    - if Hanami.app.settings.micropub_pub_key
      link rel="pgpkey" href="/key"
  body class="bg-white dark:bg-indigo-950 selection:bg-blue-100 selection:text-blue-900 dark:selection:bg-blue-600 dark:selection:text-blue-100" x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }" x-on:keydown.escape="imgModal=false"
    main class="pb-8 px-4 pt-4 md:pt-8"
      header class="mb-12 max-w-screen-md mx-auto"
        div class="flex items-center mb-8 md:mb-12 text-lg md:text-xl text-gray-400 dark:text-gray-600"
          div class="flex-none mx-auto md:flex-auto md:mx-0"
            div class="h-card flex items-center"
              img class="u-photo w-6 h6 md:w-10 md:h-10 rounded-full mr-1.5" src="/assets/memoji.png"
              a href="/" rel="me" class="u-url u-uid"
                h1 class="p-name uppercase text-sm md:text-sm text-gray-400 dark:text-gray-400" = Hanami.app.settings.site_name
          nav class="space-x-1 text-sm md:text-sm uppercase md:block"
            a class="transition-colors p-1 rounded hover:bg-pink-100 hover:text-pink-400 dark:hover:bg-pink-800 #{context.current_path.start_with?('/now') ? 'text-pink-600 bg-pink-50 dark:bg-pink-900 dark:text-pink-400' : 'text-gray-400'}" href="/now" Now
            span class="text-gray-400 dark:text-gray-600"
              = "/"
            a class="transition-colors p-1 rounded hover:bg-emerald-100 hover:text-emerald-400 dark:hover:bg-emerald-800 #{context.current_path.start_with?('/post') ? 'text-emerald-400 bg-emerald-50 dark:bg-emerald-900 dark:text-emerald-400' : 'text-gray-400'}" href="/posts" Writing
            span class="text-gray-400 dark:text-gray-600"
              = "/"
            a class="transition-colors p-1 rounded text-gray-400 hover:bg-orange-100 hover:text-orange-400 dark:hover:bg-orange-800" href="#{Hanami.app.settings.micropub_site_url}/feeds/rss" RSS
      == yield
    div class="px-4 max-w-screen-md mx-auto pb-10"
      p class="float-left text-gray-200 dark:text-indigo-900" © 2023 Daniel Nitsikopoulos. All rights reserved.
      p class="float-right text-gray-200 dark:text-gray-600"
        a href="https://xn--sr8hvo.ws/%F0%9F%8D%93%E2%9E%97%F0%9F%8E%B0/previous" &larr;
        a href="https://xn--sr8hvo.ws"  🕸💍
        a href="https://xn--sr8hvo.ws/%F0%9F%8D%93%E2%9E%97%F0%9F%8E%B0/next" &nbsp; &rarr;