{{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>{{.Name}}</title>
    <meta name="description" content="Just here for the vibes...">
    {{template "head" .}}
  </head>

  <body class="block h-[100%]">
    {{template "header" .}}

    <main class="prose prose-invert mx-auto p-4">
      <article>
        <h1 class="title">{{.Name}}</h1>
        <div class="flex flex-row flex-wrap gap-4">
          {{if .Date}}
            <p>
              <div class="flex flex-row flex-wrap items-center gap-1 text-md">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
            </p>
          {{end}}

          {{if .Tags}}
            <div class="flex flex-row flex-wrap text-center items-center justify-center gap-1">
              {{range .Tags}}
                <div class="badge badge-accent">#{{.}}</div>
              {{end}}
            </div>
          {{end}}

          <div id="svgContainer" style="display: none;">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

          <button id="copyButton" aria-label="Copy Link to Post" hx-get="/api/post/copy" hx-swap="innerHTML" 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="24" height="24" 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="btn btn-primary btn-outline" preload="mouseover">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
        <hr />
        {{template "main" .}}

      </article>
    </main>
    <script src="/public/js/htmx.base.js"></script>
    <script src="/public/js/htmx.preload.js"></script>
    {{template "foot" .}}
  </body>
</html>
{{end}}
