{% extends "base.html" %}
{% block page_icon %}🏠{% endblock %}
{% block page_title %}Home{% endblock %}

{% block content %}
<div class="page-title-area" style="padding-top: 24px;">
  <div class="page-title">
    <h1>Projects</h1>
  </div>
</div>

<div class="view-toolbar">
  <input class="search-input" type="text" name="search" placeholder="Search projects..."
         value="{{ search }}"
         hx-get="/" hx-trigger="keyup changed delay:300ms" hx-target="#project-list"
         hx-swap="outerHTML"
         style="background:var(--bg-tertiary); border:1px solid var(--border);
                color:var(--text-primary); padding:6px 12px; border-radius:6px;
                font-size:14px; width:300px; outline:none;">

  <label class="text-sm text-dim" style="display:flex;align-items:center;gap:6px;cursor:pointer;">
    <input type="checkbox" hx-get="/" hx-target="#project-list" hx-swap="outerHTML"
           name="show_archived" value="1"
           {% if show_archived %}checked{% endif %}
           hx-trigger="change" style="accent-color:var(--blue);">
    Show archived
  </label>

  <div class="view-toolbar-spacer"></div>

  <div class="text-sm text-dim">{{ repos|length }} projects</div>
</div>

<!-- Project list -->
<div id="project-list" style="padding: 0 24px;">
  <div style="display:flex; flex-direction:column; gap: 4px;">
    {% for repo in repos %}
    <a href="/board/{{ repo.full_name }}"
       class="project-card-notion"
       style="display:flex; align-items:center; gap:12px; padding: 10px 12px;
              border-radius: 6px; transition: background 0.15s; cursor: pointer; color: var(--text-primary); text-decoration: none;"
       onmouseover="this.style.background='var(--bg-hover)'"
       onmouseout="this.style.background='transparent'">
      <span style="font-size:18px;">📁</span>
      <div style="flex:1; min-width:0;">
        <div style="font-weight:500; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
          {{ repo.name }}
        </div>
        <div style="font-size:12px; color: var(--text-secondary);">
          {{ repo.owner.login if repo.owner else '?' }}/{{ repo.name }}
          {% if repo.description %} — {{ repo.description[:60] }}{% endif %}
        </div>
      </div>
      <div style="display:flex; align-items:center; gap:8px; flex-shrink:0;">
        {% if repo.language %}
        <span style="font-size:12px; color: var(--text-dim);">🟡 {{ repo.language }}</span>
        {% endif %}
        {% if repo.private %}
        <span style="font-size:12px; color: var(--text-dim);">🔒</span>
        {% endif %}
        <span style="font-size:12px; color: var(--text-dim);">→</span>
      </div>
    </a>
    {% endfor %}

    {% if not repos %}
    <div style="text-align:center; padding:48px; color:var(--text-dim);">
      <div style="font-size:48px; margin-bottom:16px;">📭</div>
      <h3 style="color:var(--text-secondary);">Aucun projet trouvé</h3>
      <p style="margin-top:8px;">
        {% if search %}
          Aucun résultat pour "{{ search }}".
        {% else %}
          Créez un repo sur <a href="https://git.dracodev.net" style="color:var(--blue);">Gitea</a>.
        {% endif %}
      </p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}