{% extends "views/components/iiif-viewer.htm" %}
{% load static %}
{% load template_tags %}
{% load i18n %}

{% block tabs %}
<div class="workbench-card-sidebar-tab" data-bind="click: function() {
    toggleTab('manifest');
}, css: {
    'active': activeTab() === 'manifest',
    'disabled': mainMenu() || remoteManifest()
}">
    <i class="fa fa-tags"></i>
    <span ></span>
    <span class="map-sidebar-text" data-bind="text: $root.translations.service"></span>
</div>
<div class="workbench-card-sidebar-tab" data-bind="click: function() {
    toggleTab('canvas');
}, css: {'active': activeTab() === 'canvas', 'disabled': !canvas() || remoteManifest()
}">
    <i class="fa fa-cloud-upload"></i>
    <span class="map-sidebar-text" data-bind="text: $root.translations.canvas"></span>
</div>
{{ block.super }}
{% endblock tabs %}

{% block sidepanel %}
<!--ko foreach: { data: [$data], as: 'self' }-->
<!--ko if: activeTab() === 'manifest'-->
<div class="workbench-card-sidepanel-header-container">
    <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">
        <span data-bind="text: $root.translations.manageImageService"></span>
    </h4>
</div>
<div class="workbench-card-sidepanel-border"></div>
<div class="workbench-card-sidepanel-body">
<div class="iiif-image-tools">
    <div class="form-group">
        <div class="row widget-wrapper">
        <label class="control-label">
            <span data-bind="text: $root.translations.title"></span>
        </label>
        <input type="text" class="form-control input-lg" style="height: 36px;"
            data-bind="attr:{placeholder: $root.translations.serviceTitle}, textInput: self.manifestName, valueUpdate: 'keyup'">
        </div>  
        <div class="row widget-wrapper">  
        <label class="control-label">
            <span data-bind="text: $root.translations.description"></span>
        </label>
        <textarea rows="10" type="text" class="form-control input-lg"
            data-bind="attr:{placeholder: $root.translations.serviceDescription}, textInput: self.manifestDescription, valueUpdate: 'keyup'"></textarea>
        </div>
        <div class="row widget-wrapper">
            <label class="control-label">
                <span data-bind="text: $root.translations.attribution"></span>
            </label>
            <input type="text" class="form-control input-lg" style="height: 36px;"
                data-bind="attr:{placeholder: $root.translations.attribution}, textInput: self.manifestAttribution, valueUpdate: 'keyup'">
            </div>  
        <div class="row widget-wrapper">
            <label class="control-label">
                <span data-bind="text: $root.translations.attributionLogo"></span>
            </label>
            <input type="text" class="form-control input-lg" style="height: 36px;"
                data-bind="attr:{placeholder: $root.translations.attributionLogo}, textInput: self.manifestLogo, valueUpdate: 'keyup'">
            </div>  
        <div class="row widget-wrapper">
        <label class="control-label">
            <span data-bind="text: $root.translations.metadata"></span>
        </label>
        <div class="manifest-metadata" style="display: flex;">
            <div style="display: flex; flex-direction: column; width: 100%;">
            <div style="padding: 3px">
                <input type="text" class="form-control input-md iiif-input" style="height: 36px;" 
                data-bind="attr:{placeholder: $root.translations.metadataLabel}, textInput: metadataLabel, valueUpdate: 'keyup'">
            </div>
            <div style="padding: 3px">
                 <textarea class="form-control input-md iiif-input" style="height: 36px;" 
                data-bind="attr:{placeholder: $root.translations.metadataValue}, textInput: metadataValues, valueUpdate: 'keyup'"></textarea>
            </div>
            </div>
            <div style="height: fit-content; padding-top: 15px; cursor: pointer;" data-bind="click: function(){updateMetadata()}">
                <i class="fa fa-plus-circle pull-right"></i>
            </div>
        </div>
        <hr>
        <div data-bind="sortable: {
                data: manifestMetadata,
                options: {
                    start: self.startDrag
                },
                beforeMove: self.beforeMove,
                afterMove: function(){console.log('hi')}
            }">  
            <div class="iiif-manifest-metadata-panel" style="">
                <div class="manifest-metadata-panel-drag"><i class="fa fa-ellipsis-v"></i></div>
                <div style="display: flex; flex-direction: column; width: 100%;">
                <div style="padding: 3px;">
                    <input type="text" class="form-control input-md iiif-input" style="height: 36px;" 
                    data-bind="attr:{placeholder: $root.translations.metadataLabel}, textInput: $data.label, valueUpdate: 'keyup'">
                </div>
                <div style="padding: 3px">
                    <textarea type="text" class="form-control input-md iiif-input" style="height: 36px;" 
                    data-bind="attr:{placeholder: $root.translations.metadataValue}, textInput: $data.value, valueUpdate: 'keyup'"></textarea>
                </div>
                </div>
                <div style="height: fit-content; padding-top: 15px; cursor: pointer;" data-bind="click: function(){self.removeMetadata($data)}">
                    <i class="fa fa-minus-circle pull-right"></i>
                </div>
            </div>
        </div>
        </div>
    </div>

    
    <div class="install-buttons" style="display: inline-flex; justify-content: space-between;">
        <div style="display: flex;">
        <button class="btn btn-mint btn-md btn-labeled fa fa-pencil" style="width: auto; margin-right: 10px;" data-bind="click: updateManifest, clickBubble: false, disable: !isManifestDirty()">
            <span data-bind="text: $root.translations.save"></span>
        </button>
        <button class="btn btn-warning btn-md btn-labeled fa fa-refresh" style="width: auto; margin-right: 10px;" data-bind="click: reset, clickBubble: false, disable: !isManifestDirty()">
            <span data-bind="text: $root.translations.cancel"></span>
        </button>
        </div>
        <!--ko if: manifest-->
        <button class="btn btn-danger btn-md btn-block btn-labeled btn-workbench fa fa-trash" style="width: auto" data-bind="click: deleteManifest">
            <span data-bind="text: $root.translations.delete"></span>
        </button>
        <!--/ko-->
    </div>
