<li data-controller="remote-forms" class="px-1 py-2 lg:py-4 relative hover:bg-gray-50">
  <!-- Repo name and link -->
  <div class="min-w-0 space-y-2 w-full md:w-auto">
    <%= link_to article_path(article, params[:query].present? ? {from_keyword: params[:query]} : {}), class: "block" do %>
      <div class="flex items-center space-x-2">
       
        <span class="block break-all">
          <h1 class="text-md font-medium leading-5">
            <span class="align-middle font-sans">
              <% if params[:query].present? %>
                <%= highlight(article.title, params[:query].split(/\s+/), highlighter: '<em class="bg-yellow-100">\1</em>') %>
              <% else %>
                <%= article.title %>
              <% end %>
            </span>
          </h1>
        </span>
      </div>
    <% end %>

    
    <div class="text-gray-400 text-xs">
      <span class="align-middle break-all font-serif">
        <% if params[:query].present? %>
          <%= highlight(article.issue_description, params[:query].split(/\s+/), highlighter: '<em class="bg-yellow-100">\1</em>') %>
        <% else %>
          <%= article.issue_description %>
        <% end %>
      </span>
    </div>
  </div>
  <!-- Repo meta info -->
  <div class="flex flex-row-reverse pl-1 items-center justify-between flex-shrink-0 mt-3">
    <div class="flex items-center justify-end space-x-2 lg:space-x-4 text-sm leading-5 text-gray-500">

      <a href="<%= article_path(article) %>" class="flex items-center space-x-0.5 relative hover:text-gray-700">
        <svg class="w-6 h-6" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
        <span><%= article.comments_count %></span>
      </a>

      <div @click.away="open = false" class="flex-shrink-0 relative" x-data="{ open: false }">
        <div class="hover:text-gray-900">
          <a @click="open = !open" type="button" class="cursor-pointer rounded-md transition ease-in-out duration-150" aria-haspopup="true" aria-expanded="true">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </a>
        </div>
        <div x-show="open" x-description="Profile dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="mt-1 w-44 origin-top-right absolute right-0 rounded-md shadow-lg z-10" style="display: none;">
          <div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">

            <%= link_to render_twitter_share_link(article), target: "_blank", class: "relative flex items-center space-x-1 px-2 py-2 hover:text-gray-800" do %>
                <svg class="w-5 h-5" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
                  <path d="M14.478 1.5l.5-.033a.5.5 0 00-.871-.301l.371.334zm-.498 2.959a.5.5 0 10-1 0h1zm-6.49.082h-.5.5zm0 .959h.5-.5zm-6.99 7V12a.5.5 0 00-.278.916L.5 12.5zm.998-11l.469-.175a.5.5 0 00-.916-.048l.447.223zm3.994 9l.354.353a.5.5 0 00-.195-.827l-.159.474zm7.224-8.027l-.37.336.18.199.265-.04-.075-.495zm1.264-.94c.051.778.003 1.25-.123 1.606-.122.345-.336.629-.723 1l.692.722c.438-.42.776-.832.974-1.388.193-.546.232-1.178.177-2.006l-.998.066zm0 3.654V4.46h-1v.728h1zm-6.99-.646V5.5h1v-.959h-1zm0 .959V6h1v-.5h-1zM10.525 1a3.539 3.539 0 00-3.537 3.541h1A2.539 2.539 0 0110.526 2V1zm2.454 4.187C12.98 9.503 9.487 13 5.18 13v1c4.86 0 8.8-3.946 8.8-8.813h-1zM1.03 1.675C1.574 3.127 3.614 6 7.49 6V5C4.174 5 2.421 2.54 1.966 1.325l-.937.35zm.021-.398C.004 3.373-.157 5.407.604 7.139c.759 1.727 2.392 3.055 4.73 3.835l.317-.948c-2.155-.72-3.518-1.892-4.132-3.29-.612-1.393-.523-3.11.427-5.013l-.895-.446zm4.087 8.87C4.536 10.75 2.726 12 .5 12v1c2.566 0 4.617-1.416 5.346-2.147l-.708-.706zm7.949-8.009A3.445 3.445 0 0010.526 1v1c.721 0 1.37.311 1.82.809l.74-.671zm-.296.83a3.513 3.513 0 002.06-1.134l-.744-.668a2.514 2.514 0 01-1.466.813l.15.989zM.222 12.916C1.863 14.01 3.583 14 5.18 14v-1c-1.63 0-3.048-.011-4.402-.916l-.556.832z" fill="currentColor"></path>
                </svg>
              <span><%= t("share_to_twitter") %></span>
            <% end %>

            <% if policy(article).update? %>
              <%= link_to edit_article_path(article), class: "relative flex items-center space-x-1 px-2 py-2 hover:text-gray-800" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                <span><%= t("edit") %></span>
              <% end %>
            <% end %>

            <% if policy(article).approve? && article.unverified? %>
              <%= link_to approve_article_path(article), remote: true, method: :put, class: "relative flex items-center space-x-1 px-2 py-2 hover:text-gray-800" 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 %>
            <% end %>

            <% if policy(article).disapprove? && article.verified? %>
              <%= link_to disapprove_article_path(article), remote: true, method: :put, class: "relative flex items-center space-x-1 px-2 py-2 hover:text-gray-800" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                <span><%= t("disapprove") %></span>
              <% end %>
            <% end %>

            <% if current_user&.admin? %>
              <%= link_to admin_article_path(article), remote: true, method: :delete, class: "relative flex items-center space-x-1 px-2 py-2 hover:text-gray-800" 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                <span><%= t("soft_delete") %></span>
              <% end %>
            <% end %>
            
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-end text-gray-500 text-sm leading-5 space-x-0.5 ">
      <span><%= article.user&.username %></span>
      <span>&middot;</span>
      <span class="timeago" datetime="<%= article.created_at.to_s %>"></span>
    </div>
  </div>
  <div data-target="remote-forms.container">
  </div>
</li>
