defmodule Web.StatusHTML do
  use Web, :html

  embed_templates "status_html/*"

  attr :status, :map, required: true

  attr :class, :string, default: nil
  attr :rest, :global

  def status_entry(assigns) do
    ~H"""
    <.link
      navigate={~p"/status/#{@status.id}"}
      class="block border-x border-gray-200 border-t hover:bg-gray-50 u-url"
    >
      <article
        class={[
          "h-entry py-4",
          @class
        ]}
        {@rest}
      >
        <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={Core.Posts.publish_date_time(@status)}
                  format="{relative}"
                  formatter={:relative}
                  class="dt-published"
                />
              </div>
            </div>

            <div class="e-content">
              <.markdown content={@status.body} class="text-gray-900" />
            </div>
          </div>
        </div>
      </article>
    </.link>
    """
  end
end