{% extends 'django_forms_workflows/base.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}{{ form_def.name }} - {{ site_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>{{ form_def.name }}</h1>
            {% if is_draft %}
                <span class="badge bg-warning text-dark">Draft</span>
            {% endif %}
        </div>
        {% if form_def.instructions %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i>
                {{ form_def.instructions|safe }}
            </div>
        {% endif %}
        <div class="card">
            <div class="card-body">
                {% crispy form %}
            </div>
        </div>
        <div class="mt-3">
            <a href="{% url 'forms_workflows:form_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Forms
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'django_forms_workflows/js/form-enhancements.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const formElement = document.querySelector('[data-form-enhancements="true"]');
        if (formElement) {
            // Configuration from Django
            const config = {{ form_enhancements_config|safe }};

            // Initialize form enhancements
            const formEnhancements = new FormEnhancements(formElement, config);

            // Store instance for debugging
            window.formEnhancements = formEnhancements;
        }
    });
</script>
{% endblock %}