{% extends "views/components/workbench.htm" %}
{% load static %}
{% load template_tags %}
{% load i18n %}
{% load webpack_static from webpack_loader %}

{% block tabs %}
<div class="workbench-card-sidebar-tab" data-bind="click: function() {
    toggleTab('imageTools');
}, css: {
    'active': activeTab() === 'imageTools',
    'disabled': !canvas() || expandGallery()
}">
    <i class="fa fa-image"></i>
    <span data-bind="text: $root.translations.image" class="map-sidebar-text"></span>
</div>
<div class="workbench-card-sidebar-tab" data-bind="click: function() {
    toggleTab('annotations');
}, css: {
    'active': activeTab() === 'annotations',
    'disabled': !canvas() || expandGallery()
}">
    <i class="fa fa-list"></i>
    <span data-bind="text: $root.translations.overlays" class="map-sidebar-text"></span>
</div>
{% endblock tabs %}

{% block sidepanel %}
<!--ko if: activeTab() === 'imageTools' -->
<div class="workbench-card-sidepanel-header-container">
    <h4 
        class="workbench-card-sidepanel-header" 
        data-bind="
            text: $root.translations.imageTools,
            click: hideSidePanel
        "
    ></h4>
</div>
<div class="workbench-card-sidepanel-border"></div>
<div class="workbench-card-sidepanel-body">
<div class="iiif-image-tools">
    <div data-bind="if: showModeSelector" class="layout">
        <div>
            <span data-bind="text: $root.translations.panelLayout"></span>
        </div>
        <div class="mode-selector">
            <div data-bind="click: function(){ compareMode(false); return true; }, css: { selected: !compareMode() }">
                <div class="selector-button"></div>
                <input name="panelGroup" value="single" type="radio" data-bind="checked: panelRadio">
                <span data-bind="text: $root.translations.singlePanel"></span>
            </div>
            <div data-bind="click: function(){ compareMode(true); return true; }, css: { selected: compareMode() }">
                <div>
                    <div class="selector-button"></div>
                    <div class="selector-button"></div>
                </div>
                <input name="panelGroup" value="double" type="radio" data-bind="checked: panelRadio">
                <span data-bind="text: $root.translations.doublePanel"></span>
            </div>
        </div>

        <div class="panel-selector">
            <span data-bind="text: $root.translations.selectedPanelLayout"></span>
            <div class="selector">
                <div data-bind="css: { selected: selectPrimaryPanel() }">
                    <div data-bind="click: function(){selectPrimaryPanel(true)}" class="primary">
                        <span data-bind="text: $root.translations.panelOne"></span>
                    </div>
                </div>
                <div data-bind="css: { selected: !selectPrimaryPanel() }, if: compareMode()">
                    <div class="secondary" data-bind="click: function(){selectPrimaryPanel(false)}">
                        <span data-bind="text: $root.translations.panelTwo"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div data-bind="if: showModeSelector" style="width: 96%; margin: 20px 0px;">
        <select class="form-control input-lg widget-input"
            data-bind="
            select2Query: {
                select2Config: imageToolConfig
            }">
        </select>
    </div>

    <div class="iiif-image-tool-slider">
        <div class="iiif-image-tool-label">
            <i class="fa fa-lightbulb-o"></i>
            <span data-bind="text: $root.translations.brightness"></span>
        </div>
        <div class="iiif-image-tool-slider-wrap">
            <input type="range" min="0" max="200" step="1" data-bind="value: brightness, valueUpdate: 'input'">
        </div>
        <div class="iiif-image-tool-value">
            <span data-bind="text: brightness"></span>%
        </div>
    </div>
    <div class="iiif-image-tool-slider">
        <div class="iiif-image-tool-label">
            <i class="fa fa-adjust"></i>
            <span data-bind="text: $root.translations.contrast"></span>
        </div>
        <div class="iiif-image-tool-slider-wrap">
            <input type="range" min="0" max="200" step="1" data-bind="value: contrast, valueUpdate: 'input'">
        </div>
        <div class="iiif-image-tool-value">
            <span data-bind="text: contrast"></span>%
        </div>
    </div>
    <div class="iiif-image-tool-slider">
        <div class="iiif-image-tool-label">
            <i class="fa fa-eyedropper"></i>
            <span data-bind="text: $root.translations.saturation"></span>
        </div>
        <div class="iiif-image-tool-slider-wrap">
            <input type="range" min="0" max="200" step="1" data-bind="value: saturation, valueUpdate: 'input'">
        </div>
        <div class="iiif-image-tool-value">
            <span data-bind="text: saturation"></span>%
        </div>
    </div>
    <div class="iiif-image-tool-slider">
        <div class="iiif-image-tool-label">
            <i class="fa fa-image"></i>
            <span data-bind="text: $root.translations.greyscale"></span>
        </div>
        <div class="toggle-container">
            <span class="switch switch-small switch-widget" data-bind="css: {'on': greyscale()}, click: function() { greyscale(!greyscale()); }"><small></small></span>
            <div style="display:flex; flex-direction:row;">
                <div class="arches-toggle-sm" data-bind="click: function() { greyscale(!greyscale()); }">
                    <span data-bind="text: $root.translations.displayAsGreyscale"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="install-buttons">
        <button class="btn btn-shim btn-danger btn-labeled btn-lg fa fa-refresh" data-bind="click: resetImageSettings">
            <span data-bind="text: $root.translations.resetToDefaults"></span>
        </button>
    </div>
