<div class="rounded-primary padding-primary">
  <div class="mb-4">
    <h2 class="text-sm leading-5 font-semibold">Metas</h2>
  </div>

  <div class="my-2 text-sm text-gray-500">
      <div class="flex flex-row flex-wrap">
        <div class="mr-4">
          Product: 
          <% @article.products.each do |product| %>
             <%= link_to product.name, articles_path(request.query_parameters.except(:page).merge(product: product.name)), class: "btn-tag" %>

          <% end %>
      
        </div>
        <div class="mr-4">
          Components：
          <% @article.components.each do |c| %>
            <%= link_to c.name, articles_path(request.query_parameters.except(:page).merge(component: c.name)), class: "btn-tag" %>
          <% end %>
        </div>

        <div class="mr-4">
          Categories：
          <% @article.categories.each do |c| %>
            <%= link_to c.name, articles_path(request.query_parameters.except(:page).merge(category: c.name)), class: "btn-tag" %>
          <% end %>
        </div>

        <% if @article.tags.present? %>
          <div>
            Tags：
            <% @article.tags.each do |t| %>
              <%= link_to t.name, articles_path(request.query_parameters.except(:page).merge(tag: t.name)), class: "btn-tag" %>
            <% end %>
          </div>
        <% end %>
      </div>
  </div>

</div>