<% content_for :head do %>
  <title><%= @category.name %> | <%= @portal.name %></title>
  <% if @category.description.present? %>
    <meta name="description" content="<%= @category.description %>">
  <% end %>
<% end %>

<div class="bg-gradient-to-b from-white to-black-50 pt-8 pb-16">
  <div class="max-w-5xl px-4 mx-auto space-y-2">
    <a
      class="text-slate-700 text-sm hover:underline leading-8"
      href="/hc/<%= @portal.slug %>/<%= @category.locale %>"
    >
      Home
    </a>
    <span class="text-xs text-slate-600 px-1">/</span>
    <div class="flex justify-start items-center w-full">
      <h1 class="text-3xl font-bold leading-snug md:tracking-normal text-slate-900">
        <%= @category.name %>
      </h1>
      <div class="text-slate-500 px-8 mt-2"><%= @category.articles.published.size %> articles</div>
    </div>
  </div>
</div>

<section class="bg-white max-w-5xl w-full mx-auto py-6 px-4 flex flex-col items-center justify-center flex-grow">
  <div class="py-4 w-full mt-2 flex-grow">
    <% if @category.articles.published.size == 0 %>
    <div class="h-full flex items-center justify-center bg-slate-50 rounded-xl">
      <p class="text-sm text-slate-500">No articles here</p>
    </div>
    <% else %>
    <% @category.articles.published.each do |article| %>
      <a
        class="text-slate-800 flex justify-between content-center mb-4 py-2"
        href="/hc/<%= @portal.slug %>/<%= @category.locale %>/<%= @category.slug %>/<%= article.id %>"
      >
        <div>
          <p class="font-medium mb-2 hover:underline"><%= article.title %></p>
          <p class="text-sm">Last updated on <%= article.updated_at.strftime("%b %d, %Y") %></p>
        </div>

        <span>
          <svg
            class="w-4 h-4 fill-current text-slate-700"
            width="24"
            height="24"
            fill="none"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
            />
          </svg>
        </span>
      </a>
    <% end %>
    <% end %>
  </div>
</section>