</div>
</div>
<!--/ko-->

<!--ko if: activeTab() === 'canvas'-->
<div class="workbench-card-sidepanel-header-container">
    <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">
        <span data-bind="text: $root.translations.manageImageCanvases"></span>
    </h4>
</div>

<div class="workbench-card-sidepanel-border"></div>
<div class="workbench-card-sidepanel-body">
<div class="iiif-image-tools">
    <!--ko if: canvases().length > 0-->
    <label class="control-label">
        <span data-bind="text: $root.translations.images"></span>
    </label>
    <span ></span>
    <div>
        <span data-bind="text: $root.translations.imageServiceInstruction"></span>
    </div>
    <div class="file-workbench-files" data-bind="foreach: canvases">
        <div class='file-workbench-file' style="display: inline-flex;" data-bind="css: {staged: (($parent.selectPrimaryPanel() && ko.unwrap($parent.canvas) === $data.images[0].resource.service['@id']) || !$parent.selectPrimaryPanel() && ko.unwrap($parent.secondaryCanvas) === $data.images[0].resource.service['@id'])}">
            <input type="checkbox" style="width:15px; height:15px;" data-bind="value: $data, checked: $parent.canvasesForDeletion">
            <span class='file-name manifest-manager-canvas-name' data-bind="text: label, click: $parent.canvasClick, clickBubble: false"></span>
        </div>
    </div>

    <div class="iiif-canvas-links-panel">
        <a class="" data-bind="click: addAllCanvases">
            <span data-bind="text: $root.translations.selectAll"></span>
        </a>
        <a class="" data-bind="click: clearCanvasSelection, css: {disabled: canvasesForDeletion().length === 0}">
            <span data-bind="text: $root.translations.clearAll"></span>
        </a>

        <div class="file-workbench-selected-buttons" data-bind="visible: canvasesForDeletion().length > 0">
            <button class="btn btn-lg btn-workbench btn-danger" data-bind="click: deleteCanvases">
                <i class="fa fa-trash"></i>
                <span data-bind="text: $root.translations.deleteSelected"></span>
            </button>
        </div>
    </div>
    <!--/ko-->

    <div class="dropzone-photo-upload" data-bind="dropzone: dropzoneOptions">
        <div class="file-workbench-links">
            <a class="fileinput-button dz-clickable" data-bind="css: uniqueidClass">
                <span data-bind="text: $root.translations.dropzoneDragOrDropDesc1"></span>
                <span class="text-bold" data-bind="text: $root.translations.dropzoneDragOrDropDesc2"></span>
                <span data-bind="text: $root.translations.dropzoneDragOrDropDesc3"></span>
            </a>
        </div>
        <div style="min-height: 100%;">
            <div id="hidden-dz-previews" style="display:none"></div>
        </div>
    </div>
    

    <!--ko if: canvas-->
    <label class="control-label">
        <span data-bind="text: $root.translations.selectedImageName"></span>
    </label>
    <div>
        <input type="text" class="form-control input-lg" style="height: 36px;" 
        data-bind="attr:{placeholder: $root.translations.imageCaption, disabled: compareMode }, textInput: self.canvasLabel, valueUpdate: 'keyup'">
    </div>
    <!--/ko-->
    
        
    
    <div class="install-buttons" style="display: inline-flex; justify-content: space-between;">
        <div class="file-workbench-buttons">
            <button class="btn btn-mint btn-md btn-labeled fa fa-pencil" data-bind="click: updateManifest, clickBubble: false, disable: !isCanvasDirty(), css: {disabled: !isCanvasDirty()}">
                <span data-bind="text: $root.translations.save"></span>
            </button>
            <button class="btn btn-warning btn-md btn-labeled fa fa-refresh" data-bind="click: reset, clickBubble: false, disable: !isCanvasDirty(), css: {disabled: !isCanvasDirty()}">
                <span data-bind="text: $root.translations.cancel"></span>
            </button>
        </div>
    </div>
