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

{% block title %}PIPs — Mockup{% endblock %}

{% block content %}
<div class="container mt-4" data-testid="pip-list-page">

    <!-- Breadcrumbs -->
    <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>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <h2>
                <i class="fa-solid fa-lightbulb"></i> PIPs
                <span class="badge bg-secondary ms-1">{{ pip_count }}</span>
            </h2>
            <p class="text-muted">Playbook Improvement Proposals — structured change requests for Released playbooks</p>
        </div>
        <a href="{% url 'mockup_pip_create' %}"
           class="btn btn-primary"
           data-testid="pip-new-btn"
           data-bs-toggle="tooltip"
           title="Create a new Playbook Improvement Proposal">
            <i class="fa-solid fa-plus"></i> New PIP
        </a>
    </div>

    <!-- Filters -->
    <div class="card mb-4" data-testid="pip-filter-bar">
        <div class="card-body">
            <form method="get" action="." role="search">
                <div class="row g-2 align-items-end">
                    <div class="col">
                        <label class="form-label small fw-semibold">Status</label>
                        <select class="form-select form-select-sm" name="status" data-testid="filter-status">
                            <option value="">All statuses</option>
                            {% for status, _ in statuses %}
                            <option value="{{ status }}" {% if request.GET.status == status %}selected{% endif %}>{{ status }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col">
                        <label class="form-label small fw-semibold">Target Playbook</label>
                        <select class="form-select form-select-sm" name="playbook" data-testid="filter-playbook">
                            <option value="">All playbooks</option>
                            {% for pb in playbooks %}
                            <option value="{{ pb }}" {% if request.GET.playbook == pb %}selected{% endif %}>{{ pb }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-12 col-lg-auto ms-lg-auto">
                        <label class="form-label small fw-semibold d-lg-block d-none">&nbsp;</label>
                        <div class="d-flex justify-content-lg-end justify-content-start gap-2 flex-wrap">
                            <a href="{% url 'mockup_pip_list' %}" class="btn btn-outline-secondary btn-sm"
                               data-testid="filter-clear"
                               data-bs-toggle="tooltip" title="Clear all filters">
                                <i class="fa-solid fa-xmark me-1"></i> Clear
                            </a>
                            <button class="btn btn-outline-primary btn-sm" type="submit"
                                    data-bs-toggle="tooltip" title="Apply filters">
                                <i class="fa-solid fa-filter me-1"></i> Filter
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-0" role="tablist" data-testid="pip-tabs">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#my-pips"
                    type="button" role="tab" data-testid="tab-my-pips">
                My PIPs
                {% if unread_count %}
                <span class="badge bg-primary ms-1" data-testid="pip-unread-count">{{ unread_count }}</span>
                {% endif %}
            </button>
        </li>
        {% if is_admin %}
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#all-pips"
                    type="button" role="tab" data-testid="tab-all-pips">
                All PIPs
                <span class="badge bg-secondary ms-1">10</span>
            </button>
        </li>
        {% endif %}
    </ul>

    <div class="tab-content">
        <!-- My PIPs -->
        <div class="tab-pane fade show active" id="my-pips" role="tabpanel">
            {% if pips %}
            <div class="card border-top-0 rounded-top-0">
                <div class="card-body p-0">
                    <table class="table table-hover mb-0" data-testid="pip-table">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 8%">PIP</th>
                                <th style="width: 28%">Title</th>
                                <th style="width: 18%">Target Playbook</th>
                                <th style="width: 7%" class="text-center">Changes</th>
                                <th style="width: 12%">Status</th>
                                <th style="width: 10%">Submitted</th>
                                <th style="width: 10%">Updated</th>
                                <th style="width: 10%" class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for pip in pips %}
                            <tr data-testid="pip-row-{{ pip.id }}">
                                <td class="text-muted small font-monospace text-nowrap">{% if pip.status_changed %}<span class="text-primary me-1" data-bs-toggle="tooltip" title="Status changed since your last visit" data-testid="pip-unread-dot-{{ pip.id }}">●</span>{% endif %}PIP-{{ pip.id }}</td>
                                <td>
                                    <strong>{{ pip.title }}</strong>
                                </td>
                                <td class="text-muted small">
                                    {{ pip.target_playbook }}
                                    <span class="badge bg-light text-dark border ms-1">{{ pip.target_version }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-secondary">{{ pip.changes_count }}</span>
                                </td>
                                <td>
                                    <span class="badge {{ pip.status_css }}" data-testid="pip-status-{{ pip.id }}">
                                        {{ pip.status }}
                                    </span>
                                </td>
                                <td class="text-muted small">{{ pip.submitted }}</td>
                                <td class="text-muted small">{{ pip.last_updated }}</td>
                                <td class="text-end">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{% url 'mockup_pip_detail' pip_id=pip.id %}"
                                           class="btn btn-outline-primary btn-sm"
                                           data-testid="view-pip-{{ pip.id }}"
                                           data-bs-toggle="tooltip" title="View PIP details">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        {% if pip.status == "Draft" %}
                                        <a href="{% url 'mockup_pip_create' %}"
                                           class="btn btn-outline-secondary btn-sm"
                                           data-testid="edit-pip-{{ pip.id }}"
                                           data-bs-toggle="tooltip" title="Edit draft PIP">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        {% elif pip.status == "Submitted" or pip.status == "Processing (Galdr)" %}
                                        <button type="button"
                                                class="btn btn-outline-danger btn-sm"
                                                data-testid="cancel-pip-{{ pip.id }}"
                                                data-bs-toggle="tooltip" title="Cancel this PIP">
                                            <i class="fa-solid fa-ban"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% else %}
            <div class="card border-top-0 rounded-top-0 border-0 shadow-sm" data-testid="pip-empty-state">
                <div class="card-body text-center py-5">
                    <i class="fa-solid fa-lightbulb fa-4x text-muted mb-3"></i>
                    <h4 class="text-muted">No PIPs yet</h4>
                    <p class="text-muted">Find a Released playbook you'd like to improve and submit a PIP.</p>
                    <a href="{% url 'mockup_pip_create' %}" class="btn btn-primary mt-2"
                       data-testid="create-first-pip-btn">
                        <i class="fa-solid fa-plus me-1"></i> New PIP
                    </a>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- All PIPs (admin only) -->
        <div class="tab-pane fade" id="all-pips" role="tabpanel">
            <div class="card border-top-0 rounded-top-0">
                <div class="card-body text-center py-4">
                    <i class="fa-solid fa-lock fa-2x text-muted mb-2"></i>
                    <p class="text-muted mb-0">Visible to <strong>Administrators</strong> only — shows all users' PIPs with a Submitted By column.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Mockup nav -->
    <div class="alert alert-light border mt-4 small">
        <strong>Mockup screens:</strong>
        <a href="{% url 'mockup_pip_list' %}">List</a> ·
        <a href="{% url 'mockup_pip_create' %}">Create</a> ·
        <a href="{% url 'mockup_pip_detail' pip_id=42 %}">Detail — Reviewed (PIP-42)</a> ·
        <a href="{% url 'mockup_pip_detail' pip_id=30 %}">Detail — Draft (PIP-30)</a> ·
        <a href="{% url 'mockup_pip_admin_review' pip_id=38 %}">Admin Review (PIP-38)</a>
    </div>

</div>
<style>.pip-status-reviewed { background-color: var(--bs-purple); color: #fff; }</style>
{% endblock %}