
<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
  <div class="flex justify-between items-center w-full">
    <h3 class="text-xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed hover:underline"">
     <a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"><%= category.name %> </a>
      </h3> <span class="text-slate-500"><%= category.articles.published.size %> articles</span>
  </div>
  <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 mb-4">
      <p class="text-sm text-slate-500">No articles here</p>
    </div>
    <% else %>
    <% category.articles.published.take(5).each do |article| %>
    <div class="flex justify-between content-center h-8 my-1">
      <a class="text-slate-800 hover:underline leading-8"
        href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>/<%= article.id %>" class=""><%= article.title %></a>
      <span class="flex items-center">
        <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>
    </div>
    <% end %>
    <% end %>

  </div>
  <div>
    <a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"
      class="flex flex-row items-center text-base font-medium text-woot-600 hover:text-slate-900 hover:underline mt-4">

      View all articles
      <span class="ml-2">
        <svg class="w-4 h-4 fill-current text-woot-500" width="24" height="24" fill="none" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" />
        </svg>
      </span>
    </a>
  </div>
</section>
