<main id="main">
  <article class="container-content-wide page-wrapper">
    <%= @block.(:breadcrumb, []) %>
    <div class="content-layout">
      <div class="content-main">
        <header class="content-header">
          <div class="content-type-row">
            <span class="content-type-badge">
              <svg class="icon-3" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
              <%= @t.("articles_title") %>
            </span>
          </div>
          <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"><%= 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"><%= tag %></a>
  <% end %>
          </div>
  <% end %>
        </header>

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

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

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

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

      </div>

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