{% extends "base.html" %}
{% block title %}PIPs — Mimir{% endblock %}
{% block content %}
<div data-testid="pip-list-page">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">PIPs</li>
        </ol>
    </nav>

    <div class="hg-page-header mb-3">
        <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" data-testid="pip-list-heading">
                    <i class="fas fa-lightbulb hg-page-title-icon text-primary" aria-hidden="true"></i>
                    <span>PIPs</span>
                </h1>
                <p class="text-muted small mb-0">
                    <span data-testid="pip-list-count">PIPs ({{ pip_count }})</span> — Playbook Improvement Proposals for Released playbooks.
                </p>
            </div>
            <div role="toolbar" aria-label="PIP actions" class="d-flex flex-wrap gap-2 align-items-center">
                <a href="{% url 'pip_create' %}" class="btn btn-primary" data-testid="pip-new-btn">
                    <i class="fas fa-plus"></i> New PIP
                </a>
            </div>
        </div>
    </div>

    <div class="card mb-4 border-0 shadow-sm rounded-3" data-testid="pip-filter-bar">
        <div class="card-body">
            <form method="get" action="{% url 'pip_list' %}" id="pip-filter-form">
                <input type="hidden" name="scope" value="{{ list_scope }}">
                <div class="row g-3 align-items-end">
                    <div class="col-12 col-lg-5">
                        <span class="form-label hg-label-caps mb-1 d-block">Status</span>
                        <div class="d-flex flex-wrap gap-2" data-testid="filter-status-group">
                            {% for val, label in pip_status_choices %}
                            <label class="form-check form-check-inline small mb-0">
                                <input class="form-check-input" type="checkbox" name="status" value="{{ val }}"
                                       {% if val in status_filters %}checked{% endif %}
                                       data-testid="filter-status-{{ val }}">
                                <span class="form-check-label">{{ label }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-12 col-lg-4">
                        <label class="form-label hg-label-caps mb-1" for="filter-playbook">Target playbook</label>
                        <select class="form-select form-select-sm" name="playbook" id="filter-playbook"
                                data-testid="filter-playbook">
                            <option value="">All playbooks</option>
                            {% for pb in filter_playbooks %}
                            <option value="{{ pb.pk }}" {% if selected_playbook == pb.pk %}selected{% endif %}>
                                {{ pb.name }} (id={{ pb.pk }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-12 col-lg-3">
                        <span class="form-label hg-label-caps mb-1 d-lg-block d-none">&nbsp;</span>
                        <div class="d-flex justify-content-lg-end justify-content-start gap-2 flex-wrap">
                            <a href="{% url 'pip_list' %}?scope={{ list_scope }}" class="btn btn-outline-secondary btn-sm"
                               data-testid="filter-clear"><i class="fas fa-xmark me-1"></i>Clear filters</a>
                            <button type="submit" class="btn btn-outline-primary btn-sm" data-testid="filter-apply">
                                <i class="fas fa-filter"></i> Apply
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <ul class="nav nav-tabs" role="tablist" data-testid="pip-tabs">
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if list_scope == 'mine' %}active{% endif %}"
               href="{% url 'pip_list' %}?scope=mine"
               data-testid="tab-my-pips"
               {% if list_scope == 'mine' %}aria-current="page"{% endif %}>My PIPs</a>
        </li>
        {% if user.is_staff %}
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if list_scope == 'all' %}active{% endif %}"
               href="{% url 'pip_list' %}?scope=all"
               data-testid="tab-all-pips"
               {% if list_scope == 'all' %}aria-current="page"{% endif %}>All PIPs</a>
        </li>
        {% endif %}
    </ul>

    <div class="card border-0 shadow-sm rounded-3 border-top-0 rounded-top-0">
        <div class="card-body p-0">
            {% if pip_count == 0 %}
            <div class="p-5 text-center text-muted" data-testid="pip-empty-state">
                {% if status_filters or selected_playbook %}
                <p class="mb-2">No PIPs match the selected filters.</p>
                <a href="{% url 'pip_list' %}?scope={{ list_scope }}" class="btn btn-sm btn-outline-secondary"
                   data-testid="pip-empty-clear"><i class="fas fa-xmark me-1"></i>Clear filters</a>
                {% else %}
                <p class="mb-2">You haven't submitted any PIPs yet.</p>
                <p class="small">Find a Released playbook you'd like to improve and click <strong>Submit PIP</strong>.</p>
                {% endif %}
            </div>
            {% else %}
            <div class="table-responsive" data-testid="pip-table-wrap">
                <table class="table table-hover align-middle mb-0" data-testid="pip-table">
                    <thead class="table-light">
                    <tr>
                        {% if list_scope == 'all' %}
                        <th scope="col">Submitted by</th>
                        {% endif %}
                        <th scope="col">PIP</th>
                        <th scope="col">Title</th>
                        <th scope="col">Target playbook</th>
                        <th scope="col" class="text-center">Changes</th>
                        <th scope="col">Status</th>
                        <th scope="col">Submitted</th>
                        <th scope="col">Updated</th>
                        <th scope="col" class="text-end">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for row in pip_rows %}
                    {% with pip=row.pip %}
                    <tr data-testid="pip-row-{{ pip.pk }}">
                        {% if list_scope == 'all' %}
                        <td class="small">
                            {% if pip.created_by %}{{ pip.created_by.get_full_name|default:pip.created_by.username }}{% else %}—{% endif %}
                        </td>
                        {% endif %}
                        <td class="text-nowrap small font-monospace text-muted">
                            {% if row.unread_dot %}
                            <span class="text-primary me-1" title="Status changed since your last visit"
                                  data-testid="pip-unread-dot-{{ pip.pk }}">●</span>
                            {% endif %}
                            PIP-{{ pip.pk }}
                        </td>
                        <td><strong>{{ pip.title }}</strong></td>
                        <td class="small">{{ pip.playbook.name }} <span class="text-muted">(v{{ pip.playbook.version }})</span></td>
                        <td class="text-center">{{ pip.change_count|default:0 }}</td>
                        <td>
                            <span class="badge rounded-pill {{ pip.status_bootstrap_class }}"
                                  data-testid="pip-status-badge-{{ pip.pk }}">{{ pip.get_status_display }}</span>
                        </td>
                        <td class="small text-muted">
                            {% if pip.submitted_at %}{{ pip.submitted_at|date:"Y-m-d" }}{% else %}—{% endif %}
                        </td>
                        <td class="small text-muted">{{ pip.updated_at|date:"Y-m-d H:i" }}</td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm" role="group">
                                <a href="{% url 'pip_detail' pip.pk %}"
                                   class="btn btn-outline-primary"
                                   data-bs-toggle="tooltip"
                                   title="View PIP details"
                                   data-testid="pip-action-view-{{ pip.pk }}">
                                    <i class="fa-solid fa-eye"></i>
                                </a>
                                {% include "partials/copy_prompt/row_button.html" with entity_type="pip" entity_pk=pip.pk entity_name=pip.title copy_prompt_text=pip.copy_prompt_text %}
                                <a href="{% url 'pip_preview' pip.pk %}"
                                   class="btn btn-outline-secondary"
                                   data-bs-toggle="tooltip"
                                   title="Preview changes"
                                   data-testid="pip-action-preview-{{ pip.pk }}">
                                    <i class="fa-solid fa-file-lines"></i>
                                </a>
                                {% if pip.status == 'draft' and pip.created_by == request.user %}
                                <a href="{% url 'pip_edit' pip.pk %}"
                                   class="btn btn-outline-secondary"
                                   data-bs-toggle="tooltip"
                                   title="Edit draft"
                                   data-testid="pip-action-edit-{{ pip.pk }}">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </a>
                                {% endif %}
                                {% if pip.status in 'draft,submitted' and pip.created_by == request.user and pip.changes.count > 0 %}
                                <button type="button"
                                        class="btn btn-outline-success"
                                        data-bs-toggle="tooltip"
                                        title="Submit for review"
                                        onclick="document.getElementById('submit-form-{{ pip.pk }}').submit()"
                                        data-testid="pip-action-submit-{{ pip.pk }}">
                                    <i class="fa-solid fa-paper-plane"></i>
                                </button>
                                <form id="submit-form-{{ pip.pk }}" method="post" action="{% url 'pip_submit_review' pip.pk %}" class="d-none">
                                    {% csrf_token %}
                                </form>
                                {% endif %}
                                {% if pip.status in 'submitted,processing_galdr,reviewed' and pip.created_by == request.user %}
                                <button type="button"
                                        class="btn btn-outline-warning"
                                        data-bs-toggle="tooltip"
                                        title="Return to Draft"
                                        onclick="if(confirm('Return this PIP to Draft? Galdr assessments will be cleared.')) document.getElementById('revert-form-{{ pip.pk }}').submit()"
                                        data-testid="pip-action-revert-{{ pip.pk }}">
                                    <i class="fa-solid fa-rotate-left"></i>
                                </button>
                                <form id="revert-form-{{ pip.pk }}" method="post" action="{% url 'pip_revert_to_draft' pip.pk %}" class="d-none">
                                    {% csrf_token %}
                                </form>
                                {% endif %}
                                {% if pip.status in 'draft,submitted,processing_galdr,reviewed' and pip.created_by == request.user %}
                                <button type="button"
                                        class="btn btn-outline-danger"
                                        data-bs-toggle="tooltip"
                                        title="Cancel PIP permanently"
                                        onclick="if(confirm('Cancel this PIP permanently? This cannot be undone.')) document.getElementById('cancel-form-{{ pip.pk }}').submit()"
                                        data-testid="pip-action-cancel-{{ pip.pk }}">
                                    <i class="fa-solid fa-ban"></i>
                                </button>
                                <form id="cancel-form-{{ pip.pk }}" method="post" action="{% url 'pip_withdraw' pip.pk %}" class="d-none">
                                    {% csrf_token %}
                                </form>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endwith %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
        </div>
    </div>
</div>
<script>
  console.log('PIP list loaded', {count: {{ pip_count }}, scope: "{{ list_scope|escapejs }}"});
</script>
{% endblock %}