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

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

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

{% block content %}
<form method="get" class="s-filters">
    <input type="search" name="q" class="s-search" placeholder="Search projects..." value="{{ query }}">
    <select name="status" class="s-filter-select" onchange="this.form.submit()">
        <option value="">All Statuses</option>
        <option value="planning" {% if status_filter == 'planning' %}selected{% endif %}>Planning</option>
        <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active</option>
        <option value="on_hold" {% if status_filter == 'on_hold' %}selected{% endif %}>On Hold</option>
        <option value="completed" {% if status_filter == 'completed' %}selected{% endif %}>Completed</option>
        <option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
    </select>
    <button type="submit" class="s-btn s-btn-outline s-btn-sm">Search</button>
</form>

{% for project in projects %}
<div class="s-card s-card-pad" style="margin-bottom:10px;">
    <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;">
        <div style="flex:1;min-width:200px;">
            <a href="{% url 'task_management:project_detail' project.id %}" class="s-table-link" style="font-size:14px;">{{ project.name }}</a>
            <div style="font-size:11px;color:var(--s-text3);margin-top:2px;">{{ project.client.company_name }}</div>
        </div>
        <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-shrink:0;">
            <span class="s-badge" style="background:{{ project.priority|priority_color }}20;color:{{ project.priority|priority_color }};">{{ project.get_priority_display }}</span>
            <span class="s-badge" style="background:{{ project.status|status_color }}20;color:{{ project.status|status_color }};">{{ project.get_status_display }}</span>
            {% if request.user|has_perm:"edit_project" %}
            <a href="{% url 'task_management:project_edit' project.id %}" class="s-btn s-btn-outline s-btn-sm">Edit</a>
            {% endif %}
        </div>
    </div>

    <div class="s-progress-bar" style="margin:10px 0 6px;">
        <div class="s-progress-fill" style="width:{{ project.progress_percentage }}%;background:{{ project.status|status_color }};"></div>
    </div>

    <div style="display:flex;gap:12px;font-size:10px;color:var(--s-text3);flex-wrap:wrap;">
        <span>{{ project.progress_percentage }}% complete</span>
        <span>·</span>
        <span>{{ project.completed_tasks_count }}/{{ project.total_tasks_count }} tasks</span>
        <span>·</span>
        <span>{{ project.days_remaining }} days left</span>
        <span>·</span>
        <span>{{ project.start_date|date:"d M Y" }} → {{ project.end_date|date:"d M Y" }}</span>
        {% if project.project_manager %}
        <span>·</span>
        <span>PM: {{ project.project_manager.get_full_name }}</span>
        {% endif %}
    </div>
</div>
{% empty %}
<div class="s-empty" style="padding:40px;"><p>No projects found.</p></div>
{% endfor %}

{% if project_page and project_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 {{ project_page.number }} of {{ project_page.paginator.num_pages }}</div>
    <div style="display:flex;gap:8px;">
        {% if project_page.has_previous %}
        <a class="s-btn s-btn-outline s-btn-sm" href="?q={{ query|urlencode }}&status={{ status_filter|urlencode }}&page={{ project_page.previous_page_number }}">← Previous</a>
        {% endif %}
        {% if project_page.has_next %}
        <a class="s-btn s-btn-outline s-btn-sm" href="?q={{ query|urlencode }}&status={{ status_filter|urlencode }}&page={{ project_page.next_page_number }}">Next →</a>
        {% endif %}
    </div>
</div>
{% endif %}
{% endblock %}