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

{% block title %}{{ playbook.name }} - Playbook{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'playbook_list' %}">Playbooks</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ playbook.name }}</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <h2>
                <i class="fa-solid fa-book"></i> {{ playbook.name }}
            </h2>
            <p class="text-muted">
                <span class="badge bg-{{ playbook.get_status_badge_color }}">{{ playbook.get_status_display }}</span>
                <span class="badge bg-secondary">v{{ playbook.version }}</span>
                <span class="badge bg-info">{{ playbook.get_category_display }}</span>
            </p>
        </div>
        <div class="btn-group">
            {% if can_edit %}
                <a href="{% url 'playbook_edit' pk=playbook.pk %}" 
                   class="btn btn-primary"
                   data-bs-toggle="tooltip"
                   title="Edit this playbook">
                    <i class="fa-solid fa-edit"></i> Edit
                </a>
            {% endif %}
            <a href="{% url 'playbook_list' %}" 
               class="btn btn-outline-secondary"
               data-bs-toggle="tooltip"
               title="Back to playbooks list">
                <i class="fa-solid fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <!-- Description -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Description</h5>
        </div>
        <div class="card-body">
            <p>{{ playbook.description }}</p>
        </div>
    </div>

    <!-- Metadata & Workflows -->
    <div class="row">
        <div class="col-md-8">
            <!-- Workflows -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Workflows ({{ workflows|length }})</h5>
                    {% if can_edit %}
                    <div class="btn-group btn-group-sm">
                        <a href="{% url 'workflow_create' playbook.pk %}" 
                           class="btn btn-primary btn-sm"
                           data-bs-toggle="tooltip"
                           title="Add a new workflow to this playbook"
                           data-testid="add-workflow-button">
                            <i class="fa-solid fa-plus"></i> Add Workflow
                        </a>
                        <a href="{% url 'workflow_list' playbook.pk %}" 
                           class="btn btn-outline-secondary btn-sm"
                           data-bs-toggle="tooltip"
                           title="Manage all workflows in this playbook"
                           data-testid="manage-workflows-button">
                            <i class="fa-solid fa-list"></i> Manage
                        </a>
                    </div>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if workflows %}
                        <ul class="list-group list-group-flush">
                            {% for workflow in workflows %}
                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="flex-grow-1">
                                        <a href="{% url 'workflow_detail' playbook.pk workflow.pk %}" class="text-decoration-none">
                                            <i class="fa-solid fa-diagram-project text-primary"></i>
                                            <strong>{{ workflow.name }}</strong>
                                            <span class="badge bg-secondary">#{{ workflow.order }}</span>
                                        </a>
                                        {% if workflow.description %}
                                            <p class="mb-0 text-muted small">{{ workflow.description|truncatewords:15 }}</p>
                                        {% endif %}
                                    </div>
                                    {% if can_edit %}
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{% url 'workflow_edit' playbook.pk workflow.pk %}" 
                                           class="btn btn-sm btn-outline-secondary"
                                           data-bs-toggle="tooltip"
                                           title="Edit this workflow">
                                            <i class="fa-solid fa-edit"></i>
                                        </a>
                                    </div>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fa-solid fa-diagram-project fa-3x text-muted mb-3"></i>
                            <p class="text-muted mb-3">No workflows added yet.</p>
                            {% if can_edit %}
                            <a href="{% url 'workflow_create' playbook.pk %}" class="btn btn-primary">
                                <i class="fa-solid fa-plus"></i> Create First Workflow
                            </a>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Metadata -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Details</h5>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-5">Author:</dt>
                        <dd class="col-sm-7">{{ playbook.author.username }}</dd>

                        <dt class="col-sm-5">Created:</dt>
                        <dd class="col-sm-7">{{ playbook.created_at|date:"Y-m-d" }}</dd>

                        <dt class="col-sm-5">Updated:</dt>
                        <dd class="col-sm-7">{{ playbook.updated_at|date:"Y-m-d" }}</dd>

                        {% if playbook.tags %}
                        <dt class="col-sm-5">Tags:</dt>
                        <dd class="col-sm-7">
                            {% for tag in playbook.tags %}
                                <span class="badge bg-secondary">{{ tag }}</span>
                            {% endfor %}
                        </dd>
                        {% endif %}
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
