{% extends "base.html" %}
{% load humanize %}
{% block title %}Explore Projects — Fossilrepo{% endblock %}

{% block content %}
<div class="md:flex md:items-center md:justify-between mb-6">
  <div>
    <h1 class="text-2xl font-bold text-gray-100">Explore Projects</h1>
    <p class="mt-1 text-sm text-gray-400">Discover public and open-source Fossil repositories.</p>
  </div>
</div>

<!-- Search and Sort controls -->
<div class="flex flex-col sm:flex-row gap-4 mb-6">
  <form method="get" action="{% url 'explore' %}" class="flex-1 flex gap-2">
    <input type="search"
           name="search"
           value="{{ search }}"
           placeholder="Search projects..."
           class="flex-1 max-w-md rounded-md border-gray-700 bg-gray-800 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm" />
    {% if sort != "stars" %}
    <input type="hidden" name="sort" value="{{ sort }}" />
    {% endif %}
    <button type="submit"
            class="rounded-md bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-100 ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
      Search
    </button>
  </form>
  <div class="flex gap-2">
    <a href="{% url 'explore' %}?sort=stars{% if search %}&search={{ search }}{% endif %}"
       class="rounded-md px-3 py-2 text-sm font-medium {% if sort == 'stars' %}bg-brand text-white{% else %}bg-gray-700 text-gray-300 ring-1 ring-inset ring-gray-600 hover:bg-gray-600{% endif %}">
      Stars
    </a>
    <a href="{% url 'explore' %}?sort=recent{% if search %}&search={{ search }}{% endif %}"
       class="rounded-md px-3 py-2 text-sm font-medium {% if sort == 'recent' %}bg-brand text-white{% else %}bg-gray-700 text-gray-300 ring-1 ring-inset ring-gray-600 hover:bg-gray-600{% endif %}">
      Recent
    </a>
    <a href="{% url 'explore' %}?sort=name{% if search %}&search={{ search }}{% endif %}"
       class="rounded-md px-3 py-2 text-sm font-medium {% if sort == 'name' %}bg-brand text-white{% else %}bg-gray-700 text-gray-300 ring-1 ring-inset ring-gray-600 hover:bg-gray-600{% endif %}">
      Name
    </a>
  </div>
</div>

<!-- Project cards grid -->
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {% for project in projects %}
  <a href="{% url 'projects:detail' slug=project.slug %}"
     class="group rounded-lg border border-gray-700 bg-gray-800 p-5 hover:border-gray-600 transition-colors">
    <div class="flex items-start justify-between mb-2">
      <h3 class="text-base font-semibold text-gray-100 group-hover:text-brand-light truncate">{{ project.name }}</h3>
      {% if project.visibility == "public" %}
      <span class="ml-2 flex-shrink-0 inline-flex rounded-full bg-green-900/50 px-2 text-xs font-semibold leading-5 text-green-300">Public</span>
      {% elif project.visibility == "internal" %}
      <span class="ml-2 flex-shrink-0 inline-flex rounded-full bg-yellow-900/50 px-2 text-xs font-semibold leading-5 text-yellow-300">Internal</span>
      {% endif %}
    </div>
    <p class="text-sm text-gray-400 mb-4 line-clamp-2" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
      {{ project.description|default:"No description." }}
    </p>
    <div class="flex items-center gap-4 text-xs text-gray-500">
      <span class="inline-flex items-center gap-1">
        {% if project.id in starred_ids %}
        <svg class="h-3.5 w-3.5 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
        {% else %}
        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
        </svg>
        {% endif %}
        {{ project.star_count_annotated }}
      </span>
      <span>{{ project.created_at|naturaltime }}</span>
    </div>
  </a>
  {% empty %}
  <div class="col-span-full text-center py-12">
    <p class="text-sm text-gray-400">No projects found{% if search %} matching "{{ search }}"{% endif %}.</p>
  </div>
  {% endfor %}
</div>
{% endblock %}