<% if projects.present? && projects.size > 0 %>
  <% max = projects.map { |p| p[:duration].to_f }.select { |d| d.finite? && d > 0 }.max || 1 %>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <% projects.each do |project| %>
      <div class="border border-primary rounded-xl p-5 transition-all duration-300 flex flex-col gap-3">
        <div class="flex justify-between items-start gap-2">
          <h3 class="text-lg font-semibold text-surface-content truncate flex-1" title="<%= h(project[:project]) %>">
            <%= h(project[:project].presence || 'Unknown') %>
          </h3>
          <% if project[:repo_url].present? %>
            <%= link_to project[:repo_url], target: "_blank", title: "View repository", class: "p-2 rounded-lg bg-surface-content/5 hover:bg-surface-content/10 transition-colors duration-200 shrink-0" do %>
              <svg class="w-4 h-4 text-surface-content/70" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
              </svg>
            <% end %>
          <% end %>
        </div>

        <div class="flex items-center gap-3">
          <span class="text-2xl font-bold text-primary"><%= ApplicationController.helpers.short_time_simple(project[:duration]) %></span>
        </div>

        <div class="w-full h-2 bg-darkless rounded-full overflow-hidden">
          <div class="h-full bg-primary rounded-full" style="width: <%= [(project[:duration].to_f.finite? ? project[:duration].to_f : 0) / max.to_f * 100, 100].min %>%;"></div>
        </div>
      </div>
    <% end %>
  </div>
<% end %>
