{% extends 'base.html' %}
{% load static i18n %}
{% load crispy_forms_tags %}

{% block title %}Create Form Template - ATS{% endblock %}

{% block customCSS %}
<style>
    /* ================================================= */
    /* THEME VARIABLES AND GLOBAL STYLES */
    /* ================================================= */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
    }

    /* Primary Color Overrides */
    .text-primary { color: var(--kaauh-teal) !important; }

    /* Main Action Button Style */
    .btn-main-action, .btn-primary {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
        font-weight: 600;
        padding: 0.6rem 1.2rem;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .btn-main-action:hover, .btn-primary:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    /* Card enhancements */
    .card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        background-color: white;
    }

    /* Card Header Theming */
    .card-header {
        background-color: #f0f8ff !important; /* Light blue tint for header */
        border-bottom: 1px solid var(--kaauh-border);
        color: var(--kaauh-teal-dark);
        font-weight: 600;
        padding: 1rem 1.25rem;
        border-radius: 0.75rem 0.75rem 0 0;
    }
    .card-header h3 {
        color: var(--kaauh-teal-dark);
        font-weight: 700;
    }
    .card-header .fas {
        color: var(--kaauh-teal);
    }

    /* Form styling */
    .form-control {
        border-color: var(--kaauh-border);
        border-radius: 0.5rem;
    }

    .form-control:focus {
        border-color: var(--kaauh-teal);
        box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
    }

    .form-label {
        font-weight: 500;
        color: var(--kaauh-primary-text);
        margin-bottom: 0.5rem;
    }

    .form-check-input:checked {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
    }

    /* Modal styling */
    .modal-content {
        border-radius: 0.75rem;
        border: 1px solid var(--kaauh-border);
    }

    .modal-header {
        border-bottom: 1px solid var(--kaauh-border);
        padding: 1.25rem 1.5rem;
        background-color: #f0f8ff !important;
    }

    .modal-footer {
        border-top: 1px solid var(--kaauh-border);
        padding: 1rem 1.5rem;
    }

    /* Error message styling */
    .invalid-feedback {
        display: block;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: #dc3545;
    }

    .form-control.is-invalid {
        border-color: #dc3545;
    }

    /* Success message styling */
    .alert-success {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
        padding: 1rem 1.25rem;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 pb-2 border-bottom border-primary">
        <h1 class="h3 mb-0 fw-bold text-primary">
            <i class="fas fa-file-alt me-2"></i>Create Form Template
        </h1>
        <a href="{% url 'form_templates_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>Back to Templates
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="h5 mb-0"><i class="fas fa-plus-circle me-2"></i>New Form Template</h3>
                </div>
                <div class="card-body p-4">
                    <form method="post" id="createFormTemplate">
                        {% csrf_token %}
                        {{ form|crispy }}
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'form_templates_list' %}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-main-action">
                                <i class="fas fa-save me-1"></i>Create Template
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endfor %}
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
    // Add form validation
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('createFormTemplate');

        form.addEventListener('submit', function(event) {
            let isValid = true;

            // Validate template name
            const nameField = form.querySelector('#id_name');
            if (!nameField.value.trim()) {
                nameField.classList.add('is-invalid');
                isValid = false;
            } else {
                nameField.classList.remove('is-invalid');
            }

            if (!isValid) {
                event.preventDefault();
            }
        });

        // Remove validation errors on input
        const nameField = form.querySelector('#id_name');
        nameField.addEventListener('input', function() {
            if (this.value.trim()) {
                this.classList.remove('is-invalid');
            }
        });
    });
</script>
{% endblock %}