<article class="container-content page-wrapper">
  <%= @block.(:breadcrumb, []) %>
  <div class="border-t-2 border-primary dark:border-primary-400 pt-8">
    <header class="mb-8">
      <div class="flex items-center gap-2 mb-3">
        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-primary-50 text-primary dark:bg-primary-900/30 dark:text-primary-400">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z"/><path d="M15 3v4a2 2 0 0 0 2 2h4"/></svg>
          <%= @t.("note") %>
        </span>
      </div>
      <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-slate-50"><%= @content.title %></h1>
      <div class="mt-3 flex flex-wrap items-center gap-4 text-sm text-slate-400 dark:text-slate-500">
<%= if @content.date do %>
        <span class="inline-flex items-center gap-1.5">
          <svg class="w-4 h-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="text-slate-300 dark:text-slate-600">&middot;</span>
          <span><%= @t.("updated_on") |> String.replace("%{date}", @format_date.(@content.meta["updated"])) %></span>
<% end %>
        </span>
<% 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="mt-3 flex flex-wrap gap-1.5">
<%= for cat <- @content.categories do %>
        <a href="<%= cat_base %><%= Slug.slugify(cat) %>/" class="inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs font-medium bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400 hover:bg-amber-100 hover:text-amber-800 dark:hover:bg-amber-900/40 dark:hover:text-amber-300"><svg class="w-3 h-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="mt-3 flex flex-wrap gap-1.5">
<%= for tag <- @content.tags do %>
        <a href="<%= tag_base %><%= Slug.slugify(tag) %>/" class="inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs font-medium bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400 hover:bg-primary-50 hover:text-primary dark:hover:bg-primary-900/30 dark:hover:text-primary-400"><svg class="w-3 h-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>

    <div class="prose-content prose-code prose-toc">
      <%= @inner_content %>
    </div>

  </div>
</article>
