nautobot 2.4.21__py3-none-any.whl → 3.0.0a3__py3-none-any.whl

nautobot/core/templates/utilities/templatetags/filter_form_drawer.html

@@ -0,0 +1,482 @@
+{% load form_helpers %}
+{% load helpers %}
+{% load static %}
+
+<section class="nb-drawer" tabindex="-1" id="{{ filter_form_name }}_drawer">
+    <div class="nb-drawer-header">
+        <h1>Filters</h1>
+        <button type="button" class="btn-close" data-nb-dismiss="drawer" aria-label="Close"></button>
+    </div>
+    <div class="nb-drawer-body">
+        <ul id="filter-tabs" class="nav nav-tabs">
+            {% if filter_form %}
+                <li role="presentation" class="nav-item">
+                    <a class="nav-link{% if filter_form %} active{% endif %}"  href="#default-filter" role="tab" data-bs-toggle="tab">
+                        Basic
+                    </a>
+                </li>
+            {% endif %}
+            {% if dynamic_filter_form %}
+                <li role="presentation" class="nav-item">
+                    <a class="nav-link position-relative{% if not filter_form %} active{% endif %}" href="#advanced-filter" role="tab" data-bs-toggle="tab">
+                        Advanced
+                        {% advanced_filter_indicator basic_filter_form=filter_form filter_params=filter_params %}
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+        <div class="tab-content h-100">
+            {% if filter_form %}
+                <div id="default-filter" role="tabpanel" class="tab-pane fade{% if filter_form %} show active{% endif %} h-100 p-20">
+                    {% include 'inc/search_panel.html' %}
+                </div>
+            {% endif %}
+            {% if dynamic_filter_form %}
+                <div id="advanced-filter" role="tabpanel" class="tab-pane fade{% if not filter_form %} show active{% endif %} h-100 p-20">
+                    <form class="h-100 vstack" id="dynamic-filter-form">
+                        <div class="align-content-start flex-fill pb-20">
+                            {{ dynamic_filter_form.management_form }}
+                            {% for field in dynamic_filter_form.0.visible_fields %}
+                                <div class="nb-form-group">
+                                    <label for="{{ field.auto_id }}">{{ field.label|capfirst }}</label>
+                                    {{ field }}
+                                </div>
+                            {% endfor %}
+                            <button class="nb-dynamic-filter-add btn btn-primary d-block ms-auto my-20" type="button">
+                                <span aria-hidden="true" class="mdi mdi-plus me-4"></span><!--
+                                -->Add Filter
+                            </button>
+                            <hr class="border-top my-20">
+                            <div class="nb-dynamic-filter-items d-flex flex-wrap gap-10">
+                                {% if filter_params %}
+                                    {% for field in filter_params %}
+                                        <span class="badge nb-multi-badge" data-nb-field="{{ field.name }}">
+                                            <button class="nb-dynamic-filter-remove" type="button">
+                                                <span aria-hidden="true" class="mdi mdi-close"></span>
+                                                <span class="visually-hidden">Remove All</span>
+                                            </button>
+                                            {{ field.display }}:
+                                            <span class="nb-multi-badge-items">
+                                                {% for value in field.values %}
+                                                    <span class="badge" data-nb-value="{{ value.name }}"><!--
+                                                        --><button class="nb-dynamic-filter-remove" type="button">
+                                                        <span aria-hidden="true" class="mdi mdi-close"></span>
+                                                        <span class="visually-hidden">Remove</span>
+                                                    </button><!--
+                                                        -->{{ value.display }}<!--
+                                                        --><input name="{{ field.name }}" type="hidden" value="{{ value.name }}">
+                                                    </span>
+                                                {% endfor %}
+                                            </span>
+                                        </span>
+                                    {% endfor %}
+                                {% endif %}
+                            </div>
+                        </div>
+
+                        <div class="d-print-none justify-content-between mb-n20 nb-form-sticky-footer">
+                            <button type="submit" class="btn btn-primary">
+                                <span class="mdi mdi-check me-4" aria-hidden="true"></span><!--
+                                -->Apply Specified
+                            </button>
+                            <button type="reset" class="btn btn-secondary">
+                                <span aria-hidden="true" class="mdi mdi-close me-4"></span><!--
+                                -->Clear All
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</section>
+
+{% block javascript %}
+    <script>
+        (() => {
+            document.addEventListener('DOMContentLoaded', () => {
+                const NON_FILTER_PARAMS = [
+                    'all_filters_removed',
+                    'clear_view',
+                    'per_page',
+                    'saved_view',
+                    'sort',
+                    'table_changes_pending',
+                ];
+
+                /**
+                 * Insert given `element` as `parent`'s first child.
+                 * @param {HTMLElement} element - Element to be inserted.
+                 * @param {HTMLElement} parent - Parent container for given `element`.
+                 * @returns {void} Do not return any value, modify DOM in-place.
+                 */
+                const insertFirst = (element, parent) => {
+                    parent.hasChildNodes() ? parent.insertBefore(element, parent.firstElementChild) : parent.appendChild(element);
+                };
+
+                /**
+                 * Get HTML elements for default and dynamic filter forms.
+                 * @returns {object} Object with `defaultFilterForm` and `dynamicFilterForm` HTML elements or `null`,
+                 *   depending on their actual existence in the DOM.
+                 */
+                const getFilterForms = () => ({
+                    defaultFilterForm: document.querySelector('#default-filter form'),
+                    dynamicFilterForm: document.querySelector('#dynamic-filter-form'),
+                });
+
+                /**
+                 * Synchronize given `filter` value from default to dynamic filter form.
+                 * @param {string} name - Filter name.
+                 * @returns {void} Do not return any value, just set given field values.
+                 */
+                const syncDefaultToDynamic = (name) => {
+                    const { defaultFilterForm } = getFilterForms();
+
+                    const field = defaultFilterForm.querySelector(`[name="${name}"]`);
+                    const text = field?.closest('.nb-form-group')?.querySelector('label')?.innerText?.trim();
+                    /*
+                     * `manageDynamicFilter` takes an array of `{ text: string, value: string }` objects as `value`, so
+                     * regardless of field being a textbox, a single or multiple choice combobox, conversion is required:
+                     *   1. For combobox (i.e. `<select>`), iterate over selected options and map them to display `text`
+                     *     and underlying `value`.
+                     *   2. For textbox (i.e. `<input>` or `<textarea>`):
+                     *     1. Use entered value as both display `text` and underlying `value`.
+                     *     2. If field is empty, use an empty array.
+                     */
+                    const value =
+                        field?.tagName === 'SELECT'
+                        ? [...field.selectedOptions].map((option) => ({ text: option.innerText, value: option.value }))
+                        : [...(field?.value ? [{ text: field.value, value: field.value }] : [])];
+
+                    manageDynamicFilter({ action: 'set', name, text, value });
+                };
+
+                /**
+                 * Synchronize given `filter` value from dynamic to default filter form.
+                 * @param {string} name - Filter name.
+                 * @returns {void} Do not return any value, just set given field values.
+                 */
+                const syncDynamicToDefault = (name) => {
+                    const { defaultFilterForm, dynamicFilterForm } = getFilterForms();
+
+                    const current = [...dynamicFilterForm.querySelectorAll(`input[name="${name}"][type="hidden"]`)].map(
+                        (input) => ({
+                            text: [...(input.parentElement?.childNodes ?? [])].find((node) => node.nodeName === '#text')?.wholeText,
+                            value: input.getAttribute('value'),
+                        }),
+                    );
+
+                    const sync = defaultFilterForm?.querySelector(`[name=${name}]`);
+
+                    if (sync?.tagName === 'INPUT' || sync?.tagName === 'TEXTAREA') {
+                        sync.value = current.length > 0 ? current[0].value : '';
+                    } else if (sync?.tagName === 'SELECT') {
+                        window.nb.select2.setSelect2Value(sync, current);
+                    }
+                };
+
+                /**
+                 * Manage dynamic filter either by adding values to the existing selection or by setting passed values
+                 * regardless of previous selection.
+                 * @param {'add'|'set'} action - Use `'add'` to add given value to the existing selection; use `'set'`
+                 *   to set given value regardless of what was set previously.
+                 * @param {string} name - Filter field name.
+                 * @param {string} text - Filter display text.
+                 * @param {object[]} value - Array of objects containing `text` and `value` key-value pairs.
+                 */
+                const manageDynamicFilter = ({ action, name, text, value }) => {
+                    const { dynamicFilterForm } = getFilterForms();
+                    const items = dynamicFilterForm.querySelector('.nb-dynamic-filter-items');
+
+                    const group = (() => {
+                        const existing = items.querySelector(`.nb-multi-badge[data-nb-field="${name}"]`);
+                        if (existing) {
+                            return existing;
+                        }
+
+                        const group = document.createElement('span');
+                        group.classList.toggle('badge', true);
+                        group.classList.toggle('nb-multi-badge', true);
+                        group.setAttribute('data-nb-field', name);
+
+                        const button = document.createElement('button');
+                        button.classList.toggle('nb-dynamic-filter-remove', true);
+                        button.setAttribute('type', 'button');
+
+                        const close = document.createElement('span');
+                        close.classList.toggle('mdi', true);
+                        close.classList.toggle('mdi-close', true);
+                        close.setAttribute('aria-hidden', 'true');
+
+                        const remove = document.createElement('span');
+                        remove.classList.toggle('visually-hidden', true);
+                        remove.innerText = 'Remove All';
+
+                        const children = document.createElement('span');
+                        children.classList.toggle('nb-multi-badge-items', true);
+
+                        button.appendChild(close);
+                        button.appendChild(remove);
+                        group.appendChild(button);
+                        group.insertAdjacentText('beforeend', `${text}:`);
+                        group.appendChild(children);
+
+                        return group;
+                    })();
+
+                    const children = group.querySelector('.nb-multi-badge-items');
+                    const existing = [...children.querySelectorAll('.badge[data-nb-value]')];
+
+                    /*
+                     * Depending on `action` remove the following badges:
+                     *   1. For `'add'`, remove already existing filters with the same key-value pairs and re-create them later.
+                     *   2. For `'set'`, remove all existing filters of given key and apply only these passed as `values`.
+                     */
+                    const badgesToRemove =
+                        action === 'add'
+                        ? existing.filter((badge) => value.some((item) => badge.getAttribute('data-nb-value') === item.value))
+                        : existing;
+                    badgesToRemove.forEach((item) => children.removeChild(item));
+
+                    value.forEach(({ text, value }) => {
+                        const badge = document.createElement('span');
+                        badge.classList.toggle('badge', true);
+                        badge.setAttribute('data-nb-value', value);
+
+                        const input = document.createElement('input');
+                        input.setAttribute('name', name);
+                        input.setAttribute('type', 'hidden');
+                        input.setAttribute('value', value);
+
+                        const button = document.createElement('button');
+                        button.classList.toggle('nb-dynamic-filter-remove', true);
+                        button.setAttribute('type', 'button');
+
+                        const close = document.createElement('span');
+                        close.classList.toggle('mdi', true);
+                        close.classList.toggle('mdi-close', true);
+                        close.setAttribute('aria-hidden', 'true');
+
+                        const remove = document.createElement('span');
+                        remove.classList.toggle('visually-hidden', true);
+                        remove.innerText = 'Remove';
+
+                        button.appendChild(close);
+                        button.appendChild(remove);
+                        badge.appendChild(button);
+                        badge.insertAdjacentText('beforeend', text);
+                        badge.appendChild(input);
+
+                        insertFirst(badge, children);
+                    });
+
+                    // If group already exists, remove it and later insert as the first child.
+                    if (items.contains(group)) {
+                        items.removeChild(group);
+                    }
+
+                    if (children.hasChildNodes()) {
+                        insertFirst(group, items);
+                    }
+                };
+
+                document.addEventListener('click', (event) => {
+                    const { defaultFilterForm, dynamicFilterForm } = getFilterForms();
+
+                    const add = event.target.closest('button.nb-dynamic-filter-add');
+                    if (add) {
+                        const field = dynamicFilterForm.querySelector('[name$="lookup_field"]');
+                        const type = dynamicFilterForm.querySelector('[name$="lookup_type"]');
+                        const value = [...dynamicFilterForm.querySelectorAll('.nb-form-group')]
+                            .pop()
+                        ?.querySelector('input, select, textarea');
+
+                        const isMissing = (control) =>
+                        control?.selectedOptions ? control.selectedOptions.length === 0 : !control?.value;
+                        if (isMissing(field) || isMissing(type) || isMissing(value)) {
+                            // Return early if selected filter is not complete (i.e. is missing lookup field, type or value).
+                            return;
+                        }
+
+                        const name = type.selectedOptions[0].value;
+                        const label = field.selectedOptions[0].innerText.trim();
+                        const suffix = type.selectedOptions[0].innerText.trim();
+                        const text = /\(\w+\)/.test(suffix) ? `${label} ${suffix}` : label;
+                        const values =
+                            value?.getAttribute('multiple') !== null
+                            ? [...value.selectedOptions].map((option) => ({ text: option.innerText.trim(), value: option.value }))
+                            : [{ text: value?.value, value: value?.value }];
+
+                        // If field exists in default filter form and is a single value input, use `'set'` action.
+                        const action =
+                            defaultFilterForm.querySelector(`[name="${name}"]`) &&
+                        (value.tagName === 'INPUT' || value.tagName === 'TEXTAREA')
+                            ? 'set'
+                            : 'add';
+                        manageDynamicFilter({ action, name, text, value: values });
+
+                        syncDynamicToDefault(name);
+                    }
+
+                    const remove = event.target.closest('button.nb-dynamic-filter-remove');
+                    if (remove) {
+                        const badge = remove.closest('.badge');
+                        /*
+                         * Remove the group badge (i.e. multi-badge) when given badge is the group badge itself, or it is the only
+                         * one left in the group (i.e. has no siblings) because removing it will leave the group badge empty anyway.
+                         */
+                        const shouldRemoveGroup =
+                            badge?.classList.contains('nb-multi-badge') ||
+                        (!badge?.previousElementSibling && !badge?.nextElementSibling);
+                        shouldRemoveGroup ? badge?.closest('.nb-multi-badge')?.remove() : badge?.remove();
+
+                        syncDynamicToDefault(badge?.querySelector('input[type="hidden"]')?.getAttribute('name'));
+                    }
+                });
+
+                // Need to wrap `document` with jQuery to be able to listen to Select2 `change` event.
+                $(document).on('change', (event) => {
+                    const { defaultFilterForm } = getFilterForms();
+                    const isDefaultFilterFormField = event.target.form === defaultFilterForm;
+                    if (isDefaultFilterFormField) {
+                        syncDefaultToDynamic(event.target.name);
+                    }
+                });
+
+                // Need to wrap `document` with jQuery to be able to listen to Select2 `change` event.
+                $(document).on('change', async (event) => {
+                    const isLookupType = event.target.getAttribute('name')?.endsWith('lookup_type');
+                    if (isLookupType) {
+                        const content_type = event.target.getAttribute('data-contenttype');
+                        const field_name = event.target.value;
+                        const value = [...event.target.form.querySelectorAll('.nb-form-group')]
+                            .pop()
+                        ?.querySelector('input, select, textarea');
+
+                        if (field_name) {
+                            const replacement = await (async () => {
+                                try {
+                                    const response = await window.fetch(
+                                        `/api/ui/core/filterset-fields/lookup-value-dom-element/?${new URLSearchParams({ content_type, field_name })}`,
+                                        { method: 'GET', headers: { Accept: '*/*' } },
+                                    );
+
+                                    const html = await response.json();
+
+                                    const element = document.createElement('div');
+                                    element.innerHTML = html;
+
+                                    return element.firstElementChild;
+                                } catch (exception) {
+                                    // Default to `<input type="text" ...>` field if error occurs.
+                                    const input = document.createElement('input');
+                                    input.classList.toggle('lookup_value-input', true);
+                                    input.classList.toggle('form-control', true);
+                                    input.setAttribute('id', `id_for_${field_name}`);
+                                    input.setAttribute('name', field_name);
+                                    input.setAttribute('type', 'text');
+                                    return input;
+                                }
+                            })();
+
+                            value.replaceWith(replacement);
+                            replacement.nextElementSibling?.remove(); // Remove Select2 widget if present.
+                            replacement.previousElementSibling?.setAttribute('for', replacement.getAttribute('id')); // Set label `for` attribute to match field `id`.
+                            initializeInputs(replacement.parentElement);
+                        }
+                    }
+                });
+
+                // Need to wrap `document` with jQuery to be able to listen to Select2 `change` event.
+                $(document).on('change', (event) => {
+                    const isLookupField = event.target.getAttribute('name')?.endsWith('lookup_field');
+                    const isLookupType = event.target.getAttribute('name')?.endsWith('lookup_type');
+
+                    if (isLookupField) {
+                        const type = event.target.form.querySelector('[name$="lookup_type"]');
+                        $(type).val(null).trigger('change');
+                    }
+
+                    if (isLookupField || isLookupType) {
+                        const value = [...event.target.form.querySelectorAll('.nb-form-group')]
+                            .pop()
+                        ?.querySelector('input, select, textarea');
+
+                        if (value.tagName === 'SELECT') {
+                            $(value).val(null).trigger('change');
+                        } else {
+                            value.value = '';
+                        }
+                    }
+                });
+
+                const isFilterForm = (target) => Boolean(target?.closest('#{{ filter_form_name }}_drawer'));
+
+                document.addEventListener('reset', (event) => {
+                    if (isFilterForm(event.target)) {
+                        event.preventDefault();
+
+                        // Remove all filter query params from location search while keeping non-filter params intact.
+                        const searchParams = new URLSearchParams(window.location.search);
+                        const nextSearchParams = new URLSearchParams([
+                            ...[...searchParams].filter(
+                                ([property]) => NON_FILTER_PARAMS.includes(property) && property !== 'all_filters_removed',
+                            ),
+                            ['all_filters_removed', 'true'],
+                        ]);
+
+                        location.assign(`?${nextSearchParams}`);
+                    }
+                });
+
+                document.addEventListener('submit', (event) => {
+                    if (isFilterForm(event.target)) {
+                        event.preventDefault();
+
+                        const { defaultFilterForm, dynamicFilterForm } = getFilterForms();
+
+                        // Remove all field names which are not applied filters container descendants.
+                        [...dynamicFilterForm.querySelectorAll('input, select, textarea')].forEach((field) =>
+                            field.closest('.nb-dynamic-filter-items') ? undefined : field.removeAttribute('name'),
+                        );
+
+                        /*
+                         * Get the serialized data from the forms and:
+                         *   1) Filter out query params which values are empty e.g `?sam=&dan=2` becomes `dan=2`.
+                         *   2) Combine the two forms into a single set of data without duplicate entries.
+                         */
+                        const defaultFilterFormSearchParams = new URLSearchParams(new FormData(defaultFilterForm));
+                        const dynamicFilterFormSearchParams = new URLSearchParams(new FormData(dynamicFilterForm));
+                        const searchParams = new URLSearchParams(window.location.search);
+
+                        const nextSearchParams = new URLSearchParams([
+                            ...[...defaultFilterFormSearchParams].filter(([, value]) => value !== ''),
+                            ...[...dynamicFilterFormSearchParams].filter(
+                                ([property, value]) => value !== '' && !defaultFilterFormSearchParams.has(property, value),
+                            ),
+                            ...[...searchParams].filter(
+                                ([property]) => NON_FILTER_PARAMS.includes(property) && property !== 'all_filters_removed',
+                            ),
+                        ]);
+
+                        if (nextSearchParams.has('saved_view')) {
+                            const all_filters_removed = [...nextSearchParams].every(([property]) =>
+                                NON_FILTER_PARAMS.includes(property),
+                            );
+
+                            if (all_filters_removed) {
+                                nextSearchParams.set('all_filters_removed', 'true');
+                            }
+                        }
+
+                        location.assign(`?${nextSearchParams}`);
+                    }
+                });
+
+                const onSubmitOrReset = (event) => (isFilterForm(event.target) ? window.nb?.history?.saveState() : undefined);
+                document.addEventListener('reset', onSubmitOrReset);
+                document.addEventListener('submit', onSubmitOrReset);
+            });
+        })();
+    </script>
+{% endblock %}

