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

<div class="drawer splitBorder" id="offcanvasScrolling">
    <div class="drawer-wrapper" style="display: flex">

        <div class="col">
            <div id="templates">
                {{ template "templateSelector" . }}
            </div>

            <div class="drawer-devices">
                <nav class="navbar navbar-ch">
                    <div class="container-data-after-title">Devices</div>
                    <form class="d-flex">
                        <input id="devicesFilter" class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" onkeydown="return event.keyCode != enterKeyCode;" oninput="onDevicesFilterTextBoxChanged();">
                        <span><i class="icon-plain icon-filter"></i></span>
                    </form>
                </nav>
                <div class="dev-list btn-dev-list" role="group" id="devices">
                    {{ template "deviceFilter" . }}
                </div>
            </div>

            <div class="drawer-slots">
                <nav class="navbar navbar-ch">
                    <div class="container-data-after-title">Slots</div>
                    <form class="d-flex">
                        <input id="slotsFilter" class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" onkeydown="return event.keyCode != enterKeyCode;" oninput="onSlotsFilterTextBoxChanged();">
                        <span><i class="icon-plain icon-filter"></i></span>
                    </form>
                </nav>
                <div class="slot-list btn-slot-list" role="group" id="slots">
                    {{ template "slotsFilter" . }}
                </div>
            </div>

            <div class="drawer-ports" id="portsDrawer">
                <div class="port-list grid-wrapper-ports" role="group" id="ports">
                    <div id="portGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
                </div>
            </div>

            <div class="drawer-channels" id="channelsDrawer">
                <div class="ch-list grid-wrapper-channels" role="group" id="channels">
                    <div id="channelGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
                </div>
            </div>
        </div >
    </div>
    <div class="modal-footer panel-footer drawer-modal-footer-size justify-content-between">
        <button onclick="cancelChannelMappingOptions();" class="btn btn-text btn-outline-secondary btn-close-canvas">Cancel</button>
        <button class="btn btn-text" id="fillButton" onclick="handleFillCheck(false);">Fill {{ if eq .PageType "source" }} Sources {{ else }} Destinations {{ end }}</button>
    </div>
</div>
{{ end }}