<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
  current_path={@conn.request_path}
  project_title={PhoenixKit.Settings.get_project_title()}
  current_locale={assigns[:current_locale] || PhoenixKit.Utils.Routes.get_default_admin_locale()}
>
  <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(@html_content)}
    </article>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
