<% content_for :head do %>
  <style>
    .grid-cell {
      padding: 0.25rem;
      border-right: 1px solid #e2e8f0;
    }
    .grid-cell:last-child {
      padding-left: 0;
      padding-right: 1rem;
      border-right: none;
    }
    .grid-cell:first-child {
      padding-left: 1rem;
    }
    .grid-row:hover .grid-cell {
      background-color: #f1f5f9;
    }
  </style>
<% end %>
<div class='mx-auto mt-4 sm:mt-6 text-center '>
  <h1 class='text-2xl'>HTTP Log Entries</h1>
  <div class='mt-2 text-lg flex items-center justify-center gap-2'>
    <%= link_to stats_log_entries_path(seconds: 60), class: "inline-flex items-center gap-1 text-blue-600 hover:text-blue-800" do %>
      <%= render partial: "shared/icons/chart_bars", locals: { class_name: "w-5 h-5" } %>
      View Statistics
    <% end %>
    <% if @uri_filter %>
      <span class="text-slate-400">|</span>
      <%= link_to "Back to All Entries", log_entries_path, class: "text-blue-600 hover:text-blue-800" %>
    <% end %>
  </div>
  <% if @uri_filter %>
    <div class='mt-2 text-slate-600'>
      Currently filtering: <code class="bg-slate-100 px-2 py-1 rounded font-mono text-sm"><%= @uri_filter %></code>
    </div>
  <% end %>
</div>
<%= render partial: "shared/pagination_controls", locals: { collection: @log_entries } %>
<div class="grid grid-cols-[auto_auto_auto_auto_1fr_auto_auto_auto] max-w-screen-lg mx-auto overflow-hidden border border-slate-200 bg-white shadow mb-4 rounded-lg">
  <div class='contents'>
    <div class="log-entry-table-header-cell text-center rounded-tl">ID</div>
    <div class="log-entry-table-header-cell text-right">Size</div>
    <div class="log-entry-table-header-cell text-center">Time</div>
    <div class="log-entry-table-header-cell text-center">Status</div>
    <div class="log-entry-table-header-cell text-center">URI</div>
    <div class="log-entry-table-header-cell text-center"><!-- External link --></div>
    <div class="log-entry-table-header-cell text-left">Type</div>
    <div class="log-entry-table-header-cell text-right rounded-tr">Resp</div>
  </div>
  <% @log_entries.each do |hle| %>
    <div class="contents group">
      <div class="log-entry-table-row-cell justify-end">
        <%= link_to hle.id, log_entry_path(hle.id), class: "text-blue-600 hover:text-blue-800 font-medium" %>
      </div>
      <div class="log-entry-table-row-cell justify-end">
        <%= HexUtil.humansize(hle.response_size) %>
      </div>
      <div class="log-entry-table-row-cell text-right">
        <%= time_ago_in_words(hle.created_at, include_seconds: true) %> ago
      </div>
      <div class="log-entry-table-row-cell text-center">
        <span class="<%= hle.status_code == 200 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' %> px-2 py-1 rounded-full text-xs font-medium">
          <%= hle.status_code %>
        </span>
      </div>
      <div class="log-entry-table-row-cell text-right min-w-0">
        <% iterative_parts = path_iterative_parts(hle.uri_path) %>
        <div class="flex items-center px-2 space-x-0 bg-slate-100 rounded group-hover:border-slate-700 border truncate group-hover:overflow-visible group-hover:z-10 relative">
          <a class="py-1 bg-slate-100 rounded-l hover:bg-slate-200 transition-colors" href="/log_entries/filter/<%= hle.uri_host %>">
            <span class="text-slate-600"><%= hle.uri_scheme %>://</span><span class="font-medium"><%= hle.uri_host %></span>
          </a>
          <%- iterative_parts.each_with_index do |(part, up_to), index| -%>
            <% uri_and_up_to = hle.uri_host + up_to %>
            <a
              class="py-1 hover:bg-slate-200 transition-colors"
              href="/log_entries/filter/<%= uri_and_up_to %>"
              title="<%= hle.uri_scheme + "://" + uri_and_up_to %>"
            >/<span class="font-medium text-nowrap"><%= part %></span></a>
          <%- end -%>
          <%- if hle.uri_query -%>
            <% query_parsed = Addressable::URI.form_unencode(hle.uri_query) %>
            <span class="py-1 text-slate-500" title="<%= query_parsed.pretty_inspect %>">
              ?<%= hle.uri_query %>
            </span>
          <%- end -%>
        </div>
      </div>
      <div class="log-entry-table-row-cell text-center">
        <%= link_to hle.uri.to_s, class: "text-blue-600 hover:text-blue-800 transition-colors", target: "_blank", rel: "noreferrer" do %>
          <%= render partial: "shared/icons/external_link", locals: { class_name: "w-4 h-4" } %>
        <% end %>
      </div>
      <div class="log-entry-table-row-cell">
        <span class="max-w-24 truncate inline-block" title="<%= hle.content_type %>">
          <%= hle.content_type %>
        </span>
      </div>
      <div class="justify-end log-entry-table-row-cell">
        <%= hle.response_time_ms %>ms
      </div>
    </div>
  <% end %>
</div>
