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

<script>
    function openTemplateDeleteDialog(templateId, templateName) {
        $("#removeTemplateModalMessage").html("Are you sure you want to delete the " + templateName + " Template?");
        $("#removeTemplateButton").attr("onclick","deleteTemplate(" + templateId + ")");
        displayDialog('removeTemplateModal');
    }

    document.addEventListener('DOMContentLoaded', function () {
        addTemplateSelectorWSDBListener();
    });

    function addTemplateSelectorWSDBListener() {
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            const msg = JSON.parse(event.data);
            switch (msg.table) {
                case TEMPLATE_MAPPINGS_TABLE:
                case CONFIGURATION_TABLE:
                    refreshTemplateList(msg.operation, msg.rowIds);
                    break;
            }
        };
        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };
        socket.onclose = function (event) {
            console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
            setTimeout(function() {
                addTemplateSelectorWSDBListener();
            }, 1000);
        };
    }

    function getHideSlotsAndPortsButtonId () {
        return "hidePortsAndSlotsBtn";
    }

    function getHideSlotsAndPortsButtonState () {
        let element = $("#" + getHideSlotsAndPortsButtonId());
        if (element) {
            return element.prop("checked");
        }
        return false;
    }

    function clickHideSlotsAndPorts(direction) {
        const buttonState = getHideSlotsAndPortsButtonState();
        const slotsButtonArea = ".drawer-slots";
        const portsButtonArea = ".drawer-ports-edit";
        const channelsButtonArea = ".drawer-channels";

        if (buttonState) {
            // Deselect all Slots selected
            $("input[type=radio][name='slots']").prop("checked", false);
            sessionStorage.removeItem(sessionStorageKeys.SLOT);
            sessionStorage.removeItem(sessionStorageKeys.PORT);
            sessionStorage.removeItem(sessionStorageKeys.CHANNEL);

            $(slotsButtonArea).css("display", "none");
            $(portsButtonArea).css("display", "none");
            $(channelsButtonArea).css("height", "calc(85% - 36px)");

            const devId = sessionStorage.getItem(sessionStorageKeys.DEVICE);
            if (devId) {
                updateChannelList(devId, "", "", direction);
            }
        } else {
            $(slotsButtonArea).css("display", "");
            $(portsButtonArea).css("display", "");
            $(channelsButtonArea).css("height", "40%");

            // When we want to show ports and channels, we have to wait until all operations related to actually clicking the first slot button
            // and after all operations are complete, we can reselect the first option in the newly repopulated Ports list which will then repopulate
            // the Channels list
            const portReselectionAction = new Promise((resolve, reject) => {
                selectFirstNonSlot0Button();
                resolve();
            });
            portReselectionAction.then(() => {
                portGridOptions.api.deselectAll();
                portGridOptions.api.forEachNode((node) => {
                    if (node.rowIndex == 0) {
                        node.setSelected(true, true);
                    }
                });
            });
        }
    }

    function showHideSlotsAndPortsWidgets(hide) {
        const buttonId = getHideSlotsAndPortsButtonId();
        const hideSlotsAndPortsCheckbox = $("#" + buttonId);
        const isChecked = hideSlotsAndPortsCheckbox.prop("checked");
        if (hide && isChecked) {
            // Uncheck the option when it is not going to be displayed
            hideSlotsAndPortsCheckbox.click();
        }
        $(".hideSlotsAndPortWidgets").css("display", (hide) ? "none" : "");
    }
</script>

