<div>
  <div class="sm:block">
    <nav class="flex space-x-4" aria-label="Tabs">

      <%= link_to "全部(#{(Article.count)})", admin_articles_path, class: "text-gray-600 hover:text-gray-800 px-3 py-2 font-medium text-sm rounded-md" %>

      <%= link_to "待审核(#{Article.where(verified_status: :unverified).count})", admin_articles_path(verified_status: :unverified), class: "text-gray-600 hover:text-gray-800 px-3 py-2 font-medium text-sm rounded-md" %>

      <%= link_to "我的(#{Article.where(user_id: current_user.id).count})", admin_articles_path(user_id: current_user.id), class: "text-gray-600 hover:text-gray-800 px-3 py-2 font-medium text-sm rounded-md" %>
      <%= link_to "已验证(#{Article.where(verified_status: :verified).count})", admin_articles_path(verified_status: :verified), class: "text-gray-600 hover:text-gray-800 px-3 py-2 font-medium text-sm rounded-md" %>
      <%= link_to "已删除(#{Article.where(verified_status: :deleted).count})", admin_articles_path(verified_status: :deleted), class: "text-gray-600 hover:text-gray-800 px-3 py-2 font-medium text-sm rounded-md" %>
    </nav>
  </div>
</div>


<div class="mt-3 flex flex-col">
  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
      <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                作者
              </th>
              <th scope="col" class="w-1/4 px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                标题
              </th>
              <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                产品
              </th>
              <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                模块
              </th>
              <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                状态
              </th>
              <th scope="col" class="relative px-6 py-3 w-1/8">
                <span class="sr-only">Edit</span>
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <% @articles.each do |article| %>
            <tr>
              <td class="px-2 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10">
                    <%= lavatar_tag(article.user.letter_char, 16, title: article.user.username, class: "h-10 w-10 rounded-full") %>
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900">
                      <%= article.user.username %>
                    </div>
                    <div class="text-sm text-gray-500">
                      <%= article.user.email %>
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-2 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900"><%= link_to article.title, article_path(article) %></div>
               
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <% article.products.each do |product|%>
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                    <%= product.name %>
                  </span>
                <% end %>
              </td>
              <td class="px-2 py-4 whitespace-nowrap text-sm text-gray-500">
                <% article.components.each do |component| %>
                  <span class="px-2 py-1 text-red-800 text-xs font-medium bg-red-100 rounded-full"><%= component.name %></span>
                <% end %>
              </td>
              <td class="px-2 py-4 whitespace-nowrap text-sm text-gray-500">
                  <span class="px-2 py-1 text-green-800 text-xs font-medium bg-green-100 rounded-full"><%= article.verified_status.humanize %></span>
                  <% if article.deleted? && article.deleted_by %>
                    by <%= article.deleted_by.username %>
                  <% end %>
              </td>
              <td class="px-2 py-4 whitespace-nowrap text-right text-sm font-medium">

               <% if policy(article).approve? && article.unverified? %>
                <%= link_to approve_article_path(article), remote: true, method: :put, class: "text-xs btn-primary" do %>
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  <span><%= t("approve") %></span>
                <% end %>
              <% elsif current_user.admin? && article.deleted? %>
                 <%= link_to restore_admin_article_path(article), remote: true, method: :put, class: "text-xs btn-green" do %>
                    <svg  class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                  <span><%= t("restore") %></span>
                <% end %>
              <% else %>
                
              <% end %>

      
              </td>
            </tr>
            <% end %>

            <!-- More people... -->
          </tbody>
        </table>
        
        
      </div>
    </div>
    <div class="py-2 px-8">
       <%== pagy_nav(@pagy) %>
    </div>
  </div>
</div>