</div>
</div>
<!--/ko -->
<!--ko if: activeTab() === 'annotations' -->
<div class="workbench-card-sidepanel-header-container">
    <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">
        <span data-bind="text: $root.translations.annotationOverlays"></span>
    </h4>
</div>
<div class="workbench-card-sidepanel-border"></div>
<div class="workbench-card-sidepanel-body">
<div class="overlays-listing-container" data-bind="sortable: {
    data: annotationNodes
}">
    <div class="overlay-listing" data-bind="css: {'active-overlay': active}">
        <div class="overlay-name" data-bind="
            click: function() {
                active(!active());
            }
        ">
            <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'">
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--/ko -->
{% endblock sidepanel %}

{% block content_management %}
<!-- ko foreach: { data: [$data], as: 'self' } -->
<!--ko if: ko.unwrap(self.mainMenu) -->
{% block main_menu %}
{% endblock main_menu %}
<!--/ko-->
<!--ko if: !ko.unwrap(self.mainMenu) -->
<div class="workbench-card-container" data-bind="css: {
        'gallery-visible': showGallery,
        'gallery-expanded': expandGallery
    }">

    <div class="iiif-leaflet" data-bind="leaflet: leafletConfig">
        <div class="split-controls left" data-bind="if: secondaryCanvas">
            <div style="width: 200px">
                <select class="form-control input-lg widget-input"
                    data-bind="
                    select2Query: {
                        select2Config: leftSideSelectConfig
                    }">
                </select>
            </div>
            <div class="button" data-bind="click: imagePropertyUpdate.bind($data,'left')">
                <i class="fa fa-picture-o"></i>
            </div>
        </div>
        <div class="split-controls right" data-bind="if: secondaryCanvas">
            <div style="width: 200px;">
                <select class="form-control input-lg widget-input"
                    data-bind="
                    select2Query: {
                        select2Config: rightSideSelectConfig
                    }">
                </select>
            </div>
            <div class="button" data-bind="click: imagePropertyUpdate.bind($data,'right')">
                <i class="fa fa-picture-o"></i>
            </div>
        </div>
    </div>
    <div class="image-tools-floating" data-bind="style: {display: showImageModifiers() ? 'inherit': 'none'}, css: {left: floatingLocation() == 'left', right: floatingLocation() == 'right', sidepanel: activeTab()}">
        <div class="iiif-image-tool-slider">
            <div class="iiif-image-tool-label">
                <i class="fa fa-lightbulb-o"></i>
                <span data-bind="text: $root.translations.brightness"></span>
            </div>
            <div class="iiif-image-tool-slider-wrap">
                <input type="range" min="0" max="200" step="1" data-bind="value: brightness, valueUpdate: 'input'">
            </div>
            <div class="iiif-image-tool-value">
                <span data-bind="text: brightness"></span>%
            </div>
        </div>
        <div class="iiif-image-tool-slider">
            <div class="iiif-image-tool-label">
                <i class="fa fa-adjust"></i>
                <span data-bind="text: $root.translations.contrast"></span>
            </div>
            <div class="iiif-image-tool-slider-wrap">
                <input type="range" min="0" max="200" step="1" data-bind="value: contrast, valueUpdate: 'input'">
            </div>
            <div class="iiif-image-tool-value">
                <span data-bind="text: contrast"></span>%
            </div>
        </div>
        <div class="iiif-image-tool-slider">
            <div class="iiif-image-tool-label">
                <i class="fa fa-eyedropper"></i>
                <span data-bind="text: $root.translations.saturation"></span>
            </div>
            <div class="iiif-image-tool-slider-wrap">
                <input type="range" min="0" max="200" step="1" data-bind="value: saturation, valueUpdate: 'input'">
            </div>
            <div class="iiif-image-tool-value">
                <span data-bind="text: saturation"></span>%
            </div>
        </div>
        <div class="iiif-image-tool-slider">
            <div class="iiif-image-tool-label">
                <i class="fa fa-image"></i>
                <span data-bind="text: $root.translations.greyscale"></span>
            </div>
            <div class="toggle-container">
                <span class="switch switch-small switch-widget" data-bind="css: {'on': greyscale()}, click: function() { greyscale(!greyscale()); }"><small></small></span>
                <div style="display:flex; flex-direction:row;">
                    <div class="arches-toggle-sm" data-bind="click: function() { greyscale(!greyscale()); }">
                        <span data-bind="text: $root.translations.displayAsGreyscale"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="show-gallery-control" data-bind="click: toggleGallery, css: {
        'gallery-visible': showGallery,
        'gallery-expanded': expandGallery,
    }">
    <h3>
        <span data-bind="text: $root.translations.showGallery"></span>
    </h3>