nautobot/core/templates/utilities/templatetags/modal_form_as_dialog.html

@@ -5,19 +5,18 @@
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{{ form_name }}</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <form class="form-horizontal userconfigform" data-config-root="forms.{{ form_as_dialog.form_name }}" action="{{ form_action_url }}" method="post">
                     {% csrf_token %}
                     <h3>
                         {% if obj %}
-                            <div class="pull-right">
-                                <a href="{{ obj|get_docs_url }}" target="_blank" class="btn btn-link btn-xs" title="Help">
-                                    <i class="mdi mdi-help-circle"></i>
-                                </a>
-                            </div>
+                            <a href="{{ obj|get_docs_url }}" target="_blank" class="btn btn-link btn-sm float-end" title="Help">
+                                <span aria-hidden="true" class="mdi mdi-help-circle"></span>
+                                <span class="visually-hidden">Help</span>
+                            </a>
                         {% endif %}
                         {% block title %}{% if editing %}Editing {{ obj_type }} {{ obj }}{% else %}Add a new:{% endif %}{% endblock %}
                     </h3>
@@ -26,21 +25,18 @@
                             {% render_form form %}
                         {% endblock %}
                     {% endblock %}
-                    <div class="row">
-                        <div class="col-md-6 col-md-offset-3 text-right">
-                            {% block buttons %}
-                                {% if editing %}
-                                    <button type="submit" name="_update" class="btn btn-primary">Update</button>
-                                {% else %}
-                                    <button type="submit" name="_create" class="btn btn-primary">Create</button>
-                                {% endif %}
-                                <a href="" class="btn btn-default" data-dismiss="modal" aria-label="Close">Cancel</a>
-                            {% endblock %}
-                        </div>
+                    <div class="gap-8 hstack justify-content-center">
+                        {% block buttons %}
+                            {% if editing %}
+                                <button type="submit" name="_update" class="btn btn-primary">Update</button>
+                            {% else %}
+                                <button type="submit" name="_create" class="btn btn-primary">Create</button>
+                            {% endif %}
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
+                        {% endblock %}
                     </div>
                 </form>
             </div>
         </div>
     </div>
 </div>
