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

{% block title %}{{ activity.name }} — Copy Prompt Mockup{% endblock %}

{% block content %}
<div class="container mt-4" data-testid="copy-prompt-activity-detail-page">

    {% if is_guest %}
    <div class="alert alert-info d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3"
         data-testid="guest-auth-banner"
         role="status">
        <span>Sign in to create and edit playbooks.</span>
        <span class="d-flex gap-2">
            <a href="#" class="btn btn-sm btn-primary" data-testid="guest-banner-sign-in">Sign In</a>
            <a href="#" class="btn btn-sm btn-outline-primary" data-testid="guest-banner-register">Register</a>
        </span>
    </div>
    {% endif %}

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'mockup_copy_prompt_index' %}">Copy Prompt</a></li>
            <li class="breadcrumb-item"><a href="#">Playbooks</a></li>
            <li class="breadcrumb-item"><a href="#">{{ playbook.name }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ workflow.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ activity.name }}</li>
        </ol>
    </nav>

    <section class="hg-page-header rounded-2 mb-3" data-testid="activity-header">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div class="flex-grow-1 min-w-0">
                <h1 class="hg-page-title d-flex align-items-center gap-2 mb-1" data-testid="activity-title">
                    <i class="fa-solid fa-list-check hg-page-title-icon text-primary" aria-hidden="true"></i>
                    <span>{{ activity.name }}</span>
                </h1>
                <p class="text-muted small mb-1">
                    <span class="badge bg-secondary me-1 font-monospace">{{ activity.reference_label }}</span>
                    <span class="badge bg-secondary">Order: #{{ activity.order }}</span>
                    <span class="badge bg-info"><i class="fa-solid fa-bars-progress me-1" aria-hidden="true"></i>{{ activity.phase }}</span>
                </p>
                <p class="text-muted small mb-0">
                    <i class="fa-solid fa-clock" aria-hidden="true"></i> Updated {{ activity.updated_ago }} ago
                </p>
            </div>
            <div role="toolbar"
                 aria-label="Activity actions"
                 class="d-flex flex-wrap gap-2 align-items-center flex-shrink-0"
                 data-testid="activity-header-actions">
                {% if can_edit %}
                <a href="#"
                   class="btn btn-outline-danger"
                   data-testid="delete-btn"
                   data-bs-toggle="tooltip"
                   title="Delete this activity (mockup)">
                    <i class="fa-solid fa-trash" aria-hidden="true"></i> Delete
                </a>
                <a href="#"
                   class="btn btn-primary"
                   data-testid="edit-btn"
                   data-bs-toggle="tooltip"
                   title="Edit this activity (mockup)">
                    <i class="fa-solid fa-edit" aria-hidden="true"></i> Edit
                </a>
                {% endif %}
                {% include "mockups/copy-prompt/_copy_prompt_button.html" with copy_prompt_text=copy_prompt_text text_testid="copy-prompt-text-activity-1" %}
                <a href="{% url 'mockup_copy_prompt_activity_list' %}"
                   class="btn btn-outline-secondary"
                   data-testid="activity-back-btn"
                   data-bs-toggle="tooltip"
                   title="Back to activities list">
                    <i class="fa-solid fa-arrow-left" aria-hidden="true"></i> Back to List
                </a>
            </div>
        </div>
    </section>

    <div class="row">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom">
                    <h2 class="h6 mb-0"><i class="fa-solid fa-book-open me-1" aria-hidden="true"></i> Guidance</h2>
                </div>
                <div class="card-body markdown-content" data-testid="guidance-content">
                    {{ activity.guidance|markdown }}
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom"><h2 class="h6 mb-0"><i class="fa-solid fa-info-circle me-1" aria-hidden="true"></i> Details</h2></div>
                <div class="card-body">
                    <dl class="row mb-0 small">
                        <dt class="col-sm-5">Workflow:</dt>
                        <dd class="col-sm-7">{{ workflow.name }}</dd>
                        <dt class="col-sm-5">Playbook:</dt>
                        <dd class="col-sm-7">{{ playbook.name }}</dd>
                    </dl>
                </div>
            </div>

            <div class="card border-primary mb-4" data-testid="copy-prompt-preview-card">
                <div class="card-header bg-primary text-white">
                    <h2 class="h6 mb-0"><i class="fa-solid fa-clipboard me-1" aria-hidden="true"></i> Clipboard payload preview</h2>
                </div>
                <div class="card-body p-0">
                    <pre class="small mb-0 p-3 bg-light" data-testid="copy-prompt-preview" style="max-height: 280px; overflow: auto;">{{ copy_prompt_text }}</pre>
                </div>
            </div>
        </div>
    </div>

    {% include "mockups/copy-prompt/_copy_prompt_toast.html" %}

    <div class="alert alert-light border mt-4 small">
        <strong>Mockup screens:</strong>
        <a href="{% url 'mockup_copy_prompt_index' %}">Index</a> ·
        <a href="{% url 'mockup_copy_prompt_activity_detail' %}">Activity detail</a> ·
        <a href="{% url 'mockup_copy_prompt_activity_detail_guest' %}">Guest detail</a> ·
        <a href="{% url 'mockup_copy_prompt_activity_embed' %}">Embed</a> ·
        <a href="{% url 'mockup_copy_prompt_activity_list' %}">Activity list</a> ·
        <a href="{% url 'mockup_copy_prompt_activity_detail_error' %}">Clipboard error</a>
    </div>
</div>

{% include "mockups/copy-prompt/_copy_prompt_script.html" with mockup_page_id="copy-prompt-activity-detail" force_clipboard_error=force_clipboard_error %}
{% endblock %}