{% extends "base.html" %}
{% load static %}
{% load markdown_filters %}

{% block title %}Activities - {{ workflow.name }}{% endblock %}

{% block content %}
{% if is_guest_browse %}
  {% include "partials/guest_auth_banner.html" %}
{% endif %}
<div data-testid="activities-list">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'playbook_list' %}">Playbooks</a></li>
            <li class="breadcrumb-item"><a href="{% url 'playbook_detail' pk=playbook.pk %}">{{ playbook.name }}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'workflow_list' playbook_pk=playbook.pk %}">Workflows</a></li>
            <li class="breadcrumb-item"><a href="{% url 'workflow_detail' playbook_pk=playbook.pk pk=workflow.pk %}">{{ workflow.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Activities</li>
        </ol>
    </nav>

    <div class="hg-page-header mb-3" data-testid="activities-header">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div>
                <h1 class="hg-page-title d-flex align-items-center gap-2 mb-1">
                    <i class="fa-solid fa-list-check hg-page-title-icon text-primary" aria-hidden="true"></i>
                    <span>Activities in {{ workflow.name }}</span>
                </h1>
                <p class="text-muted small mb-0">
                    {{ total_activities }} {{ total_activities|pluralize:"activity,activities" }}{% if has_phases %} · {{ activities_by_phase|length }} {{ activities_by_phase|length|pluralize:"phase,phases" }}{% endif %}
                </p>
            </div>
            <div role="toolbar" aria-label="Activity actions" class="d-flex flex-wrap gap-2 align-items-center">
                {% if can_edit %}
                <a href="{% url 'activity_create' playbook_pk=playbook.pk workflow_pk=workflow.pk %}"
                   class="btn btn-success"
                   data-testid="create-activity-btn"
                   data-bs-toggle="tooltip"
                   title="Create a new activity in this workflow">
                    <i class="fa-solid fa-plus"></i> Create Activity
                </a>
                {% endif %}
                <a href="{% url 'workflow_detail' playbook_pk=playbook.pk pk=workflow.pk %}"
                   class="btn btn-outline-secondary"
                   data-bs-toggle="tooltip"
                   title="Back to workflow details">
                    <i class="fa-solid fa-arrow-left"></i> Back to Workflow
                </a>
            </div>
        </div>
    </div>

    <!-- Activities Content -->
    {% if total_activities > 0 %}
        {% if has_phases %}
            <!-- Grouped by Phase — single table keeps Actions column aligned -->
            <div class="card border-0 shadow-sm rounded-3 mb-4" data-testid="activities-phased-list">
                <div class="card-body p-0">
                    <div class="table-responsive" data-testid="activities-table-phased-wrap">
                        <table class="table table-hover align-middle mb-0 mm-activities-table" data-testid="activities-table-phased">
                            {% include "activities/_table_colgroup.html" %}
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" class="mm-col-order">#</th>
                                    <th scope="col" class="mm-col-name">Name</th>
                                    <th scope="col" class="mm-col-abbrev">Abbrev.</th>
                                    <th scope="col" class="mm-col-guidance">Guidance</th>
                                    <th scope="col" class="mm-col-deps">Dependencies</th>
                                    <th scope="col" class="mm-col-actions">Actions</th>
                                </tr>
                            </thead>
                            {% for phase_name, activities in activities_by_phase.items %}
                            <tbody data-testid="phase-group-{{ phase_name|slugify }}">
                                <tr class="mm-activities-phase-header">
                                    <td colspan="6" class="bg-light border-bottom">
                                        <div class="d-flex align-items-center gap-2">
                                            <i class="fa-solid fa-bars-progress text-info" aria-hidden="true"></i>
                                            <span>{{ phase_name }}</span>
                                            <span class="badge bg-secondary">{{ activities|length }}</span>
                                        </div>
                                    </td>
                                </tr>
                                {% for activity in activities %}
                                    {% include "activities/_activity_row.html" %}
                                {% endfor %}
                            </tbody>
                            {% endfor %}
                        </table>
                    </div>
                </div>
            </div>
        {% else %}
            <!-- Flat List (No Phases) -->
            <div class="card border-0 shadow-sm rounded-3" data-testid="activities-flat-list">
                <div class="card-body p-0">
                    <div class="table-responsive" data-testid="activities-table-wrap">
                        <table class="table table-hover align-middle mb-0 mm-activities-table" data-testid="activities-table">
                            {% include "activities/_table_colgroup.html" %}
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" class="mm-col-order">#</th>
                                    <th scope="col" class="mm-col-name">Name</th>
                                    <th scope="col" class="mm-col-abbrev">Abbrev.</th>
                                    <th scope="col" class="mm-col-guidance">Guidance</th>
                                    <th scope="col" class="mm-col-deps">Dependencies</th>
                                    <th scope="col" class="mm-col-actions">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for phase_name, activities in activities_by_phase.items %}
                                    {% for activity in activities %}
                                        {% include "activities/_activity_row.html" %}
                                    {% endfor %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        {% endif %}
    {% else %}
        <!-- Empty State -->
        <div class="card border-0 shadow-sm" data-testid="empty-state">
            <div class="card-body text-center py-5">
                <i class="fa-solid fa-list-check fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No activities yet</h4>
                <p class="text-muted">Get started by creating your first activity for this workflow.</p>
                {% if can_edit %}
                    <a href="{% url 'activity_create' playbook_pk=playbook.pk workflow_pk=workflow.pk %}"
                       class="btn btn-primary mt-3"
                       data-testid="create-first-activity-btn">
                        <i class="fa-solid fa-plus"></i> Create First Activity
                    </a>
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>

{% endblock %}