</div>
<!--ko let: {canvasClick: canvasClick, getCanvasService: getCanvasService, selectedCanvas: selectPrimaryPanel() ? canvas: secondaryCanvas, getAnnotationCount: getAnnotationCount} -->
<div class="iiif-viewer-gallery" data-bind="css: {
        'gallery-expanded': expandGallery
    }">
    <!--ko if: showGallery() -->
    <div class="iiif-gallery-content">

        <!--ko if: manifestData() -->
        <div class="panel-controls">
            <div class="hide-gallery-control" data-bind="click: toggleGallery">
                <span data-bind="text: $root.translations.hideGallery"></span>
            </div>
            <div data-bind="if: showModeSelector"  class="mode-selector">
                <div>
                    <span data-bind="text: $root.translations.panels"></span>
                </div>
                <div class="mode-selector-buttons" >
                    <div class="single-panel" data-bind="click: function(){compareMode(false)}, css: {selected: !compareMode()}">
                        <div></div>
                    </div>
                    <div class="two-panel" data-bind="click: function(){compareMode(true)}, css: {selected: compareMode()}">
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div class="panel-selector-buttons">
                    <div data-bind="click: function(){selectPrimaryPanel(true)}, css: { selected: selectPrimaryPanel() }">
                        <span data-bind="text: $root.translations.panelOne"></span>
                    </div>
                    <div data-bind="click: function(){selectPrimaryPanel(false)}, css: { selected: !selectPrimaryPanel(), hide: !compareMode() }">
                        <span data-bind="text: $root.translations.panelTwo"></span>
                    </div>
                </div>
            </div>
        </div>
        <!--/ko -->
        <!--ko if: expandGallery() && manifestData() -->
        <div class="manifest-details">
            <h3>
                <span data-bind="text: manifestName"></span>
            </h3>

            <h4>
                <span data-bind="html: manifestDescription"></span>
            </h4>

            <div class="manifest-details-list" data-bind="foreach: manifestMetadata">
                <dt class="manifest-metadata-title" data-bind="text: label"></dt>
                <!--ko foreach: Array.isArray(value) ? value : [value] -->
                <dd class="manifest-metadata-value" data-bind="html: $data"></dd>
                <!--/ko -->
            </div>
            <h4 class="manifest-attribution-key" data-bind="html: manifestAttribution"></h4>
            <!-- ko if: showLogo -->
            <img class="manifest-logo" data-bind="attr: {src: manifestLogo()}">
            <!-- /ko -->
        </div>
        <!--/ko -->

        <!--ko if: editManifest() -->
        <div class="manifest-editor">
            <div class="manifest-editor-label">
                <span data-bind="text: $root.translations.selectAManifest + ':'"></span>
            </div>
            <div class="manifest-editor-input">
                <select class="form-control input-lg widget-input"
                    data-bind="select2Query: {
                        select2Config: manifestSelectConfig
                    }">
                </select>
            </div>

            <div class="install-buttons">
                <button class="btn btn-shim btn-mint btn-labeled btn-lg fa fa-pencil" data-bind="click: getManifestData,
                    disabled: manifestLoading(),
                    css: { 'disabled': manifestLoading() }
                ">
                    <span data-bind="text: $root.translations.loadManifest"></span>
                </button>
                <!--ko if: manifestData() -->
                <button class="btn btn-shim btn-danger btn-labeled btn-lg fa fa-refresh" data-bind="click: toggleManifestEditor">
                    <span data-bind="text: $root.translations.cancel"></span>
                </button>
                <!--/ko -->
                <!--ko if: manifestLoading() -->
                <span 
                    class="manifest-editor-loading"
                    data-bind="text: $root.translations.loadingManifest + '...'"
                ></span>
                <!--/ko -->
                <!--ko if: manifestError() -->
                <span data-bind="text: console.log(manifestError())"></span>
                <span 
                    class="manifest-editor-error"
                    data-bind="text: $root.translations.errorLoadingManifest + '...'"
                ></span>
                <!--/ko -->
            </div>
        </div>


        <!--/ko -->
        <!--ko if: !editManifest() -->
            <!--ko if: manifestLoading() -->
            <span 
                class="manifest-editor-loading"
                data-bind="text: $root.translations.loadingManifest + '...'"
            ></span>
            <!--/ko -->
            <!--ko if: !manifestLoading() -->
            <div class="iiif-gallery-panel" style="overflow-x: auto;">
                <div class="iiif-gallery-header" style="display:flex">
                    <div style="display: flex; align-items: center">
                        {% block gallery_header %}
                        <div>
                            <span class="iiif-gallery-manifest-label" data-bind="text: manifestData() ? manifestName() : $root.translations.noManifestSelected"></span>
                        </div>
                        <div>
                            <span class="iiif-gallery-sequence-label" data-bind="click: function(){expandGallery(!expandGallery())}">
                                <!-- ko if: !expandGallery() -->
                                    <span data-bind="text: $root.translations.info"></span>
                                <!-- /ko -->
                                <!-- ko if: expandGallery() -->
                                    <span data-bind="text: $root.translations.close"></span>
                                <!-- /ko -->
                            </span>
                        </div>
                        <div>
                            <span 
                                class="iiif-gallery-sequence-label" 
                                data-bind="
                                    text: $root.translations.switchImageService,
                                    click: toggleManifestEditor
                                "
                            ></span>
                        </div>
                        <div class="iiif-list-filter">
                            <span data-bind="text: $root.translations.filter"></span>
                            <div class="list-filter">
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    style="width: 100%;" 
                                    data-bind="
                                        textInput: filter,
                                        attr: {placeholder: $root.translations.filterImages + '...'}
                                    "
                                >
                                <!-- Clear Search -->
                                <span class="clear-node-search" data-bind="visible: filter().length > 0, click: function() { filter(''); }"><i class="fa fa-times-circle"></i></span>
                            </div>
                        </div>
                        {% endblock gallery_header %}
                    </div>
                </div>

                <div class="iiif-gallery-sequence">
                    <div class="iiif-gallery-sequence-canvases" data-bind="foreach: canvases">
                        <div style="display: inline-block; ">
                            <div class="iiif-gallery-canvas" data-bind="click: function() {
                                canvasClick($data);
                            },
                            visible: label.toLowerCase().includes(self.filter().toLowerCase()),
                            css: {
                                active: getCanvasService($data) === selectedCanvas(),
                                annotated: getAnnotationCount(getCanvasService($data))
                            }">
                                <div style="text-align:center" class="iiif-gallery-canvas-thumbnail">
                                    <img data-bind="attr: { src: $data.thumbnail || '{% webpack_static 'img/photo_missing.png' %}', title: $data.label}">
                                </div>
                                <div style="text-align:center;" class="iiif-gallery-canvas-label">
                                    <span data-bind="text: label"></span>
                                    <span class="annotation-count">
                                        <!--ko if: getAnnotationCount(getCanvasService($data)) -->
                                        <span data-bind="text: getAnnotationCount(getCanvasService($data))"></span>
                                        <span data-bind="text: $root.translations.annotations"></span>
                                        <!--/ko -->
                                        <!--ko if: !getAnnotationCount(getCanvasService($data)) -->
                                        &nbsp;
                                        <!--/ko -->
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ko -->
        <!--/ko -->
    </div>
    <!--/ko -->
</div>
<!--/ko -->
<!--/ko -->
<!--/ko -->
{% endblock content_management %}
