<div class="max-w-2xl mx-auto mt-2">
  <!-- Recent Blog Posts -->
  <section class="mb-8 p-4">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-bold">Writing</h2>
      <.link navigate={~p"/blog"} class="text-sm text-gray-500 hover:text-gray-800">
        See all →
      </.link>
    </div>

    <ul>
      <%= for blog <- @recent_blogs do %>
        <li>
          <article class="h-entry">
            <.link
              navigate={Web.Paths.public_blog_path(blog)}
              class="flex justify-between items-center hover:bg-gray-50 -mx-2 px-2 py-1 rounded"
            >
              <h3 class="p-name u-url truncate">{blog.title}</h3>
              <div class="text-gray-500 dt-published flex-shrink-0">
                <.timex value={Core.Posts.publish_date_time(blog)} format="{Mfull} {D}, {YYYY}" />
              </div>
            </.link>
          </article>
        </li>
      <% end %>
    </ul>
  </section>
</div>

<!-- Recent Statuses -->
<div class="max-w-2xl mx-auto">
  <section>
    <div class="flex justify-between items-center mb-4 py-2 px-4">
      <h2 class="text-xl font-bold">Microblog</h2>
      <.link navigate={~p"/microblog"} class="text-sm text-gray-500 hover:text-gray-800">
        See all →
      </.link>
    </div>

    <div class="border border-gray-200">
      <%= for status <- @recent_statuses do %>
        <.link
          navigate={~p"/status/#{status.id}"}
          class="block border-t first:border-t-0 border-gray-200 hover:bg-gray-50 u-url"
        >
          <article class="h-entry py-4 max-h-80 overflow-hidden relative">
            <div class="flex items-start">
              <div class="flex-shrink-0 pl-3 pr-2">
                <%= if Core.Author.get(:avatar_url) do %>
                  <img
                    src={Core.Author.get(:avatar_url)}
                    alt={Core.Author.get(:name)}
                    class="w-10 h-10 rounded-full u-photo"
                  />
                <% else %>
                  <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-xl u-photo">
                    {Core.Author.get(:avatar_emoji)}
                  </div>
                <% end %>
              </div>

              <div class="flex-grow min-w-0 pl-1 pr-3">
                <div class="flex items-center mb-1">
                  <p class="p-name font-bold">
                    {Core.Author.get(:name)}
                  </p>
                  <p class="ml-1 inline">
                    <span class="p-nickname font-normal text-gray-600">
                      @{Core.Author.get(:username)}
                    </span>
                  </p>
                  <span class="mx-2 text-sm text-gray-500">·</span>
                  <div class="text-sm text-gray-500">
                    <.timex
                      value={status.published_at}
                      format="{relative}"
                      formatter={:relative}
                      class="dt-published"
                    />
                  </div>
                </div>

                <div class="e-content">
                  <.markdown content={status.body} class="text-gray-900" />
                </div>
              </div>
            </div>
            <div class="w-full h-4 absolute bottom-0 bg-gradient-to-t from-white" />
          </article>
        </.link>
      <% end %>
    </div>
  </section>
</div>