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

{% block title %}Create Playbook - Step 2{% 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"><a href="{% url 'playbook_create' %}">Create New</a></li>
            <li class="breadcrumb-item active" aria-current="page">Step 2</li>
        </ol>
    </nav>

    <!-- Wizard Progress -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row text-center">
                <div class="col-md-4">
                    <div class="wizard-step">
                        <i class="fa-solid fa-circle-check fa-2x text-success"></i>
                        <p class="mt-2 text-success">Basic Information</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="wizard-step active">
                        <i class="fa-solid fa-circle-2 fa-2x text-primary"></i>
                        <p class="mt-2 fw-bold">Add Workflows</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="wizard-step">
                        <i class="fa-regular fa-circle-3 fa-2x text-muted"></i>
                        <p class="mt-2 text-muted">Publishing</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 2 Form -->
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">
                <i class="fa-solid fa-diagram-project"></i>
                Step 2: Add Workflows
            </h4>
        </div>
        <div class="card-body">
            <div class="alert alert-info">
                <i class="fa-solid fa-info-circle"></i>
                You can add your first workflow now or skip this step and add workflows later.
            </div>

            <form method="post" action="{% url 'playbook_create_step2' %}" id="workflow-form">
                {% csrf_token %}
                
                <!-- Workflow Name -->
                <div class="mb-3">
                    <label for="{{ form.workflow_name.id_for_label }}" class="form-label">
                        Workflow Name
                    </label>
                    <input type="text"
                           name="workflow_name"
                           class="form-control"
                           id="{{ form.workflow_name.id_for_label }}"
                           value="{{ form.workflow_name.value|default:'' }}"
                           placeholder="Enter workflow name"
                           maxlength="100"
                           data-testid="workflow-name-input">
                    <small class="form-text text-muted">Name of the workflow (optional)</small>
                </div>

                <!-- Workflow Description -->
                <div class="mb-3">
                    <label for="{{ form.workflow_description.id_for_label }}" class="form-label">
                        Workflow Description
                    </label>
                    <textarea name="workflow_description"
                              class="form-control"
                              id="{{ form.workflow_description.id_for_label }}"
                              rows="3"
                              placeholder="Enter workflow description"
                              data-testid="workflow-description-input">{{ form.workflow_description.value|default:'' }}</textarea>
                    <small class="form-text text-muted">Brief description of the workflow (optional)</small>
                </div>

                <!-- Action Buttons -->
                <div class="d-flex justify-content-between mt-4">
                    <a href="{% url 'playbook_create' %}" 
                       class="btn btn-secondary"
                       data-testid="back-button"
                       data-bs-toggle="tooltip"
                       title="Go back to Basic Information">
                        <i class="fa-solid fa-arrow-left"></i> Back
                    </a>
                    <div>
                        <button type="button" 
                                class="btn btn-outline-secondary me-2"
                                onclick="document.getElementById('skip-field').value='true'; document.getElementById('workflow-form').submit();"
                                data-testid="skip-workflow"
                                data-bs-toggle="tooltip"
                                title="Skip workflow addition and proceed to publishing">
                            Skip this step <i class="fa-solid fa-forward"></i>
                        </button>
                        <button type="submit" 
                                class="btn btn-primary"
                                data-testid="add-workflow"
                                data-bs-toggle="tooltip"
                                title="Add workflow and proceed to publishing">
                            Next: Publishing <i class="fa-solid fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
                
                <input type="hidden" name="skip" id="skip-field" value="">
            </form>
            
            <!-- Cancel Button (outside form) -->
            <div class="mt-3 text-center">
                <button type="button" 
                        class="btn btn-link text-danger"
                        data-bs-toggle="modal"
                        data-bs-target="#cancelConfirmModal"
                        data-testid="cancel-wizard-step2">
                    <i class="fa-solid fa-times me-1"></i> Cancel Wizard
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Cancel Confirmation Modal -->
<div class="modal fade" id="cancelConfirmModal" tabindex="-1" aria-labelledby="cancelConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cancelConfirmModalLabel">
                    <i class="fa-solid fa-triangle-exclamation text-warning me-2"></i>
                    Cancel Playbook Creation?
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to cancel? All entered information will be lost.</p>
            </div>
            <div class="modal-footer">
                <button type="button" 
                        class="btn btn-secondary" 
                        data-bs-dismiss="modal"
                        data-testid="keep-editing">
                    <i class="fa-solid fa-arrow-left me-1"></i>
                    Keep Editing
                </button>
                <a href="{% url 'playbook_list' %}" 
                   class="btn btn-danger"
                   data-testid="confirm-cancel">
                    <i class="fa-solid fa-times me-1"></i>
                    Yes, Cancel
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .wizard-step {
        padding: 15px;
    }
    .wizard-step.active i {
        color: #0d6efd !important;
    }
</style>
{% endblock %}