{% extends 'layout/app.html' %}

{% load static %}
{% block stylesheet %}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />   
    <style>
        .bd-example {
            padding: 1.5rem;
            margin-right: 0;
            margin-left: 0;
            border-width: 1px;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
        }
        .bd-example {
            position: relative;
            padding: 1rem;
            margin: 1rem -.75rem 0;
            border: solid #dee2e6;
            border-width: 1px;
        }
    </style>

{% endblock %}
{% block body %}
    <div class="container-fluid px-4">
        <h1 class="mt-4">{{title}}</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
            <li class="breadcrumb-item active">{{operation}}</li>
        </ol>
        <div class="bd-example">
            <form method="post">
                {% csrf_token %}
                {% include 'includes/dynamic_template_form.html' with form=form %}
                <div class="mt-4 mb-0">
                    <div class="d-grid"><button class="btn btn-primary btn-block" type="submit">Submit</button></div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block javascript %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2({
            placeholder: 'Select options',
            allowClear: true,
            tags: true, // Allow the user to enter custom tags
            tokenSeparators: [',', ' '], // Customize token separators
            closeOnSelect: false // Keep the dropdown open after selection
        });
    });
</script>
{% endblock %}