{% extends 'pipeline/base.html' %}
{% load i18n %}

{% block page_title %}{{ page_title }}{% endblock %}
{% block header_nav_brand %}{% trans "Pipeline" %}{% endblock %}

{% block pipeline_content %}
<div class="container-fluid py-3">

    <nav aria-label="{% trans 'Breadcrumb' %}">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{% url 'pipeline:index' %}">{% trans "Pipeline" %}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'pipeline:manage_index' %}">{% trans "Flow manager" %}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'pipeline:manage_flow_edit' flow.slug %}">{{ flow.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% trans "Assignments" %}</li>
        </ol>
    </nav>

    <div class="d-flex align-items-center gap-3 mb-4">
        <span class="pipeline-page-icon"><i class="fas fa-users" aria-hidden="true"></i></span>
        <div class="min-w-0">
            <h1 class="h3 mb-0">{% trans "Assignments" %}</h1>
            <p class="text-body-secondary mb-0 text-truncate">{{ flow.name }}</p>
        </div>
    </div>

    {# ── Summary ─────────────────────────────────────────────────────────── #}
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-body-secondary">{% trans "Not started" %}</div>
                    <div class="pipeline-stat">{{ total_assigned }}</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-body-secondary">{% trans "In progress" %}</div>
                    <div class="pipeline-stat text-primary">{{ total_in_progress }}</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="small text-body-secondary">{% trans "Completed" %}</div>
                    <div class="pipeline-stat text-success">{{ total_completed }}</div>
                </div>
            </div>
        </div>
    </div>

    {# ── Active/All toggle ────────────────────────────────────────────────── #}
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="mb-0">
            {% if show_completed %}
                {% trans "All Assignments" %}
            {% else %}
                {% trans "Active Assignments" %}
            {% endif %}
        </h5>
        <div>
            {% if show_completed %}
            <a href="{% url 'pipeline:manage_flow_assignments' flow.slug %}" class="btn btn-sm btn-quiet">
                <i class="fas fa-filter fa-fw me-1"></i>{% trans "Show Active Only" %}
            </a>
            {% else %}
            <a href="?completed=1" class="btn btn-sm btn-quiet">
                <i class="fas fa-eye fa-fw me-1"></i>{% trans "Show All (incl. Completed)" %}
            </a>
            {% endif %}
        </div>
    </div>

    {# ── Step legend ──────────────────────────────────────────────────────── #}
    {% if steps %}
    <div class="card mb-3">
        <div class="card-body py-2 px-3">
            <div class="d-flex flex-wrap gap-3 align-items-center">
                <small class="text-body-secondary fw-semibold">{% trans "Steps:" %}</small>
                {% for step in steps %}
                <span class="d-flex align-items-center gap-1">
                    <span class="badge text-bg-secondary rounded-circle" style="font-size:.65rem;min-width:1.4em;">{{ forloop.counter }}</span>
                    <small class="text-body-secondary">
                        {{ step.name }}
                        {% if step.optional %}<em class="ms-1 opacity-50">({% trans "optional" %})</em>{% endif %}
                    </small>
                </span>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    {# ── Assignments table ────────────────────────────────────────────────── #}
    {% if rows %}
    <div class="card">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="small text-uppercase text-body-secondary">
                    <tr>
                        <th>{% trans "User" %}</th>
                        <th>{% trans "Status" %}</th>
                        <th style="min-width:140px;">{% trans "Progress" %}</th>
                        <th>{% trans "Assigned" %}</th>
                        {% for step in steps %}
                        <th class="text-center" title="{{ step.name }}{% if step.optional %} (optional){% endif %}">
                            <span class="badge text-bg-secondary rounded-circle" style="font-size:.65rem;">{{ forloop.counter }}</span>
                        </th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                    {% with a=row.assignment %}
                    <tr>
                        {# User #}
                        <td>
                            <strong class="d-block">{{ a.user.username }}</strong>
                            {% with main=a.user.profile.main_character %}
                            {% if main %}
                            <small class="text-body-secondary">{{ main.character_name }}</small>
                            {% endif %}
                            {% endwith %}
                        </td>

                        {# Status badge #}
                        <td>
                            {% if a.status == 'assigned' %}
                            <span class="badge rounded-pill text-bg-secondary">{% trans "Not started" %}</span>
                            {% elif a.status == 'in_progress' %}
                            <span class="badge rounded-pill text-bg-primary">{% trans "In progress" %}</span>
                            {% else %}
                            <span class="badge rounded-pill text-bg-success">{% trans "Completed" %}</span>
                            {% endif %}
                        </td>

                        {# Progress bar #}
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="progress flex-grow-1" style="height:8px;" role="progressbar"
                                     aria-valuenow="{{ row.pct }}" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar{% if row.pct == 100 %} bg-success{% endif %}" style="width:{{ row.pct }}%"></div>
                                </div>
                                <small class="text-body-secondary text-nowrap">
                                    {{ row.completed_required }}/{{ row.total_required }}
                                </small>
                            </div>
                        </td>

                        {# Assigned at #}
                        <td>
                            <small class="text-body-secondary" title="{{ a.assigned_at|date:'Y-m-d H:i' }} UTC">
                                {{ a.assigned_at|timesince }} {% trans "ago" %}
                            </small>
                        </td>

                        {# Per-step icons #}
                        {% for state in row.step_states %}
                        <td class="text-center">
                            {% if state.complete %}
                            <i class="fas fa-check-circle text-success" title="{% trans 'Complete' %}"></i>
                            {% else %}
                            {% if state.step.optional %}
                            <i class="fas fa-minus-circle text-body-secondary opacity-50" title="{% trans 'Incomplete (optional)' %}"></i>
                            {% else %}
                            <i class="far fa-circle text-body-secondary" title="{% trans 'Incomplete' %}"></i>
                            {% endif %}
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    {% endwith %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% else %}
    <div class="text-center py-5 text-body-secondary">
        <i class="fas fa-users fa-3x mb-3 d-block opacity-25"></i>
        {% if show_completed %}
        <p class="mb-0">{% trans "No assignments for this flow yet." %}</p>
        {% else %}
        <p class="mb-1">{% trans "No active assignments right now." %}</p>
        <a href="?completed=1" class="btn btn-sm btn-quiet mt-2">
            <i class="fas fa-eye fa-fw me-1"></i>{% trans "Show Completed Assignments" %}
        </a>
        {% endif %}
    </div>
    {% endif %}

</div>
{% endblock %}