<%# locals: (portal:) %>
<section class="flex flex-col w-full h-full lg:container">
  <div class="flex flex-col gap-8 h-full">
    <div class="flex justify-between items-center w-full">
      <h3 class="text-xl text-slate-800 dark:text-slate-50 font-semibold leading-relaxed hover:cursor-pointer hover:underline">
        <%= I18n.t('public_portal.header.uncategorized') %>
      </h3>
    </div>
    <div class="-mt-4">
      <% portal.articles.published.where(category_id: nil, locale: @locale).order(position: :asc).take(5).each do |article| %>
      <a
        class="leading-7 text-slate-700 dark:text-slate-100"
        href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, true) %>"
      >
        <div class="flex justify-between hover:cursor-pointer items-center py-1 rounded-lg gap-3  hover:underline">
          <%= article.title %>
          <span class="flex items-center font-normal">
            <%= render partial: 'icons/chevron-right' %>
          </span>
        </div>
      </a>
      <% end %>
    </div>
    <div class="flex justify-between flex-row items-center">
      <span class="text-sm font-medium text-slate-600 dark:text-slate-400"><%= render 'public/api/v1/portals/article_count', article_count: portal.articles.published.where(category_id: nil, locale: @locale).size %></span>
    </div>
  </div>
</section>
