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

{% block title %}Delete {{ activity.name }} - Activity{% endblock %}

{% block content %}
<div class="container mt-4" data-testid="activity-delete">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'playbook_list' %}">Playbooks</a></li>
            <li class="breadcrumb-item"><a href="{% url 'playbook_detail' pk=playbook.pk %}">{{ playbook.name }}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'workflow_list' playbook_pk=playbook.pk %}">Workflows</a></li>
            <li class="breadcrumb-item"><a href="{% url 'workflow_detail' playbook_pk=playbook.pk pk=workflow.pk %}">{{ workflow.name }}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'activity_list' playbook_pk=playbook.pk workflow_pk=workflow.pk %}">Activities</a></li>
            <li class="breadcrumb-item"><a href="{% url 'activity_detail' playbook_pk=playbook.pk workflow_pk=workflow.pk activity_pk=activity.pk %}">{{ activity.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Delete</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="mb-4">
        <h2>
            <i class="fa-solid fa-trash text-danger"></i> Delete Activity
        </h2>
        <p class="text-muted">Confirm deletion of activity from {{ workflow.name }}</p>
    </div>

    <!-- Confirmation Card -->
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="fa-solid fa-exclamation-triangle"></i> Confirm Deletion
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger" role="alert">
                        <h6 class="alert-heading">
                            <i class="fa-solid fa-warning"></i> Warning: This action cannot be undone!
                        </h6>
                        <p class="mb-0">
                            You are about to permanently delete this activity. All associated data will be lost.
                        </p>
                    </div>

                    <!-- Activity Details -->
                    <div class="mb-4" data-testid="activity-details">
                        <h6>Activity to be deleted:</h6>
                        <dl class="row">
                            <dt class="col-sm-3">Name:</dt>
                            <dd class="col-sm-9"><strong>{{ activity.name }}</strong></dd>

                            <dt class="col-sm-3">Guidance:</dt>
                            <dd class="col-sm-9">{{ activity.guidance|truncatewords:30 }}</dd>

                            <dt class="col-sm-3">Phase:</dt>
                            <dd class="col-sm-9">{% if activity.phase %}{{ activity.phase.name }}{% else %}Unassigned{% endif %}</dd>

                            <dt class="col-sm-3">Order:</dt>
                            <dd class="col-sm-9">#{{ activity.order }}</dd>

                            <dt class="col-sm-3">Dependencies:</dt>
                            <dd class="col-sm-9">
                                {% if activity.predecessor or activity.successor %}
                                    <i class="fa-solid fa-check text-warning"></i> Yes
                                {% else %}
                                    <i class="fa-solid fa-times text-muted"></i> No
                                {% endif %}
                            </dd>

                            <dt class="col-sm-3">Created:</dt>
                            <dd class="col-sm-9">{{ activity.created_at|date:"M d, Y" }}</dd>
                        </dl>
                    </div>

                    <!-- Confirmation Form -->
                    <form method="post" data-testid="delete-form">
                        {% csrf_token %}
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{% url 'activity_detail' playbook_pk=playbook.pk workflow_pk=workflow.pk activity_pk=activity.pk %}" 
                               class="btn btn-outline-secondary"
                               data-testid="cancel-btn"
                               data-bs-toggle="tooltip"
                               title="Cancel and return to activity details">
                                <i class="fa-solid fa-times"></i> Cancel
                            </a>
                            
                            <button type="submit" 
                                    class="btn btn-danger"
                                    data-testid="confirm-delete-btn"
                                    data-bs-toggle="tooltip"
                                    title="Permanently delete this activity">
                                <i class="fa-solid fa-trash"></i> Yes, Delete Activity
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Impact Notice -->
            <div class="card border-0 bg-light mt-3">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fa-solid fa-info-circle text-info"></i> What happens when you delete?
                    </h6>
                    <ul class="small mb-0">
                        <li>The activity will be permanently removed from the workflow</li>
                        <li>Order numbers of other activities will remain unchanged</li>
                        <li>This action cannot be undone - consider exporting data first</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}