div class="max-w-screen-md mx-auto px-4 m-4 h-max"
  div class="p-4 m-2"
    div class="prose dark:prose-invert md:col-span-16 p-4"
      h2 class="mt-0" = display_date

      a href="/timemachine/#{prev_date}" ← #{prev_date}

      a class="inline-block px-2" href="/timemachine/#{today}" Today

      - if next_date
        a href="/timemachine/#{next_date}" #{next_date} →

      - if posts.count > 0
        div class="mt-4"
          - posts.each_with_index do |post, index|
            div class="#{"border-t-2" if index == 0} border-b-2 border-gray-200 dark:border-indigo-300"
              - if post.photos.count == 0
                a href="/post/#{post.slug}"
                  h3= post.name
                == post.excerpt
                - if post.name == ""
                  p
                    a href="/post/#{post.slug}" 🔗 permalink
              - else
                div class="grid grid-cols-3 gap-2 pb-4"
                  - if post.photos.count > 0
                    - post.photos.each do |photo|
                      a href="/post/#{post.slug}"
                        img loading="lazy" class="mb-0 rounded" src="#{photo["value"]}"
                        = post.name
              - if post.location
                div class="text-sm"
                  img loading="lazy" class="rounded mb-4" src=post.large_map
      - else
        p No posts

      - if bookmarks.count > 0
        h3 class="" Bookmarks

        div
          ul
            - bookmarks.each do |bookmark|
              li
                a href="/bookmark/#{bookmark.slug}"
                  = bookmark.name

      - if podcasts.count > 0
        h3 class="" Podcasts

        div
          ul
            - podcasts.each do |podcast|
              li
                a href=podcast.url
                  =podcast.title
                  div
                    small = podcast.podcast_name
      / h3 class="mt-0" Music
      / h3 class="mt-0" Reading

    div class="w-full p-2 md:block hidden prose dark:prose-invert"
      div class=""
        - posts_by_month.each do |year, months|
          div class="text-center"
            div class="my-4"
              h3 class="m-0" = year
              small class="text-sm"
                = "#{months.values.flatten.map(&:values).flatten.sum} posts"
            div class="text-sm flex justify-between"
              div Jan
              div Feb
              div Mar
              div Apr
              div May
              div Jun
              div Jul
              div Aug
              div Sep
              div Oct
              div Nov
              div Dec
            div class="grid grid-rows-7 grid-flow-col gap-0.5 col-start-2"
              - months.each do |month, days|
                - days.each do |day, post_count|
                  a class="group block h-2.5 w-2.5 #{post_count == 0 ? "bg-gray-50 dark:bg-indigo-800" : "bg-pink-600 dark:bg-amber-400 hover:bg-pink-800 hover:dark:bg-amber-200"}" style="opacity: #{post_count == 0 ? 1.0 : post_count.to_f / days.values.max}" href="/timemachine/#{year}/#{month}/#{day}"