<article class="container-content-wide page-wrapper">
  <%= @block.(:breadcrumb, []) %>
  <div class="content-layout">
    <div class="content-main">
      <header class="content-header">
        <h1 class="page-title-xl"><%= @content.title %></h1>
        <div class="content-meta-row">
<%= if @content.date do %>
          <span class="content-meta-item">
            <svg class="icon-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
            <time datetime="<%= @content.date %>"><%= @format_date.(@content.date) %></time>
<%= if @content.meta["updated"] && to_string(@content.meta["updated"]) != to_string(@content.date) do %>
            <span class="content-meta-separator">&middot;</span>
            <span><%= @t.("updated_on") |> String.replace("%{date}", @format_date.(@content.meta["updated"])) %></span>
<% end %>
          </span>
<% end %>
<%= if @content.meta["reading_time"] do %>
          <%= @block.(:reading_time, []) %>
<% end %>
          <%= @block.(:copy_link, []) %>
        </div>
<%= if @content.categories != [] do %>
<% cat_base = if (@content.meta["lang_prefix"] || "") == "", do: "/categories/", else: "/#{@content.meta["lang_prefix"]}/categories/" %>
        <div class="content-chip-row">
<%= for cat <- @content.categories do %>
          <a href="<%= cat_base %><%= Slug.slugify(cat) %>/" class="chip-category-link"><svg class="icon-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg><%= cat %></a>
<% end %>
        </div>
<% end %>
<%= if @content.tags != [] do %>
<% tag_base = if (@content.meta["lang_prefix"] || "") == "", do: "/tags/", else: "/#{@content.meta["lang_prefix"]}/tags/" %>
        <div class="content-chip-row">
<%= for tag <- @content.tags do %>
          <a href="<%= tag_base %><%= Slug.slugify(tag) %>/" class="chip-tag-link"><svg class="icon-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><line x1="4" x2="20" y1="9" y2="9"/><line x1="4" x2="20" y1="15" y2="15"/><line x1="10" x2="8" y1="3" y2="21"/><line x1="16" x2="14" y1="3" y2="21"/></svg><%= tag %></a>
<% end %>
        </div>
<% end %>
      </header>

<%= if @content.meta["image"] do %>
      <figure class="content-figure">
        <img src="<%= @content.meta["image"] %>" alt="<%= @content.title %>"
             class="content-image"
             loading="lazy" decoding="async">
      </figure>
<% end %>

      <div class="toc-mobile">
        <%= @block.(:toc, variant: :mobile) %>
      </div>

      <div class="prose-article">
        <%= @inner_content %>
      </div>

      <%= @block.(:related_articles, []) %>

    </div>

    <aside class="toc-sidebar">
      <%= @block.(:toc, []) %>
    </aside>
  </div>
</article>
