{% extends "base.html" %}
{% block content %}
<div class="dashboard" x-data="{search: '{{ search }}', showArchived: {{ 'true' if show_archived else 'false' }}}">
  <div class="dashboard-header">
    <h1>Projets</h1>
    <div class="dashboard-controls">
      <input
        type="text"
        x-model="search"
        placeholder="Rechercher un projet..."
        class="search-input"
        hx-get="/?show_archived=${showArchived}"
        hx-trigger="keyup changed delay:300ms"
        hx-target=".project-list"
        hx-include="[name='search'], [name='show_archived']"
        name="search"
        autocomplete="off"
      >
      <label class="toggle-label">
        <input type="checkbox" name="show_archived" x-model="showArchived"
               hx-get="/"
               hx-trigger="change"
               hx-target=".project-list"
               hx-include="[name='search'], [name='show_archived']">
        <span>Archivés</span>
      </label>
    </div>
  </div>

  <div class="stats-bar">
    <span>{{ repos|length }} projet(s)</span>
  </div>

  <div class="project-list">
    {% if repos %}
      {% for repo in repos %}
      <a href="/board/{{ repo.owner.login }}/{{ repo.name }}" class="project-card">
        <div class="project-card-header">
          <span class="project-org">{{ repo._org or repo.owner.login }}</span>
          <span class="project-name">{{ repo.name }}</span>
          {% if repo.archived %}<span class="badge archived">archivé</span>{% endif %}
          {% if repo.private %}<span class="badge private">privé</span>{% endif %}
        </div>
        {% if repo.description %}
        <p class="project-desc">{{ repo.description[:120] }}{% if repo.description|length > 120 %}...{% endif %}</p>
        {% endif %}
        <div class="project-meta">
          {% if repo.language %}<span class="meta-lang">{{ repo.language }}</span>{% endif %}
          <span class="meta-stars">⭐ {{ repo.stars_count or 0 }}</span>
          <span class="meta-updated">Mis à jour {{ repo.updated_at[:10] if repo.updated_at else '' }}</span>
        </div>
      </a>
      {% endfor %}
    {% else %}
      <p class="empty">Aucun projet trouvé.</p>
    {% endif %}
  </div>
</div>
{% endblock %}