{% extends "views/components/workbench.htm" %}
{% load static %}
{% load i18n %}

{% 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 class="map-sidebar-text">{% trans "Image" %}</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 class="map-sidebar-text">{% trans "Overlays" %}</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="click: hideSidePanel">{% trans "Image Tools" %}</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>Panel Layout</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"> Single Panel
            </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"> Double Panel
            </div>
        </div>

        <div class="panel-selector">
            Selected Panel Layout
            <div class="selector">
                <div data-bind="css: { selected: selectPrimaryPanel() }">
                    <div data-bind="click: function(){selectPrimaryPanel(true)}" class="primary" >Panel 1</div>
                </div>
                <div data-bind="css: { selected: !selectPrimaryPanel() }, if: compareMode()">
                    <div class="secondary" data-bind="click: function(){selectPrimaryPanel(false)}">Panel 2</div>
                </div>
            </div>
        </div>
    </div>

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

    <div class="iiif-image-tool-slider">
        <div class="iiif-image-tool-label">
            <i class="fa fa-lightbulb-o"></i>
            {% trans "Brightness" %}
        </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>
            {% trans "Contrast" %}
        </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>
            {% trans "Saturation" %}
        </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>
            {% trans "Greyscale" %}
        </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()); }">{% trans "Display as greyscale" %}</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">{% trans 'Reset to defaults' %}</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">
        {% trans "Annotation Overlays" %}
    </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="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>
<!--/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">
                <input class="form-control input-lg widget-input"
                    data-bind="value: canvas(),
                    select2Query: {
                        select2Config: leftSideSelectConfig
                    }">
            </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;">
                <input class="form-control input-lg widget-input"
                    data-bind="value: secondaryCanvas(),
                    select2Query: {
                        select2Config: rightSideSelectConfig
                    }">
            </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>
                {% trans "Brightness" %}
            </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>
                {% trans "Contrast" %}
            </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>
                {% trans "Saturation" %}
            </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>
                {% trans "Greyscale" %}
            </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()); }">{% trans "Display as greyscale" %}</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="show-gallery-control" data-bind="click: toggleGallery, css: {
        'gallery-visible': showGallery,
        'gallery-expanded': expandGallery,
    }">
    <h3>{% trans "Show Gallery" %}</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>{% trans "Hide Gallery" %}</span>
            </div>
            <div data-bind="if: showModeSelector"  class="mode-selector">
                <div>Panels</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() }">{% trans "Panel 1" %}</div>
                    <div data-bind="click: function(){selectPrimaryPanel(false)}, css: { selected: !selectPrimaryPanel(), hide: !compareMode() }">{% trans "Panel 2" %}</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="text: 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">
                {% trans "Select a manifest:" %}
            </div>
            <div class="manifest-editor-input">
                <input class="form-control input-lg widget-input"
                    data-bind="value: manifest,
                    select2Query: {
                        select2Config: manifestSelectConfig
                    }">
            </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() }
                ">{% trans 'Load manifest' %}</button>
                <!--ko if: manifestData() -->
                <button class="btn btn-shim btn-danger btn-labeled btn-lg fa fa-refresh" data-bind="click: toggleManifestEditor">{% trans 'Cancel' %}</button>
                <!--/ko -->
                <!--ko if: manifestLoading() -->
                <span class="manifest-editor-loading">
                    {% trans "Loading manifest..." %}
                </span>
                <!--/ko -->
                <!--ko if: manifestError() -->
                <span data-bind="text: console.log(manifestError())"></span>
                <span class="manifest-editor-error">
                    {% trans "Error loading manifest..." %}
                </span>
                <!--/ko -->
            </div>
        </div>


        <!--/ko -->
        <!--ko if: !editManifest() -->
            <!--ko if: manifestLoading() -->
            <span class="manifest-editor-loading">
                {% trans "Loading manifest..." %}
            </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() : '{% trans "No manifest selected..." %}'"></span>
                            <div class="list-filter" data-bind="">
                                <input class="iiif-canvas-filter" type="text" class="form-control" style="width: 100%;" placeholder="{% trans 'Filter images...' %}" data-bind="textInput: filter">

                                <!-- Clear Search -->
                                <span class="iiif-clear-search clear-node-search" data-bind="visible: filter().length > 0, click: function() { filter(''); }"><i class="fa fa-times-circle iiif-clear-filter"></i></span>
                            </div>
                        </div>
                        <div>
                            <span class="iiif-gallery-sequence-label" data-bind="click: function(){expandGallery(!expandGallery())}">
                                <!-- ko if: !expandGallery() -->
                                {% trans "Info" %}
                                <!-- /ko -->
                                <!-- ko if: expandGallery() -->
                                {% trans "Close" %}
                                <!-- /ko -->
                            </span>
                        </div>
                        <div>
                            <span class="iiif-gallery-sequence-label" data-bind="click: toggleManifestEditor">
                                {% trans "Switch Image Service" %}
                            </span>
                        </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 || '{% 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> {% trans "Annotation(s)" %}
                                        <!--/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 %}
