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

{% block title %}Playbooks{% endblock %}

{% block extra_css %}
<style>
    /* Playbook list — book-style cards */
    .playbook-book-card {
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        border-radius: 0.35rem 0.65rem 0.65rem 0.35rem;
    }

    .playbook-book-card:hover {
        transform: scale(1.02);
        z-index: 2;
    }

    .playbook-book-card:hover .playbook-book-card-inner {
        box-shadow: 0 0.65rem 1.35rem rgba(0, 0, 0, 0.12), 0 0.15rem 0.35rem rgba(0, 0, 0, 0.06);
    }

    .playbook-book-card-inner {
        border-radius: 0.35rem 0.65rem 0.65rem 0.35rem;
        border-left: 5px solid var(--bs-primary);
        background-color: var(--bs-body-bg);
        box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.06);
        overflow: hidden;
        transition: box-shadow 0.22s ease;
    }

    .playbook-book-card-author {
        display: block;
        min-height: 1.25rem;
        line-height: 1.25rem;
    }

    .playbook-book-card-description {
        min-height: 5.25rem;
        margin-bottom: 1rem;
    }

    .playbook-book-card-meta {
        padding-top: 0.75rem;
        border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
    }

    .playbook-book-card-actions {
        min-height: 2rem;
    }

    .playbook-book-delete-slot {
        display: inline-flex;
        align-items: center;
        min-width: 3.25rem;
        justify-content: flex-start;
    }

    .playbook-book-card-header {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .playbook-book-card-title {
        line-height: 1.3;
    }

    .playbook-book-delete {
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .playbook-book-delete:hover,
    .playbook-book-delete:focus {
        color: var(--bs-danger-text-emphasis, #b02a37) !important;
        text-decoration: none;
    }

    .playbook-book-delete:focus-visible {
        outline: 2px solid var(--bs-danger);
        outline-offset: 2px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="fa-solid fa-book-sparkles"></i> Playbooks
        </h2>
        <a href="{% url 'playbook_create' %}" 
           class="btn btn-primary"
           data-bs-toggle="tooltip"
           title="Create a new playbook">
            <i class="fa-solid fa-plus"></i> Create New Playbook
        </a>
    </div>

    <!-- Playbooks List (owned + public by others in one grid) -->
    {% if has_playbooks %}
        <div class="row" data-testid="playbooks-list-section">
            {% for playbook in playbooks %}
                {% include "playbooks/_playbook_list_card.html" %}
            {% endfor %}
            {% for playbook in public_playbooks %}
                {% include "playbooks/_playbook_list_card.html" %}
            {% endfor %}
        </div>
    {% else %}
        <div class="alert alert-info text-center" data-testid="playbooks-empty-state">
            <i class="fa-solid fa-info-circle fa-3x mb-3"></i>
            <h4>No playbooks yet</h4>
            <p>Create your first playbook to get started!</p>
            <a href="{% url 'playbook_create' %}" class="btn btn-primary">
                <i class="fa-solid fa-plus"></i> Create New Playbook
            </a>
        </div>
    {% endif %}
</div>
{% endblock %}