</div>
</div>
<!--/ko-->
<!--/ko-->
{{ block.super }}
{% endblock sidepanel %}

{% block main_menu %}
<div>
    <ul class="nav nav-tabs flex pad-no">
        <li data-bind="if: shouldShowCreateService">
            <div class='manifest-manager-nav-tab' data-bind="click: function(){createService(true); selectService(false)}, css: { active: createService }">
                <div class='tab-label'>
                    <span data-bind="text: $root.translations.createNewService"></span>
                </div>
            </div>
        </li>
        <li data-bind="if: shouldShowSelectService">
            <div class='manifest-manager-nav-tab' data-bind=
                "click: function(){createService(false); selectService(true)}, css: { active: selectService }">
                <div class='tab-label'>
                    <span data-bind="text: $root.translations.selectService"></span>
                </div>
            </div>
        </li>
    </ul>
</div>

<div class="manifest-manager" style="height: 100%;">

<!--ko if: createService -->
<div data-bind="dropzone: dropzoneOptions4create" class="file-select loader-select" style="height: 100%;">
    <div style="
            display:flex; 
            flex-direction: column; 
            align-items: center;
            justify-content: center;
            height: 100%;
        "
    >
        <div class="manifest-manager-main-menu-circle loader-button">
            <span><i style="color: #000" class="fa fa-cloud-upload r-select-icon"></i></span>
        </div> 
        <h2>
            <span data-bind="text: $root.translations.imageUploadCaption"></span>
        </h2>
        <h4>
            <span data-bind="text: $root.translations.imageUploadInstruction"></span>
        </h4>
        <div style="display: flex; padding: 15px 25px; flex-direction: column; justify-content: center; align-items: center;">
        <div style="display:flex; flex-direction: column;">
            <div>
                <div class="dropzone-photo-upload">
                    <div style="border-top: 1px solid #c4c4c4; margin-bottom: 15px;" class="btn btn-rr btn-labeled btn-lg fa fa-image fileinput-create-button dz-clickable" data-bind="css: uniqueidClass" role="button">
                        <span data-bind="text: $root.translations.selectImages"></span>
                    </div>
                    <div style="min-height: 100%;">
                        <div id="hidden-dz-create-previews" style="display:none"></div>
                    </div>
                </div>
            </div>
        </div>
        <h5 class="rr-splash-description">
            <span data-bind="text: $root.translations.imageServiceCreateDesc"></span>
        </h5>
        </div>
</div>
</div>
<!-- /ko -->

<!--ko if: selectService -->
<div class="file-select loader-select" style="height: 100%;">
    <div style="display:flex; flex-direction: column; align-items: center;">
        <div class="manifest-manager-main-menu-circle loader-button">
            <span><i style="color: #000" class="fa fa-picture-o r-select-icon"></i></span>
        </div> 
        <h2>
            <span data-bind="text: $root.translations.selectExistingImageService"></span>
        </h2>
        <div style="display: flex; padding: 15px 25px; flex-direction: column; justify-content: center; align-items: center;">
        <div style="display:flex; flex-direction: column; width: 300px">
            <div class="manifest-editor-input">
                <select class="form-control input-lg widget-input"
                    data-bind="select2Query: {
                        select2Config: manifestSelectConfig
                    }">
                </select>
            </div>
        </div>
        <h5 class="rr-splash-description">
            <span data-bind="text: $root.translations.imageServiceEditDesc"></span>
        </h5>
    </div>
</div>
</div>
<!--/ko-->
</div>
{% endblock main_menu %}

{% 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 
        class="iiif-gallery-sequence-label" 
        style="padding:0 5px" 
        data-bind="
            if: shouldShowSelectService,
            click: toggleManifestEditor,
        "
    >
        <span data-bind="text: $root.translations.switchImageService"></span>
    </div>
    <div data-bind="if: renderContext() != 'manifest-workflow'">
        <div data-bind="dropzone: dropzoneOptions4create" >
            <div>
            <div class="iiif-gallery-sequence-label fileinput-create-button dz-clickable" style="padding:0 5px" data-bind="css: uniqueidClass; dropzone: dropzoneOptions4create" role="button">
                <span data-bind="text: $root.translations.createImageService"></span>
            </div>
            </div>
            <div style="min-height: 100%;">
                <div id="hidden-dz-create-previews" style="display:none"></div>
            </div>
        </div>
    </div>
    <div class="iiif-list-filter">
        <span data-bind="text: $root.translations.filter"></span>
        <div class="list-filter" data-bind="">
            <input type="text" class="form-control" style="width: 100%;" data-bind="attr:{placeholder: $root.translations.filterImages + '...'}, textInput: filter">

            <!-- 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 %}