{% load i18n %}

<div class="workbench-card-wrapper">
    <div class="workbench-card-sidebar">
        {% block tabs %}
        <div id="toggle-basemap-panel-button" class="workbench-card-sidebar-tab" tabindex="0" role="button" aria-controls="side-panel" 
            data-bind="onEnterkeyClick, onSpaceClick, click: function() {
                toggleTab('basemap');
                $root.handleEscKey(event.currentTarget, '#side-panel');
            }, css: {
                'active': activeTab() === 'basemap'
            }, attr: {
                'aria-label': $root.translations.basemapFilter, 
                'aria-expanded': (activeTab() === 'basemap').toString(), 
            },
        ">
            <i class="fa fa-globe"></i>
            <span data-bind="text: $root.translations.basemap" class="map-sidebar-text"></span>
        </div>
        <div id="toggle-overlays-panel-button" class="workbench-card-sidebar-tab" tabindex="0" role="button" aria-controls="side-panel" 
            data-bind="onEnterkeyClick, onSpaceClick, click: function() {
                toggleTab('overlays');
                $root.handleEscKey(event.currentTarget, '#side-panel');
            }, css: {
                'active': activeTab() === 'overlays'
            }, attr: {
                'aria-label': $root.translations.overlaysFilter, 
                'aria-expanded': (activeTab() === 'overlays').toString(), 
            },
        ">
            <i class="fa fa-list"></i>
            <span data-bind="text: $root.translations.overlays" class="map-sidebar-text"></span>
        </div>
        <div id="toggle-legend-panel-button" class="workbench-card-sidebar-tab" tabindex="0" role="button" aria-controls="side-panel" 
            data-bind="onEnterkeyClick, onSpaceClick, click: function() {
                toggleTab('legend');
                $root.handleEscKey(event.currentTarget, '#side-panel');
            }, css: {
                'active': activeTab() === 'legend'
            }, attr: {
                'aria-label': $root.translations.legendFilter,
                'aria-expanded': (activeTab() === 'legend').toString(), 
            },
        ">
            <i class="fa fa-list-alt"></i>
            <span data-bind="text: $root.translations.legend" class="map-sidebar-text"></span>
        </div>
        {% endblock tabs %}
    </div>
    <!--ko if: activeTab() -->
        <div id="side-panel" tabindex="-1" class="workbench-card-sidepanel" data-bind="css:{'expanded': expandSidePanel()}">
            {% block sidepanel %}
            <!--ko if: activeTab() === 'basemap' -->
                <div class="workbench-card-sidepanel-header-container">
                    <p class="workbench-card-sidepanel-header h4" tabindex="0" role="button"
                        data-bind="onEnterkeyClick, onSpaceClick, 
                            click: function(){hideSidePanel('#toggle-basemap-panel-button')},
                            attr: {'aria-label': $root.translations.hideBasemaps}
                        "
                    >
                        <span data-bind="text: $root.translations.basemaps" ></span>
                    </p>
                </div>
                <div class="workbench-card-sidepanel-border"></div>

                <div class="workbench-card-sidepanel-body">
                <div class="basemap-listing-container" role="radiogroup">
                <!--ko foreach: basemaps -->
                    <div class="basemap-listing" tabindex="0" role="radio" data-bind="
                        click: $parent.activeBasemap, onEnterkeyClick, onSpaceClick,
                        css: {'active-basemap': $data === $parent.activeBasemap()},
                        attr: {'aria-label': name, 'aria-checked': $data === $parent.activeBasemap()}
                    ">
                        <i data-bind="css: icon" class="layer-listing-icon"></i>
                        <span data-bind="text: name"></span>
                    </div>
                <!--/ko -->
                </div>
                </div>

            <!--/ko -->

            <!--ko if: activeTab() === 'overlays' -->
                <div class="workbench-card-sidepanel-header-container">
                    <p class="workbench-card-sidepanel-header h4" tabindex="0" role="button"
                        data-bind="onEnterkeyClick, onSpaceClick, 
                            click: function(){hideSidePanel('#toggle-overlays-panel-button')},
                            attr: {'aria-label': $root.translations.hideOverlays}
                        "
                    >
                        <span data-bind="text: $root.translations.overlays" ></span>
                    </p>
                </div>
                <div class="workbench-card-sidepanel-border"></div>
                <div class="workbench-card-sidepanel-body">
                <div class="overlays-listing-container" data-bind="sortable: {
                    data: overlays
                }">
                    <div class="overlay-listing" data-bind="css: {'active-overlay': onMap}">
                        <div class="overlay-name" tabindex="0" role="switch" data-bind="
                            click: function() {
                                onMap(!onMap());
                                updateParent($parent);
                            }, onEnterkeyClick, onSpaceClick,
                            attr: {
                                'aria-label': name, 
                                'aria-checked': onMap().toString(),
                            },
                        ">
                            <i data-bind="css: icon" class="layer-listing-icon"></i>
                            <span data-bind="text: name"></span>
                        </div>
                        <div class="relative">
                            <div class="overlay-opacity-control">
                                <i class="fa fa-adjust"></i>
                                <div class="overlay-opacity-slider">
                                    <input type="range" min="0" max="100" step="1"
                                        data-bind="value: opacity, valueUpdate: 'input',
                                            attr: {'aria-label': $root.translations.layerOpacity(name)},
                                    ">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            <!--/ko -->

            <!--ko if: activeTab() === 'legend' -->
                <div class="workbench-card-sidepanel-header-container">
                    <p class="workbench-card-sidepanel-header h4" tabindex="0" role="button"
                        data-bind="onEnterkeyClick, onSpaceClick, 
                            click: function(){hideSidePanel('#toggle-legend-panel-button')},
                            attr: {'aria-label': $root.translations.hideLegend}
                        "
                    >
                        <span data-bind="text: $root.translations.legend" ></span>
                    </p>
                </div>
                <div class="workbench-card-sidepanel-border"></div>
                <div class="workbench-card-sidepanel-body">
                <div class="legend-listing-container" data-bind="sortable: {
                    data: overlays
                }">
                    <div class="legend-listing" data-bind="css: {'hidden': !onMap()}">
                        <div class="legend-name">
                            <i data-bind="css: icon" class="layer-listing-icon"></i>
                            <span data-bind="text: name"></span>
                        </div>
                        <!--ko if: legend -->
                        <div class="legend-content" data-bind="html: legend"></div>
                        <!--/ko -->
                    </div>
                </div>
                </div>
            <!--/ko -->
            {% endblock sidepanel %}
        </div>
    <!--/ko -->
    <div class="workbench-card-container map-container" data-bind="mapboxgl: {
            mapOptions: mapOptions,
            afterRender: setupMap
        }">
    </div>
</div>
