@extends('control-panel::layout/layout')


@section('content')
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <h4>Email pages</h4>

            <div class="row">
                <div class="col">
                    <select class="form-select" id="template_type_id">
                        <option value="">--select a template--</option>
                        <optgroup label="Email structure">
                            @foreach ($templateTypes['EmailStructure'] as $item)
                                <option data-type="EmailStructure" value={{ $item['id'] }}>
                                    {{ $item['code'] . ' / ' . $item['name'] }}</option>
                            @endforeach
                        </optgroup>

                        <optgroup label="Global component">
                            @foreach ($templateTypes['EmailGlobalComponent'] as $item)
                                <option data-type="EmailGlobalComponent" value={{ $item['id'] }}>
                                    {{ ($item['type'] ? $item['type'] : ' / ___') .
                                        ($item['name'] ? ' / ' . $item['name'] : ' / ____') .
                                        ($item['is_system_default'] ? ' / is_system_default' : ' / notSysDefault') .
                                        ($item['is_default'] ? ' / is_default' : ' / notDefault') }}
                                </option>
                            @endforeach
                        </optgroup>
                    </select>
                </div>
                <div class="col-2">
                    <select class="form-select" id="template_locale">
                        @foreach ($langList as $langCode => $langName)
                            <option value="{{ $langCode }}">{{ $langCode }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col">
                    <button type="button" class="btn btn-primary" id="view_template">View template</button>
                </div>
            </div>
        </div>
        <br>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4" style="min-height:400px;">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Email editor</h4>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="IsHTMLMode" aria-checked="false"
                        onChange="htmlModeChanged(this.checked)">
                    <label class="form-check-label" for="IsHTMLMode">HTML mode</label>
                </div>
            </div>
            <div>
                <p data-default="(no template picked)" id="template_progress">(no template picked)</p>
                <p id="printableError" class="d-none"></p>
            </div>

            <div class="mb-4 border rounded bg-light p-4">
                <div class="row">
                    <p class="mb-0 mail-element mailElement canReset canUseDefault d-none" id="emailTemplateData_subject"
                        data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="subject">
                    </p>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="border nooo-overflow-x-auto">
                        {!! \Illuminate\Support\Str::of($emailLayout)->replace(
                                "{% include 'greeting' %}",
                                '<div class="mail-element mailElement canReset canUseDefault d-none" id="emailTemplateData_header" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="header"></div>' .
                                    '<div class="mail-element mailElement canReset canUseDefault d-none" id="emailTemplateData_greeting" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="greeting"></div>',
                            )->replace(
                                "{% include 'template' %}",
                                '<div class="mail-element mailElement canReset canUseDefault d-none" id="emailTemplateData_content" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="content"></div>',
                            )->replace(
                                "{% include 'signature' %}",
                                '<div class="mail-element mailElement canReset canUseDefault d-none" id="emailTemplateData_signature" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="signature"></div>',
                            )->replace(
                                "{% include 'footer' %}",
                                '<div class="mail-element mailElement canReset canUseDefault d-none" id="emailTemplateData_footer" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="footer"></div>',
                            ) !!}
                    </div>
                </div>
            </div>

            {{--
            <div class="row mt-4">
                <div class="col-md-12">
                    <table
                        style="width:100%;background:#fff;background-image:url('https://ci3.googleusercontent.com/meips/ADKq_Nb_d4zPbsq6HDgo3M1T7Fen4FqBK4Hl4Z7AX0ESVsOXxiPdlu6lHhOQAsLNtW0esPH0ovYoukEW849ER9y7eci9nXf45UdGOljnblTfxpqbiPB7wsYRooV5kw=s0-d-e1-ft#https://infince.fingent.com/skilllake/assets/mail/pattern_bottom.png');background-repeat:no-repeat;background-position:100% 100%;background-size:118px">
                        <tbody>
                            <tr>
                                <td>
                                    <table border="0" cellpadding="0" cellspacing="0"
                                        style="width:100%;padding:34px 56px 25px;text-align:left"
                                        class="m_-7751401582332167680content">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="mail-element mailElement canReset canUseDefault d-none"
                                                        id="emailTemplateData_header" data-bs-toggle="tooltip"
                                                        data-bs-placement="left" data-bs-title="header"></div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="mail-element mailElement canReset canUseDefault d-none"
                                                        id="emailTemplateData_greeting" data-bs-toggle="tooltip"
                                                        data-bs-placement="left" data-bs-title="greeting"></div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="mail-element mailElement canReset canUseDefault d-none"
                                                        id="emailTemplateData_content" data-bs-toggle="tooltip"
                                                        data-bs-placement="left" data-bs-title="content"></div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <hr
                                                        style="margin:20px 0px;background:#b1b9cf;border:0px;height:1px;opacity:0.3;margin-top:0px">
                                                    <div class="mail-element mailElement canReset canUseDefault d-none"
                                                        id="emailTemplateData_signature" data-bs-toggle="tooltip"
                                                        data-bs-placement="left" data-bs-title="signature"></div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="mail-element mailElement canReset canUseDefault d-none"
                                                        id="emailTemplateData_footer" data-bs-toggle="tooltip"
                                                        data-bs-placement="left" data-bs-title="footer"></div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
             --}}
            <hr>
            <div class="row">
                <div class="col-md-12">
                    {{-- <button type="button" class="btn btn-primary" id="save_to_current_from_editor">Save to current</button> --}}
                    <button type="button" class="btn btn-primary" id="save_to_db">Update current in DB</button>
                </div>
            </div>

            <br>
        </div>

    </div>


    <div class="modal fade overflow-auto" id="editContents" tabindex="-1" aria-labelledby="editContents" aria-hidden="true"
        data-bs-title="">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="editContents">New message</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">Use default:</label>
                            <select class="form-select" id="use-default">
                                <option value="Yes">Yes</option>
                                <option value="No">No, Choose my own</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="message-html" class="col-form-label">HTML:</label>
                            <textarea class="form-control" id="message-html" rows=5></textarea>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="save_to_current_from_modal">Add to
                            preview</button>
                    </div>

                    <div class="modal-spinner d-none">
                        <div class="spinner-border"><span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <i class="bi bi-sticky me-1"></i>
                <strong class="me-auto">Draft changed</strong>
                <small>now</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                The template saved as current draft. Click update button to save
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css"
        type="text/css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/themes/beagle.min.css"
        type="text/css">
@endpush

@push('scripts')
    <script>
        const toastLiveExample = document.getElementById('liveToast')
        const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
    </script>
    <script>
        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        function tmpParseHtmlToControlPanel(contentHtml) {

            if (contentHtml == null || contentHtml === undefined) {
                return contentHtml;
            }

            const replacements = {
                '<TABLE': '<TMP_TABLE',
                '<TR': '<TMP_TR',
                '<TD': '<TMP_TD',
                '</TABLE': '</TMP_TABLE',
                '</TR': '</TMP_TR',
                '</TD': '</TMP_TD'
            };

            // Add lowercase versions of the replacements
            Object.keys(replacements).forEach(key => {
                replacements[key.toLowerCase()] = replacements[key].toLowerCase();
            });

            for (const [key, value] of Object.entries(replacements)) {
                const regex = new RegExp(key, 'g');
                contentHtml = contentHtml.replace(regex, value);
            }

            // Step 2: Escape {%...%} and wrap in <non-editable>
            contentHtml = contentHtml.replace(/({%[^%]*%})/g, (match) => {
                const escaped = match
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
                return `<non-editable contenteditable="false">${escaped}</non-editable>`;
            });

            return contentHtml;
        }

        function tmpRestoreHtmlFromControlPanel(contentHtml) {
            if (contentHtml == null || contentHtml === undefined) {
                return contentHtml;
            }

            const reverseReplacements = {
                '<TMP_TABLE': '<TABLE',
                '<TMP_TR': '<TR',
                '<TMP_TD': '<TD',
                '</TMP_TABLE': '</TABLE',
                '</TMP_TR': '</TR',
                '</TMP_TD': '</TD'
            };

            // Add lowercase versions of the replacements
            Object.keys(reverseReplacements).forEach(key => {
                reverseReplacements[key.toLowerCase()] = reverseReplacements[key].toLowerCase();
            });

            for (const [key, value] of Object.entries(reverseReplacements)) {
                const regex = new RegExp(key, 'g');
                contentHtml = contentHtml.replace(regex, value);
            }

            // Unwrap and unescape {%...%} blocks
            contentHtml = contentHtml.replace(
                /<non-editable[^>]*>(.*?)<\/non-editable>/g,
                (_, innerHtml) => {
                    const unescaped = innerHtml
                        .replace(/&amp;/g, '&')
                        .replace(/&lt;/g, '<')
                        .replace(/&gt;/g, '>')
                        .replace(/&quot;/g, '"')
                        .replace(/&#039;/g, "'");
                    return unescaped;
                }
            );

            return contentHtml;
        }


        function hideDiv(element, newData) {
            element.classList.add('d-none');

            if (newData !== undefined) {
                element.innerHTML = tmpParseHtmlToControlPanel(newData);
            }
            return element;
        }

        function showDiv(element, newData) {
            element.classList.remove('d-none');

            if (newData !== undefined) {
                element.innerHTML = tmpParseHtmlToControlPanel(newData);
            }
            return element;
        }

        const viewTemplate = document.querySelector('#view_template');
        const templateSelectList = document.querySelector('#template_type_id');
        const localeSelectList = document.querySelector('#template_locale');
        const templateProgress = document.querySelector('#template_progress');
        const printableErrorDiv = document.querySelector('#printableError');
        const emailTemplateData_subject = document.querySelector('#emailTemplateData_subject');
        const emailTemplateData_header = document.querySelector('#emailTemplateData_header');
        const emailTemplateData_greeting = document.querySelector('#emailTemplateData_greeting');
        const emailTemplateData_content = document.querySelector('#emailTemplateData_content');
        const emailTemplateData_signature = document.querySelector('#emailTemplateData_signature');
        const emailTemplateData_footer = document.querySelector('#emailTemplateData_footer');
        //const saveToCurrentFromEditor = document.querySelector('#save_to_current_from_editor');
        const saveToCurrentFromModal = document.querySelector('#save_to_current_from_modal');
        const saveToDB = document.querySelector('#save_to_db');

        var editor = null;

        var isHTMLMode = false;

        const mailElements = document.querySelectorAll('.mailElement');
        const useDefault = document.querySelector('#use-default');
        const editContents = document.getElementById('editContents');
        const modalBodyInput = editContents.querySelector('.modal-body textarea');

        let viewTemplateAPIController = null;
        let storeTemplateAPIController = null;


        const TEMPLATE_MANAGER = (() => {
            let state = {
                template: null,
            };

            return {
                get: () => ({
                    ...state
                }), // returns a shallow copy

                setTemplate: (template) => {
                    state.template = template
                },

                setTemplateData: (templateData) => {
                    let tmp = state.template;

                    for (let [key, value] of Object.entries(templateData)) {
                        if (tmp.data.hasOwnProperty(key)) {
                            tmp.data[key]['custom'] = tmpRestoreHtmlFromControlPanel(value);
                        }
                    }
                    state.template = tmp
                },

                clear: () => {
                    state.template = null;
                }
            };
        })();


        viewTemplate.addEventListener('click', () => {

            if (templateSelectList.value == '') {
                templateSelectList.classList.add('is-invalid');
                templateSelectList.focus();
                return false;
            }
            templateSelectList.classList.remove('is-invalid');

            if (localeSelectList.value == '') {
                localeSelectList.classList.add('is-invalid');
                localeSelectList.focus();
                return false;
            }
            localeSelectList.classList.remove('is-invalid');

            templateProgress.innerHTML = 'Loading...';
            TEMPLATE_MANAGER.clear();
            hideDiv(emailTemplateData_subject, '');
            hideDiv(emailTemplateData_header, '');
            hideDiv(emailTemplateData_greeting, '');
            hideDiv(emailTemplateData_content, '');
            hideDiv(emailTemplateData_signature, '');
            hideDiv(emailTemplateData_footer, '');


            if (viewTemplateAPIController) {
                viewTemplateAPIController.abort();
                viewTemplateAPIController = null;
            }

            viewTemplateAPIController = new AbortController();
            const signal = viewTemplateAPIController.signal;

            const data = {
                'type': templateSelectList.options[templateSelectList.selectedIndex].getAttribute('data-type'),
                'type_id': templateSelectList.options[templateSelectList.selectedIndex].value,
                'label': templateSelectList.options[templateSelectList.selectedIndex].innerText.trim(),
                'locale': localeSelectList.value,
            };
            fetch(`{{ route('control-panel.emailTemplateData') }}?_=${Date.now()}`, {
                    signal,
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(data)
                })
                .then(res => res.json())
                .then(res => {
                    viewTemplateAPIController = null;
                    let printableError = '';

                    templateProgress.innerText = (res?.label && res?.locale) ? `${res.label}: ${res.locale}` :
                        'Invalid!!!'

                    if (res.error) {
                        printableError = 'Error:' + res.error;
                    } else if (!res.data) {
                        printableError = JSON.stringify(res); // if error print full response
                    }

                    if (printableError) {
                        printableErrorDiv.innerText = printableError;
                        printableErrorDiv.classList.remove('d-none');
                        return;
                    } else {
                        printableErrorDiv.innerText = '';
                        printableErrorDiv.classList.add('d-none');
                    }

                    TEMPLATE_MANAGER.setTemplate(res);
                    initEditor();
                })
        });

        /*
        saveToCurrentFromEditor.addEventListener('click', function() {
            TEMPLATE_MANAGER.setTemplateData({
                'subject': emailTemplateData_subject.innerText,
                'header': emailTemplateData_header.innerHTML,
                'greeting': emailTemplateData_greeting.innerHTML,
                'content': emailTemplateData_content.innerHTML,
                'signature': emailTemplateData_signature.innerHTML,
                'footer': emailTemplateData_footer.innerHTML,
            })
            toastBootstrap.show()
        });
        */

        saveToCurrentFromModal.addEventListener('click', function() {
            const title = editContents.getAttribute('data-bs-title');
            let tmp = {}
            tmp[title] = useDefault.value == 'Yes' ? null : modalBodyInput.value;
            TEMPLATE_MANAGER.setTemplateData(tmp);
            toastBootstrap.show();
            initEditor();
            editContentsModal.hide();
        });

        saveToDB.addEventListener('click', function() {
            if (TEMPLATE_MANAGER.get().template == null) {
                return;
            }

            let data = TEMPLATE_MANAGER.get().template.data;

            let payloadData = {}
            for (const [key, value] of Object.entries(data)) {
                payloadData[key] = value.custom;
            }

            if (storeTemplateAPIController) {
                storeTemplateAPIController.abort();
                storeTemplateAPIController = null;
            }

            storeTemplateAPIController = new AbortController();
            const signal = storeTemplateAPIController.signal;

            let payload = {
                'type': TEMPLATE_MANAGER.get().template.type,
                'type_id': TEMPLATE_MANAGER.get().template.type_id,
                'label': TEMPLATE_MANAGER.get().template.label,
                'locale': TEMPLATE_MANAGER.get().template.locale,
                'data': payloadData
            };

            fetch(`{{ route('control-panel.updateEmailTemplateData') }}?_=${Date.now()}`, {
                    signal,
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(res => {
                    console.log(res)
                    alert('Completed')
                });
        });
    </script>
@endpush

@push('scripts')
    <script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>

    <script>
        // console.log(MediumEditor.extensions);

        const initEditor = () => {

            if (editor) {
                editor.destroy();
                editor = null;
            }

            const res = TEMPLATE_MANAGER.get().template;
            if (res != null) {
                const {
                    subject,
                    header,
                    greeting,
                    content,
                    signature,
                    footer
                } = res.data;

                hideDiv(emailTemplateData_subject, '');
                hideDiv(emailTemplateData_header, '');
                hideDiv(emailTemplateData_greeting, '');
                hideDiv(emailTemplateData_content, '');
                hideDiv(emailTemplateData_signature, '');
                hideDiv(emailTemplateData_footer, '');

                if (res.type == 'EmailStructure') {
                    showDiv(emailTemplateData_subject, subject.custom ?? subject.default);
                    showDiv(emailTemplateData_header, header.custom ?? header.default);
                    showDiv(emailTemplateData_greeting, greeting.custom ?? greeting.default);
                    showDiv(emailTemplateData_content, content.custom ?? content.default);
                    showDiv(emailTemplateData_signature, signature.custom ?? signature.default);
                    showDiv(emailTemplateData_footer, footer.custom ?? footer.default);
                } else if (res.type == 'EmailGlobalComponent') {
                    showDiv(emailTemplateData_content, content.custom ?? content.default);
                }
            }

            if (isHTMLMode) {
                return;
            }
            editor = new MediumEditor('.mailElement', {
                //buttonLabels: 'fontawesome',
                toolbar: {
                    buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3']
                },
                extensions: {},
            });

            editor.subscribe('blur', function(event, editable) {

                //console.log('Editor blurred');
                //console.log('Blurred element:', editable);
                //console.log('Event:', event);

                const currentContent = tmpRestoreHtmlFromControlPanel(editable.innerHTML);
                const title = editable.getAttribute('data-bs-title');

                const custom1 = TEMPLATE_MANAGER.get().template.data[title].custom;
                const default1 = TEMPLATE_MANAGER.get().template.data[title].default;
                //console.log(currentContent, custom1, default1)

                let isCurrentChangedFromCustom1 = currentContent !== custom1;
                let isCurrentChangedFromDefault1 = currentContent !== default1;
                let isCustomIsUsing = custom1 !== null;

                /*
                console.log('isCurrentChangedFromCustom1 && isCustomIsUsing', isCurrentChangedFromCustom1 && isCustomIsUsing);
                console.log('isCurrentChangedFromDefault1 && !isCustomIsUsing', isCurrentChangedFromDefault1 && !isCustomIsUsing);
                 */

                if (
                    (isCurrentChangedFromCustom1 && isCustomIsUsing) ||
                    (isCurrentChangedFromDefault1 && !isCustomIsUsing)
                ) {
                    console.log('Content changed on blur!');

                    if (currentContent === custom1 && currentContent === default1) {
                        console.log('... but, exact same as default. Please change to default on popup');
                    }

                    let tmp = {}
                    tmp[title] = title == 'subject' ? editable.innerText : editable.innerHTML;
                    TEMPLATE_MANAGER.setTemplateData(tmp);
                    toastBootstrap.show();
                } else {
                    console.log('Content DID NOT changed on blur!');
                }

            });
        }

        initEditor();
        const htmlModeChanged = (isHTMLModeON) => {
            isHTMLMode = isHTMLModeON;
            if (isHTMLMode) {
                editor.destroy();
                editor = null;
            } else {
                initEditor();
            }
        }
    </script>
@endpush


@push('scripts')
    <script>
        const editContentsModal = new bootstrap.Modal('#editContents', {
            keyboard: true
        })
        const modalSpinner = editContents.querySelector('.modal-spinner');
        const modalTitle = editContents.querySelector('.modal-title');


        editContents.addEventListener('show.bs.modal', event => {
            const button = event.relatedTarget;
            editContents.setAttribute('data-bs-title', button.getAttribute('data-bs-title'));
            const title = editContents.getAttribute('data-bs-title');

            modalSpinner.classList.remove('d-none');

            modalTitle.textContent = `Update ${TEMPLATE_MANAGER.get().template.type}`;

            const useDefaultLayout = TEMPLATE_MANAGER.get().template.data[title].custom ? false : true;

            useDefault.selectedIndex = useDefaultLayout ? 0 : 1;

            if (useDefaultLayout) {
                modalBodyInput.disabled = true;
                modalBodyInput.value = TEMPLATE_MANAGER.get().template.data[title].default
            } else { //custom
                modalBodyInput.disabled = false;
                modalBodyInput.value = TEMPLATE_MANAGER.get().template.data[title].custom ?? TEMPLATE_MANAGER.get()
                    .template.data[title].default
            }

            modalSpinner.classList.add('d-none');
        });

        mailElements.forEach(i => {
            i.addEventListener('click', function() {
                if (isHTMLMode) {
                    editContentsModal.show(this);
                }
            });
        });
        editContents.addEventListener('hide.bs.modal', event => {
            modalTitle.textContent = `Loading...`;
            modalBodyInput.value = '';
            editContents.setAttribute('data-bs-title', '');
            modalSpinner.classList.remove('d-none');
        });

        useDefault.addEventListener('change', (e) => {

            const title = editContents.getAttribute('data-bs-title');
            const useDefaultLayout = e.target.value == "Yes";

            if (useDefaultLayout) {
                modalBodyInput.disabled = true;
                modalBodyInput.value = TEMPLATE_MANAGER.get().template.data[title].default

                //let cleared = {};
                //cleared[title] = null;
                //TEMPLATE_MANAGER.setTemplateData(cleared);
                //initEditor();
            } else { //custom
                modalBodyInput.disabled = false;
                modalBodyInput.value = TEMPLATE_MANAGER.get().template.data[title].custom ?? TEMPLATE_MANAGER.get()
                    .template.data[title].default
            }
        });
    </script>
@endpush

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        .medium-editor-toolbar-active button[data-action="createLink"] b {
            visibility: hidden;
            position: relative;
        }

        .medium-editor-toolbar-active button[data-action="createLink"] b::before {
            content: "🔗";
            filter: grayscale(1);
            visibility: visible;
            position: absolute;
            left: 0;
        }

        button[data-action="createLink"].medium-editor-button-active b::before {
            filter: hue-rotate(316deg);
        }
    </style>

    <style>
        TMP_TABLE,
        tmp_table {
            display: table;
            border-collapse: collapse;
            /* Optional, matches default table behavior */
            width: 100%;
        }

        TMP_TR,
        tmp_tr {
            display: table-row;
        }

        TMP_TD,
        tmp_td {
            display: table-cell;
            padding: 4px;
        }

        TMP_TABLE[border="0"],
        tmp_table[border="0"] {
            border: none;
        }

        TMP_TABLE[border="1"],
        tmp_table[border="1"] {
            border: 1px solid black;
        }

        TMP_TABLE[border="2"],
        tmp_table[border="2"] {
            border: 2px solid black;
        }

        /* Apply border to cells as well */
        TMP_TABLE tr,
        TMP_TABLE TR,
        tmp_table tr,
        tmp_table tr,

        TMP_TABLE td,
        TMP_TABLE TD,
        tmp_table td,
        tmp_table TD {
            border: inherit;
            /* Let cells inherit the table border width */
        }

        /* Optional: override if you want cell borders independent */
        TMP_TABLE[border="1"] td,
        TMP_TABLE[border="1"] TMP_TD,
        tmp_table[border="1"] td,
        tmp_table[border="1"] TMP_TD,

        TMP_TABLE[border="1"] tr,
        TMP_TABLE[border="1"] TMP_TR,
        tmp_table[border="1"] tr,
        tmp_table[border="1"] TMP_TR {
            border: 1px solid black;
        }

        TMP_TABLE[border="2"] td,
        TMP_TABLE[border="2"] TMP_TD,
        tmp_table[border="2"] td,
        tmp_table[border="2"] TMP_TD,


        TMP_TABLE[border="2"] tr,
        TMP_TABLE[border="2"] TMP_TR,
        tmp_table[border="2"] tr,
        tmp_table[border="2"] TMP_TR {
            border: 2px solid black;
        }

        .non-editable,
        non-editable {
            background-color: #f3f3f3;
            color: #555;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: monospace;
            user-select: none;
        }

        .non-editable:hover,
        non-editable:hover {
            background-color: #e1e1e1;
        }
    </style>

    <style>
        .mailElement {
            position: relative;
            padding: 5px;
        }

        .mailElement::active {
            outline: 2px dotted orange;
        }

        .mailElement:hover {
            outline: 2px dotted red;
            border-radius: 5px;
        }

        .mailElement:hover::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: rgb(96 125 139 / 11%);
        }

        .mailElement:not([contenteditable]):hover a {
            pointer-events: none;
        }


        .modal-spinner {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f0f8ff40;
        }
    </style>
@endpush