{% extends "views/components/iiif-viewer.htm" %}
{% load staticfiles %}
{% 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 class="map-sidebar-text">{% trans "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">{% trans "Canvas" %}</span>
</div>
{{ block.super }}
{% endblock tabs %}

{% block sidepanel %}
<!--ko foreach: { data: [$data], as: 'self' }-->
<!--ko if: activeTab() === 'manifest'-->
<div class="workbench-header-buffer">
    <div class="workbench-card-sidepanel-header-container">
        <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">{% trans 'Manage Image Service' %}</h4>
    </div>
</div>

<div class="iiif-image-tools" style="margin-top: 20px;">
    <div class="form-group">
        <div class="row widget-wrapper">
        <label class="control-label">{% trans "Title" %}</label>
        <input type="text" placeholder="Service Title" class="form-control input-lg" style="height: 36px;"
            data-bind="textInput: self.manifestName, valueUpdate: 'keyup'">
        </div>  
        <div class="row widget-wrapper">  
        <label class="control-label">{% trans "Description" %}</label>
        <textarea rows="10" type="text" placeholder='Service Description' class="form-control input-lg"
            data-bind="textInput: self.manifestDescription, valueUpdate: 'keyup'"></textarea>
        </div>
        <div class="row widget-wrapper">
            <label class="control-label">{% trans "Attribution" %}</label>
            <input type="text" placeholder="Attribution" class="form-control input-lg" style="height: 36px;"
                data-bind="textInput: self.manifestAttribution, valueUpdate: 'keyup'">
            </div>  
        <div class="row widget-wrapper">
            <label class="control-label">{% trans "Attribution Logo" %}</label>
            <input type="text" placeholder="Attribution Logo" class="form-control input-lg" style="height: 36px;"
                data-bind="textInput: self.manifestLogo, valueUpdate: 'keyup'">
            </div>  
        <div class="row widget-wrapper">
        <label class="control-label">{% trans "Metadata" %}</label>
        <div class="manifest-metadata" style="display: flex;">
            <div style="display: flex; flex-direction: column; width: 100%;">
            <div style="padding: 3px">
                <input type="text" placeholder='Metadata Label' class="form-control input-md iiif-input" style="height: 36px;" 
                data-bind="textInput: metadataLabel, valueUpdate: 'keyup'">
            </div>
            <div style="padding: 3px">
                 <textarea placeholder='Metadata Value' class="form-control input-md iiif-input" style="height: 36px;" 
                data-bind="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" placeholder='Metadata Label' class="form-control input-md iiif-input" style="height: 36px;" 
                    data-bind="textInput: $data.label, valueUpdate: 'keyup'">
                </div>
                <div style="padding: 3px">
                    <textarea type="text" placeholder='Metadata Value' class="form-control input-md iiif-input" style="height: 36px;" 
                    data-bind="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()">{% trans "Save" %}</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()">{% trans "Cancel" %}</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>{% trans "Delete" %}</span></button>
        <!--/ko-->
    </div>
</div>
<!--/ko-->

<!--ko if: activeTab() === 'canvas'-->
<div class="workbench-header-buffer">
    <div class="workbench-card-sidepanel-header-container">
        <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">{% trans 'Manage Image Canvases' %}</h4>
    </div>
</div>

<div class="iiif-image-tools" style="margin-top: 20px;">
    <!--ko if: canvases().length > 0-->
    <label class="control-label">{% trans "Images" %}</label>
    <div>{% trans "Select image to delete from the image service" %}</div>
    <div class="file-workbench-files" data-bind="foreach: canvases">
        <div class='file-workbench-file' style="display: inline-flex;" data-bind="css: {staged: ko.unwrap($parent.canvas) === $data.images[0].resource.service['@id']}">
            <input type="checkbox" style="width:15px; height:15px;" data-bind="value: $data, checked: $parent.canvasesForDeletion">
            <!--ko if: ko.unwrap($parent.canvas) === $data.images[0].resource.service['@id'] -->
            <span class='file-name manifest-manager-canvas-name' data-bind="text: $parent.canvasLabel, click: $parent.canvasClick, clickBubble: false"></span>
            <!--/ko-->
            <!--ko ifnot: ko.unwrap($parent.canvas) === $data.images[0].resource.service['@id'] -->
            <span class='file-name manifest-manager-canvas-name' data-bind="text: label, click: $parent.canvasClick, clickBubble: false"></span>
            <!--/ko-->
        </div>
    </div>

    <div class="iiif-canvas-links-panel">
        <a class="" data-bind="click: addAllCanvases"> {% trans 'Select All' %}</a>
        <a class="" data-bind="click: clearCanvasSelection, css: {disabled: canvasesForDeletion().length === 0}"> {% trans 'Clear All' %}</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> {% trans 'Delete Selected' %}</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>{% trans "Drag or " %}</span><span class="text-bold">{% trans "click here " %}</span><span>{% trans "to upload photos" %}</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">{% trans "Selected Image Name" %}</label>
    <div>
        <input type="text" placeholder='Image Caption' class="form-control input-lg" style="height: 36px;" 
        data-bind="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()">{% trans "Save" %}</button>
            <button class="btn btn-warning btn-md btn-labeled fa fa-refresh" data-bind="click: reset, clickBubble: false, disable: !isCanvasDirty()">{% trans "Cancel" %}</button>
        </div>
    </div>
</div>
<!--/ko-->
<!--/ko-->
{{ block.super }}
{% endblock sidepanel %}

{% block main_menu %}
<div>
    <ul class="nav nav-tabs">
            <li data-bind="if: shouldShowCreateService">
                <div class='manifest-manager-nav-tab' data-bind="click: function(){createService(true); editService(false)}, css: { active: createService }">
                    <div class='tab-label'>
                        {% trans 'Create New Service' %}
                    </div>
                </div>
            </li>
            <li data-bind="if: shouldShowEditService">
            <div class='manifest-manager-nav-tab' data-bind=
                "click: function(){createService(false); editService(true)}, css: { active: editService }">
                <div class='tab-label'>
                    {% trans 'Edit a service' %}
                </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>{% trans 'Drag & Drop Your Images Here' %}</h2>
        <h4>{% trans 'Import digital images and create a new image service' %}</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">
                    {% trans 'Select Images' %}
                    </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">{% trans 'Create a new service by uploading one or more images. Images will be uploaded and processes so that you can view, annotate, and share them with others' %}</h5>
        </div>
</div>
</div>
<!-- /ko -->

<!--ko if: editService -->
<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>{% trans 'Edit an existing Image Service' %}</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">
                <input class="form-control input-lg widget-input"
                    data-bind="value: manifest,
                    select2Query: {
                        select2Config: manifestSelectConfig
                    }">
            </div>
        </div>
        <h5 class="rr-splash-description">{% trans 'Update the information and images related to an existing Image Service. Or copy and paste in the URL of a IIIF Manifest to add a service from an external service' %}</h5>
    </div>
</div>
</div>
<!--/ko-->
</div>
{% endblock main_menu %}

{% block gallery_header %}
<div class="iiif-gallery-header">
    <div>
        <span class="iiif-gallery-manifest-label" data-bind="text: manifestData() ? manifestName() : '{% trans "No manifest selected..." %}'"></span>
        <span class="iiif-gallery-manifest-label">|</span>
        <span>{% trans "Filter" %}</span>
        <div class="list-filter" data-bind="">
            <input type="text" class="form-control" style="width: 100%;" placeholder="{% trans 'Filter images...' %}" data-bind="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>
    <div class="iiif-gallery-sequence-labels">
        <div 
            class="iiif-gallery-sequence-label" 
            style="padding:0 5px" 
            data-bind="
                if: shouldShowEditService,
                click: toggleManifestEditor,
            "
        >
            {% trans "Switch Image Service" %}
        </div>
        |
        <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">
                {% trans "Create Image Service" %}
            </div>
            </div>
            <div style="min-height: 100%;">
                <div id="hidden-dz-create-previews" style="display:none"></div>
            </div>
        </div>
    </div>
</div>
{% endblock gallery_header %}