{{define "post"}}
<!DOCTYPE html>
<html lang="en" data-theme="night">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="/public/favicon.ico" />
  <title>{{template "title" .}}</title>
  <meta name="description" content="{{template "description" .}}">
  <script defer src="https://analytics.atri.dad/script.js" data-website-id="0206740c-245f-402a-b433-125d6d48945a"></script>
  <link href="/public/css/styles.css" rel="stylesheet" type="text/css" />
  {{template "head" .}}
</head>

<body>
  {{template "header" .}}

  <main class="container mx-auto pt-6 pb-12 px-4 max-w-2xl">
    <article>
      <h1 class="text-3xl font-bold tracking-tight text-center mb-4">{{.Name}}</h1>
      
      <div class="flex flex-row justify-center items-center gap-2">
        {{if .Date}}
        <div class="flex flex-row items-center gap-1 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-clock-4">
            <circle cx="12" cy="12" r="10" />
            <polyline points="12 6 12 12 16 14" />
          </svg>
          {{.Date}}
        </div>
        {{end}}

        {{if .Tags}}
        <div class="flex flex-row items-center gap-1">
          {{range .Tags}}
          <span class="project-tag">#{{.}}</span>
          {{end}}
        </div>
        {{end}}

        <div id="svgContainer" style="display: none;">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-check-circle">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
            <path d="m9 11 3 3L22 4" />
          </svg>
        </div>

        <div class="flex items-center gap-2">
          <button id="copyButton" aria-label="Copy Link to Post" hx-get="/api/post/copy" hx-swap="innerHTML"
            class="post-icon-button"
            hx-trigger="click delay:3s"
            _='on click put #svgContainer.innerHTML into me.innerHTML then call navigator.clipboard.writeText(window.location.href)'>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-copy">
              <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
            </svg>
          </button>

          <a href="/posts" class="post-back-button" preload="mouseover">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-undo-2">
              <path d="M9 14 4 9l5-5" />
              <path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11" />
            </svg>
            Back
          </a>
        </div>
      </div>
      
      <hr class="mb-6 mt-2 border-t border-white opacity-20 w-full mx-auto" />
      <div class="markdown text-left mx-auto">
        {{template "main" .}}
      </div>
    </article>
  </main>
  <script src="/public/js/htmx.base.js"></script>
  <script src="/public/js/htmx.preload.js"></script>
  {{template "foot" .}}
</body>

</html>
{{end}}