{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
    <div>
      <h2 class="text-2xl font-semibold text-slate-900">Clients</h2>
      <p class="text-sm text-slate-500">Association-aware list view.</p>
    </div>

    <div class="flex flex-wrap gap-3">
      <a href="/client-groups" class="inline-flex rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Client Groups</a>
      {% if can_export %}
      <a href="/clients/export?q={{ q|urlencode }}&status={{ status|urlencode }}&client_type={{ client_type|urlencode }}{% if partner_id %}&partner_id={{ partner_id }}{% endif %}&include_archived={{ include_archived }}&sort_by={{ sort_by|urlencode }}&sort_order={{ sort_order|urlencode }}"
         class="inline-flex rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
        Export CSV
      </a>
      {% endif %}

      {% if can_import %}
      <a href="/clients/import"
         class="inline-flex rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
        Import Clients
      </a>
      {% endif %}

      {% if can_create %}
      <a href="/clients/new"
         class="inline-flex rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">
        Add Client
      </a>
      {% endif %}
    </div>
  </div>

  {% include "modules/clients/templates/clients/partials/table.html" %}

  {% if meta and not compact_client_view %}
  <div class="flex flex-col gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-soft sm:flex-row sm:items-center sm:justify-between">
    <div class="text-sm text-slate-600">
      {% if meta.total > 0 %}
        Showing <span class="font-semibold text-slate-900">{{ ((meta.page - 1) * meta.per_page) + 1 }}</span>
        to <span class="font-semibold text-slate-900">{% if meta.page * meta.per_page > meta.total %}{{ meta.total }}{% else %}{{ meta.page * meta.per_page }}{% endif %}</span>
        of <span class="font-semibold text-slate-900">{{ meta.total }}</span> clients
      {% else %}
        No clients found
      {% endif %}
    </div>

    <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
      <form method="get" action="/clients" class="flex items-center gap-2">
        <input type="hidden" name="q" value="{{ q }}">
        <input type="hidden" name="status" value="{{ status }}">
        <input type="hidden" name="client_type" value="{{ client_type }}">
        {% if client_group_id %}<input type="hidden" name="client_group_id" value="{{ client_group_id }}">{% endif %}
        {% if partner_id %}<input type="hidden" name="partner_id" value="{{ partner_id }}">{% endif %}
        <input type="hidden" name="include_archived" value="{{ 'true' if include_archived else 'false' }}">
        <input type="hidden" name="sort_by" value="{{ sort_by }}">
        <input type="hidden" name="sort_order" value="{{ sort_order }}">
        <input type="hidden" name="page" value="1">
        <label for="clients-per-page" class="text-sm text-slate-600">Rows</label>
        <select id="clients-per-page" name="per_page" onchange="this.form.submit()"
                class="rounded-lg border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-700 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
          {% for size in [10, 25, 50, 100] %}
          <option value="{{ size }}" {% if meta.per_page == size %}selected{% endif %}>{{ size }}</option>
          {% endfor %}
        </select>
      </form>

      {% if meta.pages > 1 %}
      <nav class="flex items-center gap-1" aria-label="Client list pagination">
        {% set query = namespace(value='q=' ~ (q|urlencode) ~ '&status=' ~ (status|urlencode) ~ '&client_type=' ~ (client_type|urlencode) ~ '&include_archived=' ~ ('true' if include_archived else 'false') ~ '&per_page=' ~ meta.per_page ~ '&sort_by=' ~ (sort_by|urlencode) ~ '&sort_order=' ~ (sort_order|urlencode)) %}
        {% if client_group_id %}{% set query.value = query.value ~ '&client_group_id=' ~ client_group_id %}{% endif %}
        {% if partner_id %}{% set query.value = query.value ~ '&partner_id=' ~ partner_id %}{% endif %}
        {% set common_query = query.value %}

        {% if meta.page > 1 %}
        <a href="/clients?{{ common_query }}&page={{ meta.page - 1 }}"
           class="rounded-lg border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Previous</a>
        {% else %}
        <span class="cursor-not-allowed rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-400">Previous</span>
        {% endif %}

        {% set start_page = meta.page - 2 if meta.page - 2 > 1 else 1 %}
        {% set end_page = meta.page + 2 if meta.page + 2 < meta.pages else meta.pages %}

        {% if start_page > 1 %}
        <a href="/clients?{{ common_query }}&page=1" class="rounded-lg px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">1</a>
        {% if start_page > 2 %}<span class="px-1 text-slate-400">…</span>{% endif %}
        {% endif %}

        {% for page_number in range(start_page, end_page + 1) %}
          {% if page_number == meta.page %}
          <span aria-current="page" class="rounded-lg bg-brand-600 px-3 py-2 text-sm font-semibold text-white">{{ page_number }}</span>
          {% else %}
          <a href="/clients?{{ common_query }}&page={{ page_number }}"
             class="rounded-lg px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">{{ page_number }}</a>
          {% endif %}
        {% endfor %}

        {% if end_page < meta.pages %}
        {% if end_page < meta.pages - 1 %}<span class="px-1 text-slate-400">…</span>{% endif %}
        <a href="/clients?{{ common_query }}&page={{ meta.pages }}" class="rounded-lg px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">{{ meta.pages }}</a>
        {% endif %}

        {% if meta.page < meta.pages %}
        <a href="/clients?{{ common_query }}&page={{ meta.page + 1 }}"
           class="rounded-lg border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Next</a>
        {% else %}
        <span class="cursor-not-allowed rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-400">Next</span>
        {% endif %}
      </nav>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}