{#include base title="Template Jobs" subtitle="Verwalten Sie Template-Jobs"}

{#content}
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-md-5">
                            <input type="search"
                                   class="form-control"
                                   name="search"
                                   placeholder="Templates durchsuchen..."
                                   title="Suche nach Template-Name oder Job-Typ. Verwenden Sie 'key=value' für Parameter-Suche (z.B. 'userId=123')"
                                   data-bs-toggle="tooltip"
                                   data-bs-placement="top"
                                   hx-get="{cp}/templates/table"
                                   hx-trigger="keyup changed delay:300ms"
                                   hx-target="#jobs-table"
                                   hx-vals='js:&#123;"page": "0", "size": jrcPageSize("templates"), "sortBy": "jobName", "sortOrder": "asc"&#125;'
                                   hx-include="[name='jobType']">
                        </div>
                        <div class="col-md-3">
                            <label for="jobTypeFilter" class="visually-hidden">Job-Typ Filter</label>
                            <select id="jobTypeFilter"
                                    name="jobType"
                                    class="form-select"
                                    hx-get="{cp}/templates/table"
                                    hx-target="#jobs-table"
                                    hx-vals='js:&#123;"page": "0", "size": jrcPageSize("templates"), "sortBy": "jobName", "sortOrder": "asc"&#125;'
                                    hx-include="[name='search']">
                                <option value="all">Alle Job-Typen</option>
                                {#for jobDef in availableJobTypes}
                                    <option value="{jobDef.jobType()}">{jobDef.displayName()}</option>
                                {/for}
                            </select>
                        </div>
                        <div class="col-md-4 text-end">
                            {#if security:hasOneOfRole('configurator', 'admin')}
                            <button class="btn btn-primary" type="button" onclick="openNewTemplateModal()">
                                <i class="bi bi-plus-circle"></i> Neues Template erstellen
                            </button>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="jobs-table"
         hx-get="{cp}/templates/table"
         hx-trigger="load"
         hx-vals='js:&#123;"size": jrcPageSize("templates")&#125;'
         hx-swap="outerHTML">
        <div class="text-center py-5">
            <div class="spinner-border text-primary" aria-hidden="true"></div>
            <output class="d-block mt-2">Lade Templates...</output>
        </div>
    </div>

    <!-- Bootstrap Modal -->
    <div class="modal fade" id="jobModal" tabindex="-1" aria-labelledby="jobModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="jobModalLabel">Template planen</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body"
                     id="modal-content"
                     hx-get="{cp}/templates/modal/new"
                     hx-trigger="load"
                     hx-swap="innerHTML">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" aria-hidden="true"></div>
                        <output class="d-block">Lade Formular...</output>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function showFormAlert(form, message) {
            if (!form) {
                return;
            }
            const alertsContainer = form.querySelector('#form-alerts');
            if (!alertsContainer) {
                return;
            }
            alertsContainer.innerHTML =
                '<div class="alert alert-danger alert-dismissible fade show" role="alert">'
                + '<i class="bi bi-exclamation-triangle-fill"></i> <strong>Fehler:</strong> ' + message
                + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'
                + '</div>';
            const modalBody = document.querySelector('#jobModal .modal-body');
            if (modalBody) {
                modalBody.scrollTo({ top: 0, behavior: 'smooth' });
            }
        }

        function updateFieldCounter(field) {
            const max = Number.parseInt(field.getAttribute('maxlength'), 10);
            if (!Number.isFinite(max) || !field.id) {
                return;
            }
            const counter = document.querySelector('[data-counter-for="' + field.id + '"]');
            if (!counter) {
                return;
            }
            const remaining = max - field.value.length;
            counter.textContent = 'Verbleibend: ' + remaining + ' von ' + max;
            counter.classList.toggle('text-danger', remaining < 0);
        }

        function initFieldCounters(root) {
            const scope = root || document;
            scope.querySelectorAll('textarea[maxlength], input[maxlength]').forEach(function(field) {
                updateFieldCounter(field);
                if (field.dataset.counterBound === 'true') {
                    return;
                }
                field.addEventListener('input', function() {
                    updateFieldCounter(field);
                });
                field.dataset.counterBound = 'true';
            });
        }

        initFieldCounters(document);

        // Auto-refresh every 10 seconds
        function resetTemplateModalToNew(loadContent) {
            const content = document.getElementById('modal-content');
            if (!content) {
                return;
            }

            // Append a cache-busting timestamp so HTMX never serves a cached (pre-filled) form
            content.setAttribute('hx-get', '{cp}/templates/modal/new?_=' + Date.now());
            htmx.process(content);

            if (loadContent) {
                htmx.trigger(content, 'load');
            }

            const modalLabel = document.getElementById('jobModalLabel');
            if (modalLabel) {
                modalLabel.textContent = 'Template planen';
            }
        }

        function openNewTemplateModal() {
            const modalElement = document.getElementById('jobModal');
            if (!modalElement) {
                return;
            }

            resetTemplateModalToNew(true);
            const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
            modal.show();
        }

         // Auto-refresh every 10 seconds
        setInterval(() => {
            htmx.trigger('#jobs-table', 'load');
        }, 10000);

        // Close modal after successful form submission (HTMX 2.x best practice)
        // The server sends HX-Trigger: closeModal on success responses
        document.body.addEventListener('closeModal', function() {
            const modalElement = document.getElementById('jobModal');
            const modal = bootstrap.Modal.getInstance(modalElement);
            if (modal) {
                modal.hide();
            }
        });

        // Reset modal content when closed
        document.getElementById('jobModal').addEventListener('hidden.bs.modal', function () {
            // Always restore new-template endpoint to avoid leaking previous edit state
            resetTemplateModalToNew(true);
         });

        // Scroll modal to top on error (server sends HX-Trigger: scrollToError)
        document.body.addEventListener('scrollToError', function() {
            const modalBody = document.querySelector('#jobModal .modal-body');
            if (modalBody) {
                modalBody.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });

        // Clear form alerts when form is submitted (HTMX 2.x event API)
        document.body.addEventListener('htmx:beforeRequest', function(event) {
            const form = event.detail.elt;
            if (form && (form.id === 'templateForm' || form.id === 'jobForm')) {
                const alertsContainer = form.querySelector('#form-alerts');
                if (alertsContainer) {
                    alertsContainer.innerHTML = '';
                }
            }
        });

        // Show browser validation message in the modal instead of silent submit-blocking
        document.body.addEventListener('invalid', function(event) {
            const field = event.target;
            if (!field) {
                return;
            }
            const form = field.form;
            if (!form || (form.id !== 'templateForm' && form.id !== 'jobForm')) {
                return;
            }
            showFormAlert(form, field.validationMessage || 'Bitte Eingaben im Formular pruefen.');
        }, true);

        // Catch backend rejections (e.g. HTTP 413 when a form attribute exceeds server limits)
        document.body.addEventListener('htmx:responseError', function(event) {
            const elt = event.detail && event.detail.elt;
            const form = elt && elt.closest ? elt.closest('form') : null;
            if (!form || (form.id !== 'templateForm' && form.id !== 'jobForm')) {
                return;
            }
            const xhr = event.detail && event.detail.xhr;
            if (xhr && xhr.status === 413) {
                showFormAlert(form, 'Die Eingabe ist zu gross fuer den Server (HTTP 413). Bitte Text kuerzen oder die Server-Limite erhoehen.');
                return;
            }
            showFormAlert(form, 'Speichern fehlgeschlagen. Bitte Eingaben und Groesse pruefen.');
        });

        // Catch network-level submit failures where no HTTP response is available
        document.body.addEventListener('htmx:sendError', function(event) {
            const elt = event.detail && event.detail.elt;
            const form = elt && elt.closest ? elt.closest('form') : null;
            if (!form || (form.id !== 'templateForm' && form.id !== 'jobForm')) {
                return;
            }
            showFormAlert(form, 'Request konnte nicht gesendet werden. Bitte Verbindung und Eingabegroesse pruefen.');
        });

        document.body.addEventListener('htmx:afterSwap', function(event) {
            if (!event || !event.detail || !event.detail.target) {
                initFieldCounters(document);
                return;
            }
            initFieldCounters(event.detail.target);
        });
    </script>
{/content}