{% extends "base.html" %}
{% block title %}Projects — ComplyForm Dashboard{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-6">

  {% include "components/posture_summary.html" %}

  {# Agency tier: client filter + usage bar #}
  {% if "multi_project_dashboard" in features %}
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center gap-3">
      <label for="client-filter" class="text-sm" style="color: var(--text-secondary);">Client:</label>
      <select id="client-filter"
              class="text-sm px-2 py-1 rounded"
              style="background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);"
              onchange="htmx.ajax('GET', '/dashboard/?client=' + this.value, {target: '.project-grid', swap: 'innerHTML', pushUrl: true})">
        <option value="all" {% if selected_client == "all" or not selected_client %}selected{% endif %}>All Clients</option>
        {% for label in client_labels %}
        <option value="{{ label }}" {% if selected_client == label %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="text-sm" style="color: var(--text-secondary);">
      {{ active_count }} of {{ project_limit }} engagements used
    </div>
  </div>
  {% endif %}

  {% if projects %}
  <div class="project-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
       hx-get="/dashboard/" hx-trigger="every 60s" hx-select=".project-grid" hx-swap="innerHTML">
    {% for project in projects %}
      {% include "partials/project_card.html" %}
    {% endfor %}
  </div>
  {% else %}
  <div class="p-8 text-center rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <p class="text-lg font-medium mb-2" style="color: var(--text-primary);">No projects yet</p>
    <p class="text-sm mb-4" style="color: var(--text-secondary);">Push your first scan to get started:</p>
    <code class="text-sm px-3 py-2 rounded inline-block"
          style="background: var(--bg-surface-hover); color: var(--text-primary);">complyform dashboard push --project-label=prod</code>
  </div>
  {% endif %}

</div>
{% endblock %}