<nav class="navbar navbar-expand" id="templatetoolbar" style="height: 100%;">
    <div class="container-fluid" id="templateToggler">
        <ul class="navbar-nav me-auto" >
            <li class="nav-item dropdown templateSelectorElement">
                <span class="btn btn-nav-icon-text" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="icon-template"></i>Templates</span>
                <ul class="dropdown-menu">
                    <!-- TODO: remove template selected name and display None in the read-only label when the none option below is selected -->
                    <li class="dropdown-item template-dropdown-item">
                        <span class="btn-item-text template-label" role="button" onclick="selectTemplate(-1, 'None');">None</span>
                    </li>
                    <li><hr class="dropdown-item-divider" /></li>
                    <li class="dropdown-item template-dropdown-item">
                        <span class="btn-item-text template-label" role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#newTemplateModal" onclick="displayTemplate(0, null, false);">New template ...</span>
                        <div class="dropdown-item-icons-spacer">
                            <!-- This is left empty for now as it is used to be a spacer for the icons in subsequent list items -->
                        </div>
                    </li>
                    <li><div class="dropdown-section-divider"></div></li>
                    {{ if ne .Platform "NRG" }}
                    {{ if gt .MixerPorts 0 }}
                    <li><hr class="dropdown-item-divider" /></li>
                    <li class="dropdown-item template-dropdown-item" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#audioMixerModal" onclick="showAudioMixerModal()">
                        <span class="btn-item-text template-label" role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#audioMixerModal" onclick="showAudioMixerModal()">Audio mixer</span>
                        <div class="dropdown-item-icons">
                            <span role="button" onclick=""><i class="icon-plain icon-wizard" ></i></span>
                        </div>
                    </li>
                    {{ end }}
                    <li><hr class="dropdown-item-divider" /></li>
                    <li class="dropdown-item template-dropdown-item" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#audioMixerModal" id="madiTemplateListItem" onclick="showMADIModal()">
                        <span class="btn-item-text template-label" role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#audioMixerModal" id="madiTemplateLabel" onclick="showMADIModal()">
                            {{if eq .PageType "source" }}
                            {{ range .Templates }}
                            {{ if and (eq .Id 1) (eq .Name "SDI") (not $.ImpliedMode) }}SDI + {{end}}{{end}}{{end}}MADI
                        </span>
                        <div class="dropdown-item-icons">
                            <span role="button" onclick=""><i class="icon-plain icon-wizard" ></i></span>
                        </div>
                    </li>
                    <li><hr class="dropdown-item-divider" /></li>
                    <li class="dropdown-item template-dropdown-item" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#audioMixerModal" onclick="showIpSdiModal()">
                        <span class="btn-item-text template-label" role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#audioMixerModal" id="ipSdiTemplateLabel" onclick="showIpSdiModal()">IP + SDI</span>
                        <div class="dropdown-item-icons">
                            <span role="button" onclick=""><i class="icon-plain icon-wizard" ></i></span>
                        </div>
                    </li>
                    <li><hr class="dropdown-item-divider" /></li>
                    <li class="dropdown-item template-dropdown-item" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#singleLevelModal">
                        <span class="btn-item-text template-label" role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#singleLevelModal">Single level</span>
                        <div class="dropdown-item-icons">
                            <span role="button" onclick=""><i class="icon-wizard" ></i></span>
                        </div>
                    </li>
                    <li><hr class="dropdown-item-divider" /></li>
                    <li class="dropdown-item template-dropdown-item" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#acuityModal">
                        <span class="btn-item-text template-label" role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#acuityModal">Acuity</span>
                        <div class="dropdown-item-icons">
                            <span role="button" onclick=""><i class="icon-wizard" ></i></span>
                        </div>
                    </li>
                    <li><div class="dropdown-section-divider"></div></li>
                    {{ end }}
                    {{ $pageType := .PageType }}
                    {{ $sdiTemplateId := 1 }}
                    {{ $mvPipTemplateId := 2 }}
                    {{ $mvHeadTemplateId := 3 }}
                    {{ $mvLayoutTemplateId := 4 }}
                    {{ $ipTemplateId := 5 }}
                    {{ $ipSdiTemplateId := 6 }}
                    {{ $disconnectTemplateId := 7 }}
                    {{ $passthroughTemplateId := 8 }}
                    {{ $ndiTemplateId := 9 }}
                    {{ $firstCustomTemplateId := 10 }}
                    {{ range .Templates }}
                    {{ if lt .Id $firstCustomTemplateId }}
                    {{ if ne .Id $ipSdiTemplateId }}
                    {{ if or (and (eq $pageType "source") (ne .Id $mvPipTemplateId) (ne .Id $mvHeadTemplateId)) (and (eq $pageType "destination") (ne .Id $mvLayoutTemplateId) (ne .Id $disconnectTemplateId) (ne .Id $passthroughTemplateId)) }}
                    <li><hr class="dropdown-item-divider" /></li>
                    <li class="dropdown-item template-dropdown-item">
                        <span class="btn-item-text template-label" role="button" onclick="selectTemplate({{ .Id }}, {{ .Name }});">{{ .Name }}</span>
                        <div class="dropdown-item-icons">
                            <!-- TODO: display template with checkboxes in read only mode when the view icon below is selected-->
                            <span role="button" id="templateWarningIcon{{ .Id }}"><i class="icon-alarm-warning" style="display:{{ if .Empty }}inline{{ else }}none{{ end }};"></i></span>
                            <span role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#newTemplateModal" onclick="displayTemplate({{ .Id }}, {{ .Name }}, false);"><i class="icon-plain icon-edit"></i></span>
                            <span role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#newTemplateModal" onclick="displayTemplate({{ .Id }}, {{ .Name }}, true);"><i class="icon-plain icon-duplicate" ></i></span>
                            <span role="button" onclick="openTemplateDeleteDialog({{ .Id }}, {{ .Name }});"><i class="icon-plain icon-delete" ></i></span>
                        </div>
                    </li>
                    {{ end }}
                    {{ end }}
                    {{ end }}
                    {{ end }}
                    <li><div class="dropdown-section-divider"></div></li>
                    {{ range .Templates }}
                    {{ if gt .Id $ndiTemplateId }}
                    <li><hr class="dropdown-item-divider" /></li>
                    <li class="dropdown-item template-dropdown-item">
                        <span class="btn-item-text template-label" role="button" onclick="selectTemplate({{ .Id }}, {{ .Name }});">{{ .Name }}</span>
                        <div class="dropdown-item-icons">
                            <span role="button" id="templateWarningIcon{{ .Id }}"><i class="icon-alarm-warning" style="display:{{ if .Empty }}inline{{ else }}none{{ end }};"></i></span>
                            <span role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#newTemplateModal" onclick="displayTemplate({{ .Id }}, {{ .Name }}, false);"><i class="icon-plain icon-edit"></i></span>
                            <span role="button" data-bs-toggle="modal" data-bs-dismiss="offcanvas" data-bs-target="#newTemplateModal" onclick="displayTemplate({{ .Id }}, {{ .Name }}, true);"><i class="icon-plain icon-duplicate"></i></span>
                            <span role="button" onclick="openTemplateDeleteDialog({{ .Id }}, {{ .Name }});"><i class="icon-plain icon-delete" ></i></span>
                        </div>
                    </li>
                    {{ end }}
                    {{ end }}
                </ul>               
            </li>
            <li class="templateSelectorElement">
                <input type="text" class="form-control rounded-0 template-name read-only" id="selectedTemplate" placeholder="None" readonly/>
                <input type="hidden" class="form-control rounded-0 template-name read-only" id="selectedTemplateId" value="-1"/>
            </li>
            <li class="templateSelectorElement">
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <p class="container-data-after-title">Ports:</p>
            </li>
            <li>
                <span onclick="portGridOptions.api.selectAllFiltered();" class="btn btn-nav-icon"><i class="icon-select-rows icon-btn"></i></span>
            </li>
            <li>
                <span onclick="portGridOptions.api.deselectAllFiltered();" class="btn btn-nav-icon"><i class="icon-deselect-rows icon-btn"></i></span>
            </li>
            <li class="channelButtons">
                <span><i class="icon-separator"></i></span>
            </li>
            <li class="channelButtons">
                <p class="container-data-after-title">Channels:</p>
            </li>
            <li class="channelButtons">
                <span onclick="channelGridOptions.api.selectAllFiltered();" class="btn btn-nav-icon"><i class="icon-select-rows icon-btn"></i></span>
            </li>
            <li class="channelButtons">
                <span onclick="channelGridOptions.api.deselectAllFiltered();" class="btn btn-nav-icon"><i class="icon-deselect-rows icon-btn"></i></span>
            </li>
            <li id="hidePortsAndSlotsSeparator" class="hideSlotsAndPortWidgets">
                <span><i class="icon-separator"></i></span>
            </li>
            <li id="hidePortsAndSlotsTitle" class="hideSlotsAndPortWidgets">
                <p class="container-data-after-title">Hide Slots &amp; Ports:</p>
            </li>
            <li id="hidePortsAndSlotsBtnItem" class="hideSlotsAndPortWidgets">
                {{ if eq .PageType "source" }}
                    <input type="checkbox" class="btn-check" id="hidePortsAndSlotsBtn" value="false" onclick="clickHideSlotsAndPorts('in');">
                {{ else if eq .PageType "destination" }}
                    <input type="checkbox" class="btn-check" id="hidePortsAndSlotsBtn" value="false" onclick="clickHideSlotsAndPorts('out');">
                {{ end }}

                <label class="btn btn-nav-icon" for="hidePortsAndSlotsBtn"><i class="icon-view icon-btn"></i></label>
            </li>
        </ul>
    </div>
</nav>

<div class="modal" id="removeTemplateModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeTemplateModalLabel" 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="removeTemplateModalLabel"><i class="icon-delete icon-white"></i>Delete Template</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal" onclick="hideDialog('removeTemplateModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data" id="removeTemplateModalMessage">Are you sure you want to delete the selected template?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal" tabindex="1" onclick="hideDialog('removeTemplateModal');">Cancel</button>
                <!-- The onclick behaviour of the following button gets rewritten in the openTemplateDeleteDialog function -->
                <button class="btn btn-text" id="removeTemplateButton" tabindex="0" onclick="alert('removing template');">Apply</button>
            </div>
        </div>
    </div>
</div>

{{ end }}