<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
  current_path={@url_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="min-h-screen flex flex-col">
    <%!-- Header --%>
    <div class="border-b border-base-300 bg-base-100">
      <div class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between">
          <%!-- Left: Back button and title --%>
          <div class="flex items-center gap-4">
            <.link
              navigate={PhoenixKit.Utils.Routes.path("/admin/pages")}
              class="btn btn-ghost btn-sm"
            >
              <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left class="w-4 h-4" />
              Back to Files
            </.link>
            <div>
              <h1 class="text-xl font-bold">{Path.basename(@file_path || "")}</h1>
              <%= if @metadata do %>
                <div class="flex items-center gap-2 text-sm text-base-content/60">
                  <.page_status_badge status={@metadata.status} />
                  <%= if @metadata.author do %>
                    <span>by {@metadata.author}</span>
                  <% end %>
                </div>
              <% end %>
            </div>
          </div>

          <%!-- Right: Edit button --%>
          <div class="flex gap-2">
            <.link
              navigate={PhoenixKit.Utils.Routes.path("/admin/pages/edit?path=#{@file_path}")}
              class="btn btn-primary btn-sm"
            >
              <PhoenixKitWeb.Components.Core.Icons.icon_edit class="w-4 h-4" /> Edit
            </.link>
          </div>
        </div>
      </div>
    </div>

    <%!-- Rendered Content Area --%>
    <div class="flex-1 bg-base-100">
      <div class="container mx-auto px-4 py-8 max-w-4xl">
        <%!-- GitHub-style markdown rendering with custom styles --%>
        <article class="markdown-content">
          <style>
            .markdown-content {
              color: oklch(var(--bc));
              line-height: 1.75;
            }

            .markdown-content h1 {
              font-size: 2.25rem;
              font-weight: 700;
              margin-top: 0;
              margin-bottom: 1rem;
              padding-bottom: 0.5rem;
              border-bottom: 1px solid oklch(var(--b3));
            }

            .markdown-content h2 {
              font-size: 1.875rem;
              font-weight: 700;
              margin-top: 2rem;
              margin-bottom: 1rem;
              padding-bottom: 0.5rem;
              border-bottom: 1px solid oklch(var(--b3));
            }

            .markdown-content h3 {
              font-size: 1.5rem;
              font-weight: 700;
              margin-top: 1.5rem;
              margin-bottom: 0.75rem;
            }

            .markdown-content h4 {
              font-size: 1.25rem;
              font-weight: 700;
              margin-top: 1.25rem;
              margin-bottom: 0.5rem;
            }

            .markdown-content h5 {
              font-size: 1.125rem;
              font-weight: 700;
              margin-top: 1rem;
              margin-bottom: 0.5rem;
            }

            .markdown-content h6 {
              font-size: 1rem;
              font-weight: 700;
              margin-top: 0.75rem;
              margin-bottom: 0.5rem;
            }

            .markdown-content p {
              margin-top: 1rem;
              margin-bottom: 1rem;
            }

            .markdown-content a {
              color: oklch(var(--p));
              text-decoration: none;
            }

            .markdown-content a:hover {
              text-decoration: underline;
            }

            .markdown-content strong {
              font-weight: 700;
            }

            .markdown-content em {
              font-style: italic;
            }

            .markdown-content code {
              background-color: oklch(var(--b2));
              padding: 0.125rem 0.375rem;
              border-radius: 0.25rem;
              font-size: 0.875em;
              font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            }

            .markdown-content pre {
              background-color: oklch(var(--b2));
              border: 1px solid oklch(var(--b3));
              border-radius: 0.5rem;
              padding: 1rem;
              overflow-x: auto;
              margin-top: 1rem;
              margin-bottom: 1rem;
            }

            .markdown-content pre code {
              background-color: transparent;
              padding: 0;
              border-radius: 0;
              font-size: 0.875rem;
            }

            .markdown-content blockquote {
              border-left: 4px solid oklch(var(--b3));
              padding-left: 1rem;
              margin-left: 0;
              margin-top: 1rem;
              margin-bottom: 1rem;
              font-style: italic;
              color: oklch(var(--bc) / 0.8);
            }

            .markdown-content ul, .markdown-content ol {
              margin-top: 1rem;
              margin-bottom: 1rem;
              padding-left: 1.5rem;
            }

            .markdown-content ul {
              list-style-type: disc;
            }

            .markdown-content ol {
              list-style-type: decimal;
            }

            .markdown-content li {
              margin-top: 0.5rem;
              margin-bottom: 0.5rem;
            }

            .markdown-content ul ul, .markdown-content ol ul {
              list-style-type: circle;
            }

            .markdown-content ul ul ul, .markdown-content ol ul ul {
              list-style-type: square;
            }

            .markdown-content table {
              width: 100%;
              border-collapse: collapse;
              margin-top: 1rem;
              margin-bottom: 1rem;
            }

            .markdown-content th {
              background-color: oklch(var(--b2));
              border: 1px solid oklch(var(--b3));
              padding: 0.75rem 1rem;
              text-align: left;
              font-weight: 600;
            }

            .markdown-content td {
              border: 1px solid oklch(var(--b3));
              padding: 0.75rem 1rem;
            }

            .markdown-content img {
              max-width: 100%;
              height: auto;
              border-radius: 0.5rem;
              margin-top: 1rem;
              margin-bottom: 1rem;
            }

            .markdown-content hr {
              border: 0;
              border-top: 1px solid oklch(var(--b3));
              margin-top: 2rem;
              margin-bottom: 2rem;
            }

            .markdown-content del {
              text-decoration: line-through;
              opacity: 0.7;
            }
          </style>
          {raw(@rendered_html)}
        </article>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