-

nautobot/core/templates/utilities/templatetags/saved_view_modal.html

@@ -1,23 +1,21 @@
 {% load helpers %}
 {% load form_helpers %}
 
-<div class="modal fade" tabindex="-1" id="saved_view_modal">
+<div class="modal fade" tabindex="-1" id="saved_view_modal" role="dialog">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">New Saved View</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <form action="{% url 'extras:savedview_add' %}" method="post">
                 <div class="modal-body">
                     {% csrf_token %}
-                    <div class="form-group">
+                    <div class="row">
                         {% render_field form.name %}
-                        <div class="form-group">
-                            <label class="col-md-3 control-label" for="id_config">New Changes</label>
-                            <div class="col-md-9">
-                                <pre><code class="language-json">{{ param_dict }}</code></pre>
-                            </div>
+                        <span class="col-lg-3 text-end text-secondary">New Changes</span>
+                        <div class="col-lg-9">
+                            <pre><code class="language-json">{{ param_dict }}</code></pre>
                         </div>
                         {% render_field form.is_shared %}
                         <input type="hidden" id="view" name="view" value="{{view}}">
@@ -26,10 +24,12 @@
                 </div>
                 <div class="modal-footer">
                     <button type="submit" class="btn btn-primary">
-                        <span class="mdi mdi-content-save-plus-outline" aria-hidden="true"></span> Save
+                        <span aria-hidden="true" class="mdi mdi-content-save-plus-outline me-4"></span><!--
+                        -->Save
                     </button>
-                    <button class="btn btn-default" data-dismiss="modal">
-                        <span class="mdi mdi-close-thick" aria-hidden="true"></span> Cancel
+                    <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">
+                        <span aria-hidden="true" class="mdi mdi-close me-4"></span><!--
+                        -->Cancel
                     </button>
                 </div>
             </form>