<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  page_title={@page_title}
  current_path={@conn.request_path}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
>
  <article class="post-container max-w-4xl mx-auto px-6 py-8">
    <%!-- Breadcrumb Navigation --%>
    <div class="breadcrumbs text-sm mb-6">
      <ul>
        <%= for breadcrumb <- @breadcrumbs do %>
          <li>
            <%= if breadcrumb.url do %>
              <.link navigate={breadcrumb.url}>{breadcrumb.label}</.link>
            <% else %>
              {breadcrumb.label}
            <% end %>
          </li>
        <% end %>
      </ul>
    </div>

    <%!-- Post Header --%>
    <header class="mb-8 border-b pb-6">
      <%= if has_publication_date?(@post) do %>
        <div class="flex items-center gap-2 text-sm text-base-content/70">
          <%!-- Publication Date (includes time when multiple posts on same date) --%>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
            />
          </svg>
          <time datetime={@post.metadata.published_at || ""}>
            {format_post_date(@post, @group_slug)}
          </time>
        </div>
      <% end %>
      <div class="flex flex-wrap items-center gap-4 mt-4">
        <%!-- Language Switcher --%>
        <%= if length(@translations) > 1 do %>
          <.publishing_language_switcher
            languages={build_public_translations(@translations, @current_language)}
            current_language={@current_language}
            show_status={false}
            size={:sm}
          />
        <% end %>
        <%!-- Version History Dropdown --%>
        <%= if @version_dropdown do %>
          <div class="dropdown dropdown-end">
            <div tabindex="0" role="button" class="btn btn-ghost btn-sm gap-1">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              v{@version_dropdown.current_version}
              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </div>
            <ul
              tabindex="0"
              class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-40 border border-base-200"
            >
              <%= for v <- @version_dropdown.versions do %>
                <li>
                  <.link
                    navigate={v.url}
                    class={"flex items-center justify-between #{if v.is_current, do: "active"}"}
                  >
                    <span>v{v.version}</span>
                    <%= if v.is_live do %>
                      <span class="badge badge-success badge-xs h-auto">live</span>
                    <% end %>
                  </.link>
                </li>
              <% end %>
            </ul>
          </div>
        <% end %>
      </div>
      <h1 class="text-3xl font-bold mt-4">
        {@post.metadata.title || PhoenixKit.Modules.Publishing.Constants.default_title()}
      </h1>
    </header>
    <%!-- Post Content --%>
    <div class="markdown-content max-w-none">
      {raw(@html_content)}
    </div>
    <%!-- Post Footer --%>
    <footer class="mt-12 pt-6 border-t">
      <.link
        navigate={group_listing_path(@current_language, @group_slug)}
        class="btn btn-ghost btn-sm"
      >
        <.icon name="hero-arrow-left" class="w-4 h-4 mr-2" /> {gettext("Back to %{group}",
          group: String.capitalize(@group_slug)
        )}
      </.link>
    </footer>
  </article>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
