<% content_for :head do %>
  <%= render 'public/api/v1/portals/documentation_layout/articles/meta_head',
             article: @article, portal: @portal, og_image_url: @og_image_url %>
<% end %>

<div class="px-6 md:px-10 py-8 md:py-10">
  <div class="flex gap-10">
    <article class="flex-1 min-w-0">
      <%= render 'public/api/v1/portals/documentation_layout/breadcrumb',
                 portal: @portal, locale: @locale, category: @article.category, article: @article %>
      <%= render 'public/api/v1/portals/documentation_layout/articles/header',
                 portal: @portal, article: @article %>

      <%= render 'public/api/v1/portals/articles/content',
                 parsed_content: @parsed_content,
                 link_class: 'prose-a:text-n-portal prose-a:no-underline hover:prose-a:underline' %>

      <% if @article.category %>
        <footer class="mt-20 pt-8 border-t border-n-weak flex items-center justify-between gap-4 flex-wrap">
          <a href="<%= public_portal_category_path(@portal.slug, @article.category.locale, @article.category.slug) %>"
             class="group inline-flex items-center gap-2 px-3 py-2 -ml-3 text-sm font-medium text-n-slate-11 hover:text-n-slate-12 hover:bg-n-alpha-2 rounded-md transition">
            <span class="i-lucide-arrow-left size-3.5 transition-transform group-hover:-translate-x-0.5" aria-hidden="true"></span>
            <%= I18n.t('public_portal.sidebar.back_to_category', name: @article.category.name) %>
          </a>
        </footer>
      <% end %>
    </article>

    <aside class="hidden lg:block w-56 shrink-0">
      <div class="sticky top-20" id="cw-hc-toc"></div>
    </aside>
  </div>
</div>
