{% extends "tasks/base.html" %}
{% load tasks_tags %}

{% block title %}Clients — Staff Panel{% endblock %}
{% block topbar_title %}Clients{% endblock %}

{% block topbar_actions %}
{% if request.user|has_perm:"create_client" %}
<a href="{% url 'task_management:client_create' %}" class="s-btn s-btn-primary s-btn-sm">+ New Client</a>
{% endif %}
{% endblock %}

{% block content %}
<form method="get" class="s-filters">
    <input type="search" name="q" class="s-search" placeholder="Search clients..." value="{{ query }}">
    <select name="status" class="s-filter-select" onchange="this.form.submit()">
        <option value="">All Statuses</option>
        <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active</option>
        <option value="inactive" {% if status_filter == 'inactive' %}selected{% endif %}>Inactive</option>
    </select>
    <button type="submit" class="s-btn s-btn-outline s-btn-sm">Search</button>
</form>

<div class="s-card">
    <div class="s-table-wrap">
        <table class="s-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Company</th>
                    <th>Email</th>
                    <th>Projects</th>
                    <th>Portal</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for client in clients %}
                <tr>
                    <td><a href="{% url 'task_management:client_detail' client.id %}" class="s-table-link">{{ client.name }}</a></td>
                    <td style="font-size:12px;color:var(--s-text2);">{{ client.company_name }}</td>
                    <td style="font-size:12px;color:var(--s-text3);">{{ client.email }}</td>
                    <td><span class="s-badge s-badge-blue">{{ client.project_count }}</span></td>
                    <td>
                        {% if client.portal_profile %}
                        <span class="s-badge s-badge-green" style="font-size:9px;">● Active</span>
                        {% else %}
                        <span class="s-badge s-badge-gray" style="font-size:9px;">None</span>
                        {% endif %}
                    </td>
                    <td>
                        <span class="s-badge {% if client.status == 'active' %}s-badge-green{% else %}s-badge-gray{% endif %}">
                            {{ client.get_status_display }}
                        </span>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="6"><div class="s-empty"><p>No clients found.</p></div></td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% if client_page and client_page.paginator.num_pages > 1 %}
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;">
    <div style="color:var(--s-text3);">Page {{ client_page.number }} of {{ client_page.paginator.num_pages }}</div>
    <div style="display:flex;gap:8px;">
        {% if client_page.has_previous %}
        <a class="s-btn s-btn-outline s-btn-sm" href="?q={{ query|urlencode }}&status={{ status_filter|urlencode }}&page={{ client_page.previous_page_number }}">← Previous</a>
        {% endif %}
        {% if client_page.has_next %}
        <a class="s-btn s-btn-outline s-btn-sm" href="?q={{ query|urlencode }}&status={{ status_filter|urlencode }}&page={{ client_page.next_page_number }}">Next →</a>
        {% endif %}
    </div>
</div>
{% endif %}
{% endblock %}