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

<div class="modal" id="slotsSelectionModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="slotsSelectionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-map-template-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="slotsSelectionModalLabel"><i class="icon-add icon-white"></i>Add Slots & Name {{ if eq .PageType "source"}}Source{{ else }}Destination{{ end }}s</span>
                <span class="btn btn-transparent" onclick="hideDialog('slotsSelectionModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data container-data-add-slots">
                    <table>
                        <tr class="row-data">
                            <td class="col-data-label">{{ if eq .PageType "source"}}Source{{ else }}Destination{{ end }} Prefix:</td>
                            <td class="col-data-input"><input class="form-control rounded-0 prefix-size" tabindex="0" name="firstLogicalEndPrefix" id="firstLogicalEndPrefix" oninput="updateStartCountFromPrefix('slotsSelection')" value="{{ if eq .PageType "source"}}SRC{{ else }}DST{{ end }} " /></td>                        </tr>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label">Start Count:</td>
                            <td class="col-data-input"><span class="number-wrapper"><input type="number" class="form-control rounded-0 start-count-size" tabindex="1" name="firstStartCount" id="firstStartCount" value="1" /></span></td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label">Mapped Slot:</td>
                            <td class="col-data-input"><input class="form-control rounded-0 slot-name-size" id="mappedSlotUiName" tabindex="2" readonly/></td>
                        </tr>
                    </table>
                    <p class="row-text">Please select the additional slots, from the list below, to which you want to apply the same mapping.</p>
                    <table class="container-data-select-slots">
                        <tr class="row-data">
                            <td class="col-data-input"><input class="form-check-input" type="checkbox" id="compatibleSlotOption" tabindex="3" onchange="handleFillCheck(true)"></td>
                            <td class="col-data-checkbox-label">Show Compatible Slots Only</td>
                        </tr>
                    </table>
                    <div class="grid-wrapper-slot-selection" id="slotsSelectionTable">
                        <div id="slotsSelectionGrid" 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" tabindex="5" onclick="hideDialog('slotsSelectionModal')">Cancel</button>
                <button class="btn btn-text" tabindex="4" onclick="fillWithSlotSelection()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="nameModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="nameModalLabel" 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="nameModalLabel"><i class="icon-add icon-white"></i>Name {{ .PageType }}s</span>
                <span class="btn btn-transparent" onclick="hideDialog('nameModal');"><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">{{ if eq .PageType "source"}}Source{{ else }}Destination{{ end }} prefix</td>
                        <td class="col-data-input"><input class="form-control rounded-0 prefix-size" tabindex="0" name="firstNameLogicalEndPrefix" id="firstNameLogicalEndPrefix" oninput="updateStartCountFromPrefix('name')" value="{{ if eq .PageType "source"}}SRC{{ else }}DST{{ end }} " /></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Start count</td>
                        <td class="col-data-input"><span class="number-wrapper"><input type="number" class="form-control rounded-0 start-count-size" tabindex="1" name="firstNameStartCount" id="firstNameStartCount" value="1"/></span></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="3" onclick="hideDialog('nameModal');">Cancel</button>
                <button  class="btn btn-text" data-bs-dismiss="modal" tabindex="2" onclick="setLogicalEndNameAndFill()">Apply</button>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/slotsSelectionCheckboxRenderer.js"></script>
<script type="text/javascript" charset="utf-8">
    let slotsSelectionColumnDefs = [
        {field: "Name", headerName: "Slots", width: 255},
        {field: "Id", hide: true},
        {field: "BoardType", hide: true},
        {field: "Include", editable: false, width: 80, filter: false, cellRenderer: SlotsSelectionCheckboxRenderer},
    ]

    let slotsSelectionGridOptions = {
        defaultColDef: {
            resizable: false,
        },
        columnDefs: slotsSelectionColumnDefs,
        suppressMenuHide: true,
        headerHeight: 36,
        rowHeight: 31,
    };

    function fillWithSlotSelection() {
        let selectedSlotIds = [];
        let slotId = sessionStorage.getItem('slotId');
        selectedSlotIds.push(slotId);
        slotsSelectionGridOptions.api.forEachNode((node) => {
            if (node.data.Include && node.data.Id != -1) {
                selectedSlotIds.push(node.data.Id);
            }
        });
        sessionStorage.setItem('fillSlotIds', JSON.stringify(selectedSlotIds));
        let errorList = setFirstLogicalEnd("slotsSelection");
        if (errorList.length != 0) {
            displayErrorDialog(showErrorsFromList(errorList));
            return;
        }
        handleFill("slotsSelectionModal");
    }
</script>
{{ end }}