{% extends 'views/components/iiif-annotation.htm' %}
{% load i18n %}

{% block workbench %}
<div class='loading-mask' data-bind="visible: $data.savingTile()"></div>
<div class="afs-saving-message" data-bind="visible: $data.savingTile(), text: savingMessage"></div>
<!-- ko if: $data.hasExternalCardData() -->
    <!-- ko with: $data, as: 'self' -->
        {{ block.super }}
    <!-- /ko -->
<!-- /ko -->
{% endblock workbench %}

{% block tabs %}
<div class="workbench-card-sidebar-tab" data-bind="click: function() {
    toggleTab('dataset');
}, css: {
    'active': activeTab() === 'dataset'
}">
    <i class="fa fa-file"></i>
    <span class="map-sidebar-text">{% trans 'Dataset' %}</span>
</div>

{{ block.super }}

{% endblock tabs %}

{% block sidepanel %}

<!-- ko if: $data.activeTab() === 'dataset' -->

<div class="workbench-card-sidepanel-header-container">
    <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel, text: '{% trans 'Regions' %}'"></h4>
</div>
<div class="workbench-card-sidepanel-border"></div>
<div class="workbench-card-sidepanel-body">

    <!-- Popup modal for deleting a sample location -->
    <div class="afs-modal" data-bind="visible: showingAnalysisAreaDeleteModal">
        <div class="afs-modal-content">
            <h1>{% trans "Delete Analysis Area" %}</h1>
            <p>{% trans "Are you sure you want to delete the analysis area?" %}</p>
    
            <div class="afs-modal-clearfix">
                <button type="button" data-bind="click: showAnalysisAreaDeleteModal(false)" class="btn btn-success">
                    {% trans "Cancel" %}</button>
                <button type="button" data-bind="click: deleteAnalysisAreaInstance" class="btn btn-danger">
                    {% trans "Delete" %}</button>
            </div>
        </div>
    </div>

    <div data-bind="css: card.model.cssclass">
        <div class="new-provisional-edit-card-container">
            <div class="card">

                <div style="display: flex; gap: 10px">
                    <!-- ko if: analysisAreaInstances().length === 0 || !!sampleListShowing() -->
                    <button type="button" class="btn" style="
                            background: #9490EE;
                            color: #eee;
                        " data-bind="
                            click: $data.loadNewAnalysisAreaTile
                        ">
                        <i class="fa fa-folder"></i>
                        <span>
                            {% trans 'Add New Analysis Area' %}
                        </span>
                    </button>
                    <!-- /ko -->

                    <!-- ko if: analysisAreaInstances().length > 0 && !sampleListShowing() -->
                    <button type="button" class="btn" style="
                            background: #9490EE;
                            color: #eee;
                        " data-bind="click: showSampleList">
                        <i class="fa fa-folder"></i>
                        <span>{% trans 'Return to Analysis Areas List' %}</span>
                    </button>
                    <!-- /ko -->
                </div>

                <div style="overflow: hidden; height: 0px; transition: height .3s;"
                    data-bind="style: {height: sampleListShowing() ? '185px': '0px'}">
                    <h5>{% trans 'Analysis Area locations' %}</h5>
            
                    <div style="margin-left: 5px; margin-right: 15px;">
                        <input 
                            type="text" 
                            style="
                                width: 100%;
                                height: 36px;
                                border: 1px solid #ddd;
                                margin-bottom: 3px;
                            "
                            data-bind="textInput: $data.analysisAreaFilterTerm, attr: {'placeholder': $root.translations.filter + '...'}"
                        >

                        <div
                            style="
                                height: 100px;
                                border: 1px solid #ddd;
                                overflow-y: scroll;
                            "
                        >
                            <table
                                style="
                                    display: flex;
                                    flex-direction: column;
                                    width: 100%;
                                "
                            >
                                <tbody
                                    class="dataset-table"
                                    style="
                                        display: flex;
                                        flex-direction: column;
                                    "
                                >
                                    <!-- ko foreach: $data.filteredAnalysisAreaInstances -->
                                        <tr style="cursor: pointer;" 
                                            data-bind="
                                                click: function() { $parent.selectAnalysisAreaInstance($data); }
                                                scrollTo: $parent.selectedAnalysisAreaInstance() && $parent.selectedAnalysisAreaInstance().tileid === $data.tileid,
                                                style: {
                                                    background: (function() {
                                                        if ($parent.selectedAnalysisAreaInstance() && $parent.selectedAnalysisAreaInstance().tileid === $data.tileid) {
                                                            return '#afd7f7';
                                                        }
                                                    })()
                                                },
                                            "
                                        >
                                            <!-- ko if: $data.isLocked() -->
                                            <td style="cursor: pointer; width: 30px;">
                                                <a href="javascript:void(0);"
                                                    data-bind="click: function() { $parent.viewAnalysisAreaInstance($data); },
                                                        clickBubble: false, attr: {'aria-label': $root.translations.show}">
                                                    <i class="fa fa-eye map-card-feature-edit" aria-hidden="true"></i>
                                                </a>
                                            </td>
                                            <td style="width: 30px;">
                                                <i class="fa fa-lock" data-bind="attr: {'aria-label': $root.translations.disabled}"></i>
                                            </td>
                                            <!-- /ko -->
                                            <!-- ko ifnot: $data.isLocked() -->
                                            <td style="cursor: pointer; width: 30px;">
                                                <a href="javascript:void(0);"
                                                    data-bind="click: function() { $parent.viewAnalysisAreaInstance($data); },
                                                        clickBubble: false, attr: {'aria-label': $root.translations.edit}">
                                                    <i class="fa fa-pencil map-card-feature-edit" aria-hidden="true"></i>
                                                </a>
                                            </td>
                                            <td style="cursor: pointer; width: 30px;">
                                                <a href="javascript:void(0);"
                                                    data-bind="click: function() { $parent.showAnalysisAreaDeleteModal($data); },
                                                        clickBubble: false, attr: {'aria-label': $root.translations.delete}">
                                                    <i class="fa fa-trash map-card-feature-edit" aria-hidden="true"></i>
                                                </a>
                                            </td>
                                            <!-- /ko -->
                                            <td class="afs-workflow-table-contents" data-bind="text: $parent.areaNameFromTileData($data.data)"></td>
                                        </tr>
                                    <!-- /ko -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {% block form_widgets %}
                    <form class="widgets afs-sample-location-form-widgets" data-bind="style: {opacity: $data.selectedAnalysisAreaInstance() && !sampleListShowing() ? '1' : '0'}">

                        <div data-bind="foreach: {
                            data:card.widgets, as: 'widget'
                        }">
                            <!-- ko if: ko.unwrap(self.form.nodeLookup[widget.node_id()].datatype) === 'annotation' -->
                                <h5 class="analysis-areas-annotation-step-widget-title pad-top">
                                    {% trans 'Location' %} <span class="afs-workflow-required-tag">{% trans 'required' %}</span>
                                </h5>

                                <div class="col-xs-12" style="width: 342px;">
                                    <div class="style-tools-collapser" data-bind=" click: function() {
                                        self.showStylingTools(!self.showStylingTools());
                                    }">
                                        <span data-bind="text: self.showStylingTools() ? '{% trans "Hide Style Tools" %}' : '{% trans "Show Style Tools" %}'"></span>
                                        <i class="fa" aria-hidden="true" data-bind="{
                                            css: {
                                                'fa-caret-down' : !self.showStylingTools(),
                                                'fa-caret-up' : self.showStylingTools(),
                                            }
                                        }"></i>
                                    </div>
                                    <div class="form-horizontal" data-bind="if: self.showStylingTools">
                                        <div class="style-tools-panel">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">{% trans "Line Color" as lineColor %}{{ lineColor }}</label>
                                                <div class="col-sm-8">
                                                    <div class="colorpicker-component input-group">
                                                        <input placeholder="{{ lineColor }}" class="form-control input-md widget-input" data-bind="colorPicker: {color: self.lineColor, format:'hex'}">
                                                        <span class="input-group-addon style-tools-color-visualizer" data-bind="style: {background: self.lineColor}"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">{% trans "Fill Color" as fillColor %}{{ fillColor }}</label>
                                                <div class="col-sm-8">
                                                    <div class="colorpicker-component input-group">
                                                        <input placeholder="{{ fillColor }}" class="form-control input-md widget-input" data-bind="colorPicker: {color: self.fillColor, format:'hex'}">
                                                        <span class="input-group-addon style-tools-color-visualizer" data-bind="style: {background: self.fillColor}"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">{% trans "Line Width" %}</label>
                                                <div class="col-sm-8">
                                                    <input type="number" placeholder="" class="form-control" data-bind="valueUpdate: 'keyup', value: self.lineWidth">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">{% trans "Line Opacity" %}</label>
                                                <div class="col-sm-8">
                                                    <input type="number" placeholder="" class="form-control" data-bind="valueUpdate: 'keyup', value: self.lineOpacity">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">{% trans "Point Radius" %}</label>
                                                <div class="col-sm-8">
                                                    <input type="number" placeholder="" class="form-control" data-bind="valueUpdate: 'keyup', value: self.pointRadius">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">{% trans "Fill Opacity" %}</label>
                                                <div class="col-sm-8">
                                                    <input type="number" placeholder="" class="form-control" data-bind="valueUpdate: 'keyup', value: self.fillOpacity">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="map-card-feature-list">
                                        <div 
                                            class="add-new-feature" 
                                            data-bind="{
                                                visible: !self.disableDrawing() && 
                                                    (widget.config.multiFeature() || 
                                                    (!widget.config.multiFeature() && 
                                                        (self.selectedAnalysisAreaInstanceFeatures() === undefined || 
                                                        self.selectedAnalysisAreaInstanceFeatures().length < 1))),
                                                click: self.clearEditedGeometries,
                                            }"
                                        >
                                            <select data-placeholder="{% trans 'Add a new feature' %}..." data-bind="
                                                value: self.featureLookup[widget.node_id()].selectedTool,
                                                valueAllowUnset: true,
                                                options: [
                                                    {
                                                        value: '',
                                                        text: ''
                                                    },
                                                    {
                                                        value: 'draw_point',
                                                        text: {% trans 'Add point' as addPoint %} '{{ addPoint }}'
                                                    },
                                                    {
                                                        value: 'draw_line_string',
                                                        text: {% trans 'Add line' as addLine %} '{{ addLine }}'
                                                    },
                                                    {
                                                        value: 'draw_polygon',
                                                        text: {% trans 'Add polygon' as addPolygon %} '{{ addPolygon }}'
                                                    }
                                                ],
                                                optionsText: 'text',
                                                optionsValue: 'value',
                                                chosen: {
                                                    'width': '100%',
                                                    'disable_search_threshold': 10,
                                                    'allow_single_deselect': true
                                                }
                                            "></select>
                                        </div>
                                        <div class="add-new-feature" data-bind="visible: self.disableDrawing">
                                            <select data-placeholder="{% trans 'Add a new feature' %}..." data-bind="
                                                value: self.featureLookup[widget.node_id()].selectedTool,
                                                valueAllowUnset: true,
                                                options: [
                                                    {
                                                        value: '',
                                                        text: ''
                                                    },
                                                    {
                                                        value: 'draw_point',
                                                        text: '{{ addPoint }}'
                                                    },
                                                    {
                                                        value: 'draw_line_string',
                                                        text: '{{ addLine }}'
                                                    },
                                                    {
                                                        value: 'draw_polygon',
                                                        text: '{{ addPolygon }}'
                                                    }
                                                ],
                                                optionsText: 'text',
                                                optionsValue: 'value',
                                                chosen: {
                                                    disabled: true,
                                                    'width': '100%',
                                                    'disable_search_threshold': 10,
                                                    'allow_single_deselect': true
                                                }
                                            "></select>
                                        </div>
                                    </div>
                                    <table class="table">
                                        <tbody>
                                            <!-- ko foreach: {data: self.selectedAnalysisAreaInstanceFeatures, as: 'feature'} -->
                                            <tr class="map-card-feature-item" data-bind="css: {'active': self.selectedFeatureIds().indexOf(feature.id) >= 0}, click: function() { self.showFeature(ko.toJS(feature)); }">
                                                <td>
                                                    <span class="map-card-feature-name" data-bind="text: feature.geometry.type"></span>
                                                </td>
                                                <!-- ko ifnot: self.selectedAnalysisAreaInstance()?.isLocked -->
                                                <td class="map-card-feature-tool">
                                                    <a href="javascript:void(0);" data-bind="click: function() { self.editFeature(feature); }, clickBubble: false">
                                                        <i class="fa fa-pencil map-card-feature-edit" aria-hidden="true"></i>
                                                        {% trans "Edit" %}
                                                    </a>
                                                </td>
                                                <td class="map-card-feature-tool">
                                                    <a href="javascript:void(0);" data-bind="click: function() { self.deleteFeature(feature); }, clickBubble: false">
                                                        <i class="fa fa-trash map-card-feature-delete" aria-hidden="true"></i>
                                                        {% trans "Delete" %}
                                                    </a>
                                                </td>
                                                <!-- /ko -->
                                            </tr>
                                            <!-- /ko -->
                                        </tbody>
                                    </table>
                                </div>
                            <!-- /ko -->
                        </div>

                        <!-- ko if: $data.partIdentifierAssignmentLabelWidget() -->
                            <h5 class="analysis-areas-annotation-step-widget-title">
                                {% trans 'Name for Analyis Area (Part)' %} <span class="afs-workflow-required-tag">{% trans 'required' %}</span>
                            </h5>
                            <!-- TODO: aria-label -->
                            <i style="display: none;" data-bind="css: {'ion-asterisk widget-label-required': self.form.nodeLookup[$data.partIdentifierAssignmentLabelWidget().node_id()].isrequired}"></i>

                            <div class="afs-region-name" data-bind='
                                    component: {
                                        name: self.form.widgetLookup[$data.partIdentifierAssignmentLabelWidget().widget_id()].name,
                                        params: {
                                            formData: self.physicalThingPartIdentifierAssignmentTile().formData,
                                            tile: self.physicalThingPartIdentifierAssignmentTile(),
                                            form: self.form,
                                            config: $data.partIdentifierAssignmentLabelWidget().configJSON,
                                            label: $data.partIdentifierAssignmentLabelWidget().label(),
                                            value: self.physicalThingPartIdentifierAssignmentTile().data[$data.partIdentifierAssignmentLabelWidget().node_id()],
                                            node: self.form.nodeLookup[$data.partIdentifierAssignmentLabelWidget().node_id()],
                                            expanded: self.expanded,
                                            graph: self.form.graph,
                                            type: "resource-editor",
                                            disabled: $parent.selectedAnalysisAreaInstance()?.isLocked,
                                        }
                                    }, 
                                    css:{
                                        "active": $data.partIdentifierAssignmentLabelWidget().selected,
                                        "hover": $data.partIdentifierAssignmentLabelWidget().hovered,
                                        "$data.partIdentifierAssignmentLabelWidget()-preview": self.preview
                                    }, 
                                    click: function(data, e) {
                                        if (!$data.partIdentifierAssignmentLabelWidget().selected() && self.preview) $data.partIdentifierAssignmentLabelWidget().selected(true);
                                    }, 
                                    event: {
                                        mouseover: function(){
                                            if (self.preview) $data.partIdentifierAssignmentLabelWidget().hovered(true);
                                        },
                                        mouseout: function(){
                                            if (self.preview) $data.partIdentifierAssignmentLabelWidget().hovered(null);
                                        }
                                    }, 
                                    visible: $data.partIdentifierAssignmentLabelWidget().visible
                                '
                            ></div>
                            <div>
                                <input disabled type="text" style="padding-left: 20px; margin-left: 5px; margin-top: -5px; width: 342px; height: 36px;" data-bind="textInput: areaName"></input>
                            </div>
                        <!-- /ko -->

                        
                        <!-- ko if: $data.partIdentifierAssignmentAnnotatorWidget() -->
                            <h5 class="analysis-areas-annotation-step-widget-title pad-top">{% trans 'Annotator' %}</h5>
                            <i data-bind="css: {'ion-asterisk widget-label-required': self.form.nodeLookup[$data.partIdentifierAssignmentAnnotatorWidget().node_id()].isrequired}"></i>

                            <div class="afs-workflow-annotator" style="margin-left: -20px;"
                                data-bind='
                                    component: {
                                        name: "views/components/resource-instance-nodevalue",
                                        params: {
                                            formData: self.physicalThingPartIdentifierAssignmentTile().formData,
                                            tile: self.physicalThingPartIdentifierAssignmentTile(),
                                            form: self.form,
                                            config: $data.partIdentifierAssignmentAnnotatorWidget().configJSON,
                                            label: $data.partIdentifierAssignmentAnnotatorWidget().label(),
                                            value: self.physicalThingPartIdentifierAssignmentTile().data[$data.partIdentifierAssignmentAnnotatorWidget().node_id()],
                                            node: self.form.nodeLookup[$data.partIdentifierAssignmentAnnotatorWidget().node_id()],
                                            expanded: self.expanded,
                                            graph: self.form.graph,
                                            type: "resource-editor",
                                            disabled: $parent.selectedAnalysisAreaInstance()?.isLocked,
                                            relatedResourceId: projectResourceId,
                                            relatedNodeId: "dbaa2022-9ae7-11ea-ab62-dca90488358a",
                                        }
                                    }, 
                                    css:{
                                        "active": $data.partIdentifierAssignmentAnnotatorWidget().selected,
                                        "hover": $data.partIdentifierAssignmentAnnotatorWidget().hovered,
                                        "$data.partIdentifierAssignmentAnnotatorWidget()-preview": self.preview
                                    }, 
                                    click: function(data, e) {
                                        if (!$data.partIdentifierAssignmentAnnotatorWidget().selected() && self.preview) $data.partIdentifierAssignmentAnnotatorWidget().selected(true);
                                    }, 
                                    event: {
                                        mouseover: function(){
                                            if (self.preview) $data.partIdentifierAssignmentAnnotatorWidget().hovered(true);
                                        },
                                        mouseout: function(){
                                            if (self.preview) $data.partIdentifierAssignmentAnnotatorWidget().hovered(null);
                                        }
                                    }, 
                                    visible: $data.partIdentifierAssignmentAnnotatorWidget().visible
                                '
                            ></div>
                        <!-- /ko -->
                    </form>
                {% endblock form_widgets %}

            </div>
        </div>
    </div>
</div>
{% block form_buttons %}
<div class="workbench-button-panel">
    <button 
        class="btn btn-success" 
        data-bind="click: $data.saveAnalysisAreaTile, css: {disabled: !$data.tileDirty()}, attr: {disabled: !$data.tileDirty()}"
    >
        <i class="ion-android-cloud-done" aria-hidden="true"></i>
        <span>{% trans 'Save' %}</span>
    </button>
    <button 
        class="btn btn-danger" 
        data-bind="click: $data.resetAnalysisAreasTile, css: {disabled: !$data.tileDirty()}, attr: {disabled: !$data.tileDirty()}"
    >
        <i class="ion-android-cancel" aria-hidden="true"></i>
        <span>{% trans 'Cancel' %}</span>
    </button>
</div>
{% endblock form_buttons %}
<!-- /ko -->
{{ block.super }}
{% endblock sidepanel %}
