{% extends "base.html" %}

{% block content %}

<h1>{{ page.title }}</h1>

{% if projects %}
  <div class="card-grid">
    {% for project in projects %}
      <a class="card" href="{% url 'wagtail_serve' '' %}projects/{{ project.slug }}/">
        <h3>{{ project.title }}</h3>
        <p>{{ project.summary|truncatewords:20 }}</p>
        <div class="score-bar">
          <span class="score-total">{{ project.total_score }}/30</span>
          <span class="score-detail">AI-Friendly Score</span>
        </div>
        <div class="tag-list">
          {% for lang in project.languages.all|slice:":3" %}
            <span class="tag">{{ lang.name }}</span>
          {% endfor %}
        </div>
      </a>
    {% endfor %}
  </div>

  {% if projects.paginator.num_pages > 1 %}
  <nav class="pagination">
    {% if projects.has_previous %}
      <a href="?page={{ projects.previous_page_number }}">&laquo; Prev</a>
    {% endif %}
    <span class="current">Page {{ projects.number }} of {{ projects.paginator.num_pages }}</span>
    {% if projects.has_next %}
      <a href="?page={{ projects.next_page_number }}">Next &raquo;</a>
    {% endif %}
  </nav>
  {% endif %}
{% else %}
  {% include "includes/empty_state.html" with message="No projects found in this scenario." %}
{% endif %}

{% endblock %}