{% 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 -->
<!-- Popup modal for deleting a sample location -->
<div class="afs-modal" data-bind="visible: showingSampleLocationDeleteModal">
    <div class="afs-modal-content">
        <h1>{% trans "Delete Sample" %}</h1>
        <p>{% trans "Are you sure you want to delete the sample?" %}</p>

        <div class="afs-modal-clearfix">
            <button type="button" data-bind="click: showSampleLocationDeleteModal(false)" class="btn btn-success">{% trans "Cancel" %}</button>
            <button type="button" data-bind="click: deleteSampleLocation" class="btn btn-danger">{% trans "Delete" %}</button>
        </div>
    </div>
</div>
{% 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 'Sample Details' %}'"></h4>
    </div>
    <div class="workbench-card-sidepanel-border"></div>
    <div class="workbench-card-sidepanel-body">




    <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: sampleLocationInstances().length === 0 || !!sampleListShowing() -->
                    <button type="button" class="btn" style="
                            background: #9490EE;
                            color: #eee;
                        " data-bind="
                            click: $data.loadNewSampleLocationTile
                        ">
                        <i class="fa fa-folder" aria-hidden="true"></i>
                        <span>
                            {% trans 'Add New Sample' %}
                        </span>
                    </button>
                    <!-- /ko -->

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

                <div style="overflow: hidden; height: 0px; transition: height .3s;"
                    data-bind="style: {height: sampleListShowing() ? '585px': '0px'}">
                    <h5>{% trans 'Sample locations' %}</h5>
                
                    <div style="margin-left: 5px; margin-right: 15px;">
                        <input type="text" style="
                            width: 100%;
                            padding: 0px 5px;
                            height: 36px;
                            border: 1px solid #ddd;
                            margin-bottom: 3px;
                        " data-bind="textInput: $data.sampleLocationFilterTerm, attr: {'placeholder': $root.translations.filter + '...'}">
                
                        <div style="height: 320px;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.filteredSampleLocationInstances -->
                                    <tr style="cursor: pointer;"
                                        data-bind="
                                            click: function() { $parent.selectSampleLocationInstance($data); },
                                            scrollTo: $parent.selectedSampleLocationInstance() && $parent.selectedSampleLocationInstance().tileid === $data.tileid,
                                            style: {
                                                background: (function() {
                                                    if ($parent.selectedSampleLocationInstance() && $parent.selectedSampleLocationInstance().tileid === $data.tileid) {
                                                        return '#afd7f7';
                                                    }
                                            })()
                                        },
                                    ">
                                        <!-- ko if: $parent.samplingActivityResourceId != $data.samplingActivityResourceId() -->
                                        <td style="cursor: pointer;" class="iiif-card-feature-tool">
                                            <a href="javascript:void(0);"
                                                data-bind="click: function() { $parent.viewSampleLocationInstance($data); }, clickBubble: false,
                                                attr: {'aria-label': $root.translations.edit}">
                                                <i class="fa fa-eye iiif-card-feature-edit" aria-hidden="true"></i>
                                            </a>
                                        </td>
                                        <td class="iiif-card-feature-tool">
                                            <a href="javascript:void(0);" style="cursor: unset;">
                                                <i class="fa fa-lock" data-bind="attr: {'aria-label': $root.translations.disabled}"></i>
                                            </a>
                                        </td>
                                        <!-- /ko -->
                                        <!-- ko if: $parent.samplingActivityResourceId == $data.samplingActivityResourceId() -->
                                        <td style="cursor: pointer;" class="iiif-card-feature-tool">
                                            <a href="javascript:void(0);"
                                                data-bind="click: function() { $parent.viewSampleLocationInstance($data); }, clickBubble: false,
                                                attr: {'aria-label': $root.translations.edit}">
                                                <i class="fa fa-pencil iiif-card-feature-edit" aria-hidden="true"></i>
                                            </a>
                                        </td>
                                        <td style="cursor: pointer;" class="iiif-card-feature-tool">
                                            <a href="javascript:void(0);"
                                                data-bind="click: function() { $parent.showSampleLocationDeleteModal($data); }, clickBubble: false,
                                                attr: {'aria-label': $root.translations.delete}">
                                                <i class="fa fa-trash iiif-card-feature-edit" aria-hidden="true"></i>
                                            </a>
                                        </td>
                                        <!-- /ko -->
                                        <td class="afs-workflow-table-contents" data-bind="text: $parent.sampleNameFromTileData($data.data)" style="width: 100%; padding: 0px 5px;"></td>
                                    </tr>
                                    <!-- /ko -->
                                </tbody>
                            </table>
                        </div>
                
                    </div>
                </div>

                {% block form_widgets %}
                    <form class="widgets afs-sample-location-form-widgets" data-bind="style: {opacity: $data.selectedSampleLocationInstance() !== undefined && !sampleListShowing() ? '1' : '0'}">
                        <!-- BEGIN geometry table -->
                        <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">
                                {% trans 'Sample Location' %} <span class="afs-workflow-required-tag">{% trans 'required' %}</span>
                            </h5>

                            <i style="display: none;" data-bind="css: {'ion-asterisk widget-label-required': self.form.nodeLookup[widget.node_id()].isrequired}"></i>

                            <div class="col-xs-12" style="width: 342px; margin-top: -20px;">
                                <div class="style-tools-collapser" style="display: flex; flex-direction: row-reverse;" data-bind=" click: function() {
                                    self.showStylingTools(!self.showStylingTools());
                                }">
                                    <span data-bind="text: self.showStylingTools() ? '{% trans "Hide Style Tools" %}' : '{% trans "Show Style Tools" %}'"></span>
                                    <i style="padding: 0px 3px; margin-top: 4px;" 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.selectedSampleLocationInstanceFeatures() === undefined || 
                                                         self.selectedSampleLocationInstanceFeatures().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.sampleLocationDisabled() && 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.selectedSampleLocationInstanceFeatures, 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>
                                            <td class="map-card-feature-tool" data-bind="visible: !self.sampleLocationDisabled()">
                                                <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" data-bind="visible: !self.sampleLocationDisabled()">
                                                <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>
                                        </tr>
                                        <!-- /ko -->
                                    </tbody>
                                </table>
                            </div>
                        <!-- /ko -->
                        </div>
                        <!-- END geometry table -->

                        <!-- ko if: $data.partIdentifierAssignmentLabelWidget() -->
                            <h5 class="analysis-areas-annotation-step-widget-title" style="margin-bottom: 5px;">
                                {% trans 'Sample Name' %} <span class="afs-workflow-required-tag">{% trans 'required' %}</span>
                            </h5>
                            <i style="display: none;" data-bind="css: {'ion-asterisk widget-label-required': self.form.nodeLookup[$data.partIdentifierAssignmentLabelWidget().node_id()].isrequired}"></i>
                            <div class="afs-sample-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: $data.sampleLocationDisabled || (!self.card.isWritable && !self.preview),
                                        }
                                    }, 
                                    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 class="afs-calculated-name" disabled type="text" data-bind="textInput: sampleName"></input>
                            </div>
                        <!-- /ko -->

                        <!-- BEGIN sample description -->
                            <h5 class="analysis-areas-annotation-step-widget-title">{% trans 'Sample Description' %}</h5>
                            <div class="afs-workflow-sample-desc" style="margin-left: -21px; margin-top: -18px;"
                                data-bind='
                                    component: {
                                        name: "rich-text-widget",
                                        params: {
                                            renderContext: "workflow",
                                            disabled: $data.sampleLocationDisabled,
                                            value: $data.sampleDescriptionWidgetValue,
                                        }
                                    }, 

                                '
                            ></div>
                        <!-- END sample description -->

                        <!-- BEGIN motivation for sampling -->
                            <h5 class="analysis-areas-annotation-step-widget-title">{% trans 'Motivation for taking this sample' %}</h5>
                            <div class="afs-workflow-sample-desc" style="margin-left: -21px; margin-top: -18px;"
                                data-bind='
                                    component: {
                                        name: "rich-text-widget",
                                        params: {
                                            renderContext: "workflow",
                                            disabled: $data.sampleLocationDisabled,
                                            value: $data.motivationForSamplingWidgetValue,
                                        }
                                    }, 

                                '
                            ></div>
                        <!-- END motivation for sampling -->
                    </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.saveSampleLocationTile, css: {disabled: !$data.tileDirty()}, attr: {disabled: !$data.tileDirty()}"
        >
            <i class="ion-android-cloud-done" aria-hidden="true"></i>
            <span style="padding-left: 4px">{% trans 'Save' %}</span>
        </button>
        <button 
            class="btn btn-danger" 
            data-bind="click: $data.resetSampleLocationTile, css: {disabled: !$data.tileDirty()}, attr: {disabled: !$data.tileDirty()}"
        >
            <i class="ion-android-cancel" aria-hidden="true"></i>
            <span style="padding-left: 4px">{% trans 'Cancel' %}</span>
        </button>
    </div>
    {% endblock form_buttons %}
    <!-- /ko -->

    {{ block.super }}
{% endblock sidepanel %}
