- context.content_for(:title, "#{post.display_title} | ")
- context.content_for(:url, post.permalink)
- context.content_for(:image, post.key_image)
- context.content_for(:linked_data, linked_data)

article class="h-entry"
  template @img-modal.window="imgModal = true; imgModalSrc = $event.detail.imgModalSrc; imgModalDesc = $event.detail.imgModalDesc;" x-if="imgModal"
    div @mousedown.outside="imgModalSrc = ''" class="p-2 fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center bg-black bg-opacity-75"
      div @mousedown.outside="imgModal = ''" class="flex flex-col max-w-3xl max-h-full overflow-auto"
        div class="z-50"
          button @click="imgModal = ''" class="float-right pt-2 pr-2 outline-none focus:outline-none"
            svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
              path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
        div class="p-2 text-center w-full"
          img loading="lazy"  class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4 mx-auto" :src="imgModalSrc" :alt="imgModalSrc"
          p x-text="imgModalDesc" class="text-center text-white"
  div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
    h1 class="p-name mb-2"
      a class="u-url" href=post.permalink
        = post.display_title
    - if post.in_reply_to
      div class=""
        em = "In reply to: "
        - if reply_in_context
          a class="u-in-reply-to no-underline bg-pink-50 hover:bg-pink-100 dark:bg-pink-600 hover:dark:bg-pink-900 p-1 rounded" href=post.in_reply_to #{reply_in_context.display_title}
        - else
          a class="u-in-reply-to no-underline bg-pink-50 hover:bg-pink-100 dark:bg-pink-600 hover:dark:bg-pink-900 p-1 rounded" href=post.in_reply_to #{post.in_reply_to}
    nav class="space-x-1 text-sm md:text-sm md:block dark:text-gray-600"
      - if post.location || post.photos? || post.videos?
        span See more:
      - if post.location
        a class="dark:text-gray-400" href="/places" places
      - if post.photos? || post.videos?
        a class="dark:text-gray-400" href="/photos" photos
    - if post.post_type == "code"
      pre
        code
          == post.content
    - else
      article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded prose-video:rounded"
        div class="e-content prose-code:bg-pink-100 prose-code:text-pink-900"
          == post.content

        - if post.photos?
          - post.photos.each_with_index do |photo, idx|
            figure id="photo-#{idx}"
              img loading="lazy" class="u-photo shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" src=photo["value"] alt=photo["alt"]
              figcaption
                = photo["alt"]
        - if post.videos?
          - post.videos.each_with_index do |video, index|
            figure id="video-#{index}"
              video loop=false muted=true controls=true
                source type="video/mp4" src="#{video["value"]}"
              figcaption= video["alt"]


        - if post.location
          img loading="lazy" class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map
    div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex"
      = render "shared/reactions", post: post, replies: replies, likes: likes
    - if replies && replies.count > 0
      div class="mt-12"
        h3
          = "#{replies.count} Comment#{replies.count != 1 ? "s" : ""}"
          - if post.commentable
            == " · "
            a href="mailto:blog@dnitza.com?subject=About that post of yours&body=%0A%0A---%0A(In reply to #{post.permalink})" reply
        - replies.each do |mention|
          - if mention.source_url.match Hanami.app.settings.micropub_site_url
            div class="prose-p:m-1 mb-6 p-2 bg-orange-100 dark:bg-indigo-900 rounded"
              = "Mentioned in "
              a href=mention.source_url #{mention.source_url}
          - else
            div class="prose-p:m-1 mb-6 p-8 bg-orange-100 dark:bg-indigo-900 squircle"
              div class="flex h-8"
                - if mention.author_photo != ""
                  img loading="lazy" class="w-8 rounded-full m-0 mr-2" src=mention.author_photo
                - if mention.author_url == ""
                  = "From #{mention.author_name.gsub(/.{0,6}@/,'***@')}"
                - else
                  a class="block text-orange-700 dark:text-violet-300 no-underline hover:underline" href=mention.author_url
                    = mention.author_name
              div class="prose dark:prose-invert dark:text-indigo-250 prose-a:text-orange-700 dark:prose-a:text-violet-300 prose-a:no-underline hover:prose-a:underline"
                == mention.content_html
              div class="text-sm"
                - if mention.source_url != "email"
                  a class="no-underline hover:underline text-orange-900 dark:text-violet-400" href=mention.source_url
                    = mention.published_at.strftime("%e %B, %Y")
                - else
                  = mention.published_at.strftime("%e %B, %Y")
  div class="mb-12"
    - if trip
      div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex gap-4"
        a href="/trips/#{trip.id}" class="block grow bg-orange-100 hover:bg-orange-200 dark:bg-orange-600 hover:dark:bg-orange-900 rounded px-4 py-2 mb-2"
          span class="pr-8"✈️
          = "Part of the trip: "
          strong #{trip.name}
    - if post.tags.map(&:label).include? "weekly"
      div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex gap-4"
        div class="grow" hx-get="/post/top_tracks/#{post.slug}" hx-trigger="load"

      - if past_movies.count > 0
        div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 mb-4"
          h3 class="text-xl" Movies watched for the first time this week
          div class="flex gap-4 pb-4 mt-4"
            - past_movies.map do |movie|
              a href=movie.url
                figure class="w-24"
                  img loading="lazy" class="rounded hover:opacity-80" src=movie.poster
                  / figcaption= movie.title
          hr
      - if bookmarks_this_week.count > 0
        div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 mb-8"
          h3 class="text-xl mb-4" Bookmarked this week
          ul
            - bookmarks_this_week.each do |bookmark|
              li
                a class="block bg-emerald-100 dark:bg-emerald-600 hover:dark:bg-emerald-900 hover:bg-emerald-200 dark:text-white rounded mb-2 p-2"  href=bookmark.url
                  span class="grow-0 inline-block" = bookmark.name
      - if text_posts.count > 0 || photo_posts.count > 0
        div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 mb-4"
          h3 class="text-xl mb-0"  This week, years ago
      - if text_posts.count > 0
        div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 mb-4"
          div class="block grow bg-blue-100 dark:bg-blue-600 rounded mb-12"
            ul class="mt-0"
              - text_posts.each do |past_post|
                li class=""
                  a class="block content-justify hover:bg-blue-200 hover:dark:bg-blue-800 decoration-wavy rounded py-1.5 px-2" href=past_post.permalink
                    div class="flex justify-between"
                      span class="grow-0 inline-block pr-2" = past_post.display_title
                      span class="border-b border-blue-400 dark:border-blue-900 -top-3 relative border-dashed grow inline-block"
                      span class="grow-0 inline-block pl-2" = past_post.published_at.year
      div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex"
        div class="grid grid-cols-3 gap-4 mb-4 max-w-prose mx-auto"
          - photo_posts.group_by{ |p| p.published_at.year }.each do |year, posts|
            -posts.each_with_index do |post, index|
              div
                -if index == 0
                  p class="mb-1 px-1" = year
                - else
                  p class="mb-1 px-1"  
                == render "shared/photo_post", post: post, extended: false
    div class="mb-4 max-w-screen-md mx-auto border-t border-solid border-gray-200 dark:border-gray-600"

  div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex"
    div class=""
      = "Published "
      time class="dt-published" datetime=post.machine_published_at
        = post.display_published_at
      p
        a class="p-author h-card" href=Hanami.app.settings.micropub_site_url
          = "by #{Hanami.app.settings.site_name}"
      p
        span in 
        - if post.posted_in == :posts
          a class="hover:underline text-blue-400 dark:text-indigo-300" href="/posts" posts
        - if post.posted_in == :places
          a class="hover:underline text-blue-400 dark:text-indigo-300" href="/places" places
        - if post.posted_in == :statuses
          a class="hover:underline text-blue-400 dark:text-indigo-300" href="/statuses" statuses
        - if post.posted_in == :bookshelf
          a class="hover:underline text-blue-400 dark:text-indigo-300" href="/bookshelf" bookshelf
    span class="text-right flex-1 leading-6"
      == render "shared/tags", tags: post.tags
  div class="mb-2 max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex"
    - if post.syndicated?
      span Also on: 
      - post.syndicated_to.each do |loc|
        - next if loc[:location] == ""
        a rel="syndication" class="u-syndication" href=loc[:url]
          == render "shared/#{loc[:location]}"

svg width="10" height="10" viewBox="0 0 10 10"
  clipPath id="squircleClip" clipPathUnits="objectBoundingBox"
    path fill="red" stroke="none" d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5"