article class="h-entry"
  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
    nav class="space-x-1 text-sm md:text-sm md:block"
      - if post.location || post.photos? || post.videos?
        span See more:
      - if post.location
        a href="/places" places
      - if post.photos? || post.videos?
        a href="/photos" photos
    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"
      div class="e-content"
        == post.content

      - if post.photos?
        - post.photos.each do |photo|
          figure
            img 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 do |video|
          figure
            video loop=true muted=true controls=true
              source type="video/mp4" src="#{video["value"]}"
            figcaption= video["alt"]

      - if post.location
        img class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map
  - if trip
    div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex gap-4"
      div class="block grow bg-orange-100 dark:bg-orange-600 rounded px-4 py-2 mb-12"
        a href="/trips/#{trip.id}"
          = "✈️ Part of the trip: "
          strong #{trip.name}
          |  &rarr;
  - 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 text_posts.count > 0
        div class="block grow bg-blue-100 dark:bg-blue-600 rounded px-4 py-2 mb-12"
          p class="text-sm mb-0" This week, years ago
          ul class="mt-0"
            - text_posts.each do |past_post|
              li class="m-0"
                a class="hover:underline" href=past_post.permalink
                  = "#{past_post.display_title} (#{past_post.published_at.year})"

    div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200 flex"
    - photo_posts.group_by{ |p| p.published_at.year }.each do |year, posts|
      div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200"
        div class="max-w-prose mx-auto text-gray-600 dark:text-gray-200"
          = year
        div class="grid grid-cols-3 gap-4 mb-4 max-w-prose mx-auto"
          -posts.each do |post|
            == render "shared/photo_post", post: post
  div class="mb-4 max-w-screen-md mx-auto border-t-4 border-solid border-gray-400 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}"
    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:&nbsp;
      - post.syndicated_to.each do |loc|
        a rel="syndication" class="u-syndication" href=loc[:url]
          == render "shared/#{loc[:location]}"
