<% content_for :head do %>
  <title><%= @article.title %> | <%= @portal.display_title(@locale) %></title>
  <% if @article.meta["title"].present? %>
    <meta name="title" content="<%= @article.meta["title"] %>">
    <meta property="og:title" content="<%= @article.meta["title"] %>">
    <meta name="twitter:title" content="<%= @article.meta["title"] %>">
  <% end %>
  <% if @article.meta["description"].present? %>
    <meta name="description" content="<%= @article.meta["description"] %>">
    <meta property="og:description" content="<%= @article.meta["description"] %>">
    <meta name="twitter:description" content="<%= @article.meta["description"] %>">
  <% end %>
  <% if @article.meta["tags"].present? %>
    <meta name="tags" content="<%= @article.meta["tags"].join(',') %>">
  <% end %>
  <% if @og_image_url.present? %>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="og:image" content="<%= @og_image_url.html_safe %>">
    <meta property="og:image" content="<%= @og_image_url.html_safe %>">
    <meta name="twitter:image" content="<%= @og_image_url.html_safe %>">
  <% end %>
<% end %>

<% if !@is_plain_layout_enabled %>
<div id="portal-bg" class="bg-white dark:bg-slate-900 shadow-inner">
  <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6">
    <div class="max-w-5xl px-4 md:px-8 mx-auto flex flex-col">
      <%= render "public/api/v1/portals/articles/article_header", article: @article %>
    </div>
  </div>
</div>
<% else %>
<div class="max-w-5xl mx-auto space-y-4 w-full px-4 md:px-8 <%= @is_plain_layout_enabled ? 'py-4' : 'py-8' %>">
  <%= render "public/api/v1/portals/articles/article_header", article: @article %>
</div>
<% end %>

<div class="flex max-w-5xl w-full px-4 md:px-8 mx-auto">
  <article id="cw-article-content" class="article-content flex-grow flex-2 mx-auto text-slate-800 dark:text-slate-50 text-lg max-w-3xl prose-h1:text-2xl prose-h2:text-xl prose-h2:mt-0 prose-h3:text-lg prose-code:[&>p]:p-1 prose-code:[&>p]:rounded-sm prose-code:[&>p]:bg-black-100 dark:prose-code:[&>p]:bg-black-600 prose-code:after:content-none prose-code:before:content-none prose dark:prose-invert break-words w-full [&_table]:!border-slate-200 dark:[&_table]:!border-slate-800 [&_th]:!border-slate-200 dark:[&_th]:!border-slate-800 [&_td]:!border-slate-200 dark:[&_td]:!border-slate-800 [&_th]:!bg-slate-50 dark:[&_th]:!bg-slate-800/50 <%= @is_plain_layout_enabled ? 'py-4' : 'pt-8 pb-12' %>">
    <%= @parsed_content %>
  </article>
  <div class="flex-1" id="cw-hc-toc"></div>
</div>
<style>
  .article-content li > p {
    margin: 0;
  }
  .article-content .tableWrapper {
    overflow-x: auto;
    margin-bottom: 1rem;
  }
  .article-content table {
    min-width: 100%;
    border: 1px solid;
    border-radius: 8px;
    border-spacing: 0;
    border-collapse: separate;
    margin: 0;
  }
  .article-content th,
  .article-content td {
    border-bottom: 1px solid;
    border-inline-end: 1px solid;
    border-color: inherit;
    padding: 0.5rem 0.75rem;
    text-align: start;
    vertical-align: top;
  }
  .article-content th:last-child,
  .article-content td:last-child {
    border-inline-end: none;
  }
  .article-content th {
    font-weight: 600;
  }
  .article-content th:first-child {
    border-start-start-radius: 7px;
  }
  .article-content th:last-child {
    border-start-end-radius: 7px;
  }
  .article-content tr:last-child td {
    border-bottom: none;
  }
</style>
