{{ define "templateEditor" }}

<script src="/static/js/checkboxRenderer.js"></script>
<script src="/static/js/inputFields.js"></script>

<link href="/static/css/pages/src-dst.css" rel="stylesheet">

<script type="text/javascript" charset="utf-8">
    const templatesColumnDefs = [
        {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
        {field: "channelTypeId",hide: true, maxWidth: 100, getQuickFilterText: () => ''},
        {field: "channelTypeName", headerName: "Channel Type", pinned: "left", suppressMovable: true, maxWidth: 130},
        {{ range .Levels }}
        {field: "{{ .Id }}", headerName: "{{ .Name }}", suppressMovable: true, editable: true, width: 70, filter: false, cellRenderer: CheckboxRendererAG},
        {{ end }}
    ];

    var templatesGridOptions = {
        defaultColDef: {
            resizable: true,
            filter: true,
            lockPinned: true,
        },
        columnDefs: templatesColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        onCellValueChanged: onTemplateMappingCellValueChanged,
    };

    function updateCurrentMapping(mappingData){
        let selectedMapping = []
        for (let i=0; i<mappingData.length; i++){
            selectedMapping.push({
                levelId: mappingData[i].levelId,
                channelTypeId: mappingData[i].channelTypeId
            });
        }
        sessionStorage.setItem("currentMapping", JSON.stringify(selectedMapping));
    }

    function updateTemplateAGData (templateId) {
        displayDialog("LoadingModal");
        fetch('/template/agdata?templateId=' + templateId)
            .then((response) => response.json())
            .then((data) => {
                templatesGridOptions.api.setRowData(data);
                hideDialog("LoadingModal");
            });
    }

    function updateTemplateMappingData (templateId) {
        displayDialog("LoadingModal");
        $.ajax({url: "/template/mappingdata?templateId=" + templateId,
            success: (result) => {
                if (result) {
                    updateCurrentMapping(result);
                }
                hideDialog("LoadingModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function displayTemplate(id, name, duplicate) {
        id = parseInt(id);
        document.getElementById("templateId").value = (duplicate === true || id == 0) ? 0 : id;
        document.getElementById("templateName").readOnly = !(duplicate === true || id == 0);
        updateTemplateAGData(id);
        updateTemplateMappingData(id);
        if (name) {
            if (duplicate){
                name = name + " (Duplicate)";
            }
            document.getElementById("templateName").value = name;
        } else {
            document.getElementById("templateName").value = "";
        }
    }

    function saveTemplate() {
        let templateName = document.getElementById("templateName").value;
        templateName = templateName.trim();
        if (!validateString(templateName)) {
            displayErrorDialog(NameErrorMessage);
            return;
        }

        displayDialog("LoadingModal");
        const urlParameters = [
            "templateName=" + encodeURIComponent(templateName),
            "templateMapping=" + sessionStorage.getItem("currentMapping"),
            "templateId=" + parseInt(document.getElementById("templateId").value)
        ];
        $.ajax({url: "/template/save?" + urlParameters.join("&"),
            success: (result) => {
                hideDialog("LoadingModal");
                if (result == "") {
                    displayWarningDialog("There is already a template with this name in the database, please enter a different name.")
                } else {
                    $("#newTemplateModal").modal('hide');
                }
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function selectAudioMixerTemplate() {
        let chPer = document.getElementById("chPer").value;
        if (chPer == "custom"){
            chPer = document.getElementById("customCh").value;
        }
        let startingLevel = document.getElementById("startingLevel").value;
        let mixerTemplate = {startingLevel: startingLevel, chPer: chPer};
        sessionStorage.setItem("mixerTemplate", JSON.stringify(mixerTemplate));
        selectTemplate("audiomixer", "Audio mixer");
    }

    function selectSingleLevelTemplate() {
        let channelType = document.getElementById("singleLevelChType").value;
        let level = document.getElementById("singleLevel").value;
        let singleLevelTemplate = {level: level, channelType: channelType};
        sessionStorage.setItem("singleLevelTemplate", JSON.stringify(singleLevelTemplate));
        selectTemplate("singleLevel", "Single level");
    }

    function selectAcuityTemplate() {
        let cardNumber = document.getElementById("cardNumber").value;
        let level = document.getElementById("acuityLevel").value;
        let acuityTemplate = {level: level, cardNumber: cardNumber};
        sessionStorage.setItem("acuityTemplate", JSON.stringify(acuityTemplate));
        selectTemplate("acuity", "Acuity");
        if (!isNumeric(cardNumber)) {
            displayErrorDialog("Acuity Number is invalid.  Only numbers are allowed for this field.");
        }
    }

    function isSdiOptionsAllowed() {
        return !(isPageTypeSources && isImpliedSourcesMode);
    }

    function showAudioMixerModal() {
        setDisplayAttributeByName("mixerOptions", "block");
        setDisplayAttributeByName("madiOptions", "none");
        document.getElementById("audioMixerModalLabel").innerText = "Audio Mixer";
        {{ if eq .PageType "source" }}
        document.getElementById('repeatMapping').checked = false;
        {{ end }}
        document.getElementById("templateSelectButton").onclick = function() { selectAudioMixerTemplate(); }
    }

    function showMADIModal() {
        const templateLabel = document.getElementById("madiTemplateLabel").innerText.trim();
        document.getElementById("audioMixerModalLabel").innerText = templateLabel;

        setElementsVisibleByName("mixerOptions", false);
        setElementsVisibleByName("madiOptions", true);
        setElementsVisibleByField("madiOptions_sdi", isSdiOptionsAllowed() && templateLabel.includes("SDI")); // Show "Include SDI" field only when applicable.
        
        if (isPageTypeSources) {
            document.getElementById('repeatMapping').checked = true;
        }

        document.getElementById('includeSDI').checked = false;
        document.getElementById('includeSDILabel').innerText = "Include SDI:";
        document.getElementById("templateSelectButton").onclick = function() { selectMADITemplate(); }
    }

    function showIpSdiModal() {
        setDisplayAttributeByName("mixerOptions", "none");
        document.getElementById("audioMixerModalLabel").innerText = document.getElementById("ipSdiTemplateLabel").innerText.trim();
        {{ if eq .PageType "source" }}
        document.getElementById('repeatMapping').checked = false;
        {{ end }}
        document.getElementById('includeSDI').checked = true;
        setDisplayAttributeByName("madiOptions", "none");
        if (document.getElementById("madiTemplateLabel").innerText.trim().includes("SDI")) {
            setDisplayAttributeByName("madiOptions", "block");
        }
        document.getElementById('chPer').value = "custom";
        onChangeChPer();
        document.getElementById('customCh').value = 16;
        document.getElementById('includeSDI').style.display = "block";
        document.getElementById('includeSDILabel').style.display = "block";
        document.getElementById('includeSDILabel').innerText = "Include Video:";
        document.getElementById("templateSelectButton").onclick = function() { selectIpSDITemplate(); }
    }

    function selectMADITemplate() {
        let chPer = document.getElementById("chPer").value;
        if (chPer == "custom"){
            chPer = document.getElementById("customCh").value;
        }
        const audioTemplate = {chPer: chPer, startingLevel: document.getElementById("startingLevel").value};
        sessionStorage.setItem("audioTemplate", JSON.stringify(audioTemplate));
        selectTemplate("madi", isSdiOptionsAllowed() ? "SDI + MADI" : "MADI");
    }

    function selectIpSDITemplate() {
        let chPer = document.getElementById("chPer").value;
        if (chPer == "custom"){
            chPer = document.getElementById("customCh").value;
        }
        const audioTemplate = {chPer: chPer, startingLevel: document.getElementById("startingLevel").value};
        sessionStorage.setItem("audioTemplate", JSON.stringify(audioTemplate));
        selectTemplate("ipSdi", "IP + SDI");
    }

    function deleteTemplate(id) {
        const currentSelectedTemplate = getSelectedTemplate();
        if (currentSelectedTemplate.id == id) {
            displayWarningDialog("You cannot delete the template that is currently selected.  Please change the selected template before attempting to delete it.");
            hideDialog('removeTemplateModal');
            return;
        }

        displayDialog("LoadingModal");
        $.ajax({url: '/template/delete?templateId=' + id,
            success: () => {
                hideDialog("LoadingModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function selectTemplate(templateId, templateName) {
        document.getElementById("selectedTemplate").placeholder = templateName;
        document.getElementById("selectedTemplateId").value = templateId;
    }

	function getSelectedTemplate () {
	    return {
	        id: document.getElementById("selectedTemplateId").value,
	        name: document.getElementById("selectedTemplate").placeholder
        };
    }

    function onTemplateMappingCellValueChanged(event) {
        let currentMapping = JSON.parse(sessionStorage.getItem("currentMapping"));
        if (!currentMapping) {
            currentMapping = [];
        }
        let index = currentMapping.findIndex(o => (o.channelTypeId === event.node.data.channelTypeId && o.levelId === Number(event.colDef.field)));
        if (index > -1) {
            currentMapping.splice(index, 1);
        }
        if (event.newValue) {
            currentMapping.push({
                levelId: Number(event.colDef.field),
                channelTypeId: event.node.data.channelTypeId
            });
        }
        sessionStorage.setItem("currentMapping", JSON.stringify(currentMapping));
    }

    function onChangeChPer(){
        const visible = document.getElementById("chPer").value == "custom" ? "visible" : "hidden";
        document.getElementById("customCh").style.visibility = visible;
        document.getElementById("customChLabel").style.visibility = visible;
        document.getElementById("customChWrapper").style.visibility = visible;
    }
</script>

<div class="modal" id="newTemplateModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="newTemplateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size modal-resize">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="newTemplateModalLabel"><i class="icon-template icon-white"></i>Channels Map Template</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body modal-body-resize modal-body-new-template">
                <div class="container-data container-resize">
                    <table>
                        <tr class="row-data">
                            <td class="col-data-label">Template Name:</td>
                            <td class="col-data-input"><input type="text" class="form-control rounded-0 name-size" id="templateName" tabindex="0" value=""/></td>
                            <td class="col-data-input"><input type="hidden" class="form-control rounded-0 name-size" id="templateId" value="0"/></td>
                        </tr>
                    </table>
                    <div class="grid-wrapper grid-wrapper-new-template" id="newTemplateTable">
                        <div id="templateGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal" tabindex="2">Close</button>
                <button  class="btn btn-text" id="saveTemplateButton" tabindex="1" onclick="saveTemplate();">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="audioMixerModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="audioMixerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="audioMixerModalLabel"><i class="icon-template icon-white"></i>Audio Mixer</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                    <table class="container-data">
                        <tr class="row-data">
                            <td class="col-data-label-rename" name="madiOptions">Suffix</td>
                            <td class="col-data-input">
                                <input class="form-control rounded-0 prefix-size" name="madiOptions" id="madiChannelSuffix" type="text" value=" CH "/>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label-rename">Start at Level:</td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select auto-size" name="startingLevel" id="startingLevel">
                                        {{ range .Levels }}
                                        {{/* set the default to Level 2, usually the first audio level */}}
                                        <option value="{{ .Id }}" {{if eq .Id 2 }} selected {{ end }}>{{ .Name }}</option>
                                        {{ end }}
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label-rename">Channels per {{ if eq .PageType "source"}}Source{{ else }}Destination{{ end }}:</td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select auto-size" name="chPer" id="chPer" onchange="onChangeChPer()">
                                        <option value="1">Mono</option>
                                        <option value="2">Stereo</option>
                                        <option value="4">Quad</option>
                                        <option value="8">Oct</option>
                                        <option value="custom">Custom...</option>
                                    </select>
                                </div>
                            </td>
                            <td id="customChLabel" style="visibility: hidden">#</td>
                            <td class="col-data-input"><span class="number-wrapper" id="customChWrapper" style="visibility: hidden"><input class="form-control rounded-0 number-size" style="visibility: hidden" name="customCh" id="customCh" type="number" min="1" max="64" oninput="restrictNumberField(this)" placeholder="1"/></span></td>
                        </tr>
                        {{ if eq .PageType "source" }}
                        <tr class="row-data">
                            <td class="col-data-label-rename" id="repeatMappingLabel">Repeat Mapping:</td>
                            <td class="col-data-input">
                                <input class="form-check-input" type="checkbox" value="" id="repeatMapping" checked>
                            </td>
                        </tr>
                        {{ end }}
                        <tr class="row-data">
                            <td class="col-data-label-rename" name="madiOptions" id="includeSDILabel" data-field-id="madiOptions_sdi">Include SDI</td>
                            <td class="col-data-input">
                                <input class="form-check-input" type="checkbox" value="" name="madiOptions" id="includeSDI" data-field-id="madiOptions_sdi">
                            </td>
                        </tr>
                    </table>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button  class="btn btn-text" data-bs-dismiss="modal" id="templateSelectButton" onclick="selectAudioMixerTemplate()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="singleLevelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="singleLevelModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="singleLevelModalLabel"><i class="icon-template icon-white"></i>Single Level</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data">
                    <table class="container-data">
                        <tr class="row-data">
                            <td class="col-data-label-rename">Level:</td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="singleLevel" id="singleLevel">
                                        {{ range .Levels }}
                                        <option value="{{ .Id }}">{{ .Name }}</option>
                                        {{ end }}
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label-rename">Channel Type:</td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="singleLevelChType" id="singleLevelChType">
                                        {{ range .ChannelGroups }}
                                        <option value="{{ .Name }}">{{ .Name }}</option>
                                        {{ end }}
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button  class="btn btn-text" data-bs-dismiss="modal" id="singleLevelSelectButton" onclick="selectSingleLevelTemplate()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="acuityModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="acuityModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="acuityModalLabel"><i class="icon-template icon-white"></i>Acuity</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data">
                    <table class="container-data">
                        <tr class="row-data">
                            <td class="col-data-label-rename">Level:</td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="acuityLevel" id="acuityLevel">
                                        {{ range .Levels }}
                                        <option value="{{ .Id }}">{{ .Name }}</option>
                                        {{ end }}
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label">Acuity Number:</td>
                            <td class="col-data-input"><input class="form-control rounded-0 prefix-size" name="cardNumber" id="cardNumber" value="1"/></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button  class="btn btn-text" data-bs-dismiss="modal" id="acuitySelectButton" onclick="selectAcuityTemplate();">Apply</button>
            </div>
        </div>
    </div>
</div>
{{ end }}