{% extends "views/forms/base.htm" %}
{% load i18n %}

{% block form_content %}

<div id="geom-list-section">
    <!-- Map -->
    <div class="row margin-bottom-10">
        <div class="col-xs-12">

            <!-- Resource Mapped Locations -->
            <div class="margin-bottom-10 padding-left-10">
                <dl>

                    <!-- Title -->
                    <dt>
                        <h5 id="arches-names-form" class="section-headline">{% trans 'Mapped Locations' %}</h5>
                    </dt>

                    <!-- Map -->
                    <div id="map" class="map arches-report-map margin-left-0 margin-top-10"></div>
                    
                    <!-- Geometry Type -->
                    <div id="geometry-type" class="geometry-type" style="margin-top: -490px; margin-bottom: 463px; padding-right: 10px;">

                        <div class="row">
                            <div class="col-xs-6 col-xs-offset-6" data-bind="attr: { 'style': getEditedNode('SPATIAL_COORDINATES_GEOMETRY.E47', 'value')() === '' ? 'opacity:0;' : '' }">
                                <div class="form-group" style="width:100%;">       
                                    <input class="geometry-selection" id="geometry-selection" name="" style="width:100%" data-bind="select2: {value: getEditedNode('GEOMETRY_QUALIFIER.E55', 'value'), placeholder: 'Type', dataKey: 'GEOMETRY_QUALIFIER.E55'}">
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <!-- End Geometry Type -->
                      
                </dl>
            </div>

            <!-- Map Tools Panel -->
            <div class="row">
                <div class="col-xs-4 col-xs-offset-1" style="">

                    <div id="basemaps-panel" class="tools-panel hidden" style="margin-top: -490px; overflow-y: scroll; height: 435px;">
                        <div class="modal-header arches-modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                ×
                            </button>
                            <h4 class="modal-title">
                                {% trans 'Basemaps' %}
                            </h4>
                        </div>

                        <!-- Body Content -->
                        <div class="modal-body padding-top-0 padding-bottom-0" data-bind='foreach: baseLayers'>

                            <div class="row">
                                <hr class="arches-layer-divider" style="border-top: 0px; margin-top: 5px;" />

                                <div class="arches-basemap-entry" style="margin-right: 7px;">
                            
                                    <div class="" style="">
                                        <a data-bind="attr: { id: id, title: name }" class="basemap info-click" data-rel="" href="javascript:void(0);">
                                            <span class="">  
                                                <img data-bind="attr: { src: icon }" class="arches-basemap-thumbnail" alt="" />
                                                <span class="zoom-icon"></span>                   
                                            </span>                                              
                                        </a>                    
                                        <span class="arches-basemap-caption-search">
                                            <a data-bind="attr: { id: id }, text: name" class="caption-text-search hover-effect basemap info-click" href="javascript:void(0);"> </a>
                                        </span>
                                    </div>

                                </div>
                            </div>

                        </div>
                        <!-- End Body Content -->

                    </div>
                </div>
            </div>
            <!-- End Map Tools Panel -->

            <!-- Overlays Panel -->
            <div class="row">
                <div class="col-xs-4 col-xs-offset-1" style="">

                    <div id="overlay-panel" class="tools-panel hidden" style="margin-top: -490px; overflow-y: scroll; overflow-x: hidden; height: 435px;">
                        <div class="modal-header arches-modal-header">

                            <button type="button" class="close pull-right" data-dismiss="modal" aria-hidden="true">
                                ×
                            </button>

                            <h4 class="modal-title">
                                {% trans 'Geometry Tools' %}
                            </h4>
                        </div>
            
                        <!-- Body Content -->
                        <div class="modal-body padding-top-10 padding-bottom-0" style="padding-left: 5px; padding-right: 5px;">
                            
                            <!-- List overlays -->
                            <div class="row">
                                <div class="col-xs-12">
                                    
                                    <dl>
                                        
                                        <dd class="">
                                            <div class="arches-tool-item">
                                                
                                                <a href="javascript:void(0);" data-geometrytype="Point" class="arches-tool-text geometry-btn info-link" title="">
                                                    <i class="fa fa-dot-circle-o"></i>
                                                    {% trans 'Draw new point' %}
                                                </a>
                                            </div>
                                        </dd>

                                        <dd class="">
                                            <div class="arches-tool-item">
                                                
                                                <a href="javascript:void(0);" data-geometrytype="LineString" class="arches-tool-text geometry-btn info-link" title="">
                                                    <i class="fa fa-minus"></i>
                                                    {% trans 'Draw new line' %}
                                                </a>
                                            </div>
                                        </dd>

                                        <dd class="">
                                            <div class="arches-tool-item">
                                                
                                                <a href="javascript:void(0);" data-geometrytype="Polygon" class="arches-tool-text geometry-btn info-link" title="">
                                                    <i class="fa fa-square-o"></i>
                                                    {% trans 'Draw new polygon' %}
                                                </a>
                                            </div>
                                        </dd>

                                        <dd class="">
                                            <div class="arches-tool-item file-upload">
                                                
                                                <a href="javascript:void(0);" data-geometrytype="Polygon" class="arches-tool-text geometry-btn info-link" title="">
                                                    <i class="fa fa-upload"></i>
                                                    {% trans 'Add from gpx, kml, or geojson' %}
                                                </a>
                                                <input type="file" class="upload geom-upload" accept=".gpx, .kml, .geojson, .json"/>
                                            </div>
                                        </dd>

                                        <dd class="geom-file-instructions">
                                            {% trans '(or drag and drop the file onto the map)' %}
                                        </dd>
                                        
                                    </dl>
                                    
                                </div>
                            </div>
                        </div>
                        <!-- End Body Content -->

                    </div>
                </div>
            </div>
            <!-- End Overlays Panel -->

            <!-- Map Tools -->
            <div class="row" style="height:0px;">

                <div class="btn-group" style="top:-100px;left:86px;">

                    <button id="inventory-home" type="button" class="btn btn-primary arches-map-tools-pressed hidden" style="width: 50px; border: 1px solid rgba(206,217,233,.95);"><i class="fa fa-caret-down"></i>
                    </button>

                    <button id="inventory-basemaps" type="button" class="btn btn-primary arches-map-tools"><i class="fa fa-globe"></i> {% trans 'Basemaps' %}
                    </button>

                    <button id="inventory-overlays" type="button" class="btn btn-primary arches-map-tools"><i class="fa fa-plus"></i> {% trans 'Add Geometry' %}
                    </button>

                </div>

            </div>
            <!-- End Map Tools -->

        </div>
    </div>

    <!-- Geometry Records -->
    <div class="row margin-bottom-10">
        <div class="col-xs-12">

            <!-- Geometries -->
            <div class="arches-crud-child-section">
                <dl>
                    <dd class="arches-CRUD-child-title">
                        {% trans 'This resource is represented by the following geometries:' %}
                    </dd>

                    <div data-bind="visible: getBranchLists().length == 0" class="margin-left-5 txt-color-blue">{% trans "No geometries defined" %}</div>   

                    <dd class="margin-left-5" data-bind='foreach: getBranchLists()'>
                        <div class="arches-crud-record">
                            <a href="#" class="arches-CRUD-child" title="Remove this geometry"><i data-bind="click: $parent.deleteItem.bind($parent)" class="arches-CRUD-delete fa fa-times-circle"></i></a>
                            <a href="#" class="arches-CRUD-child" data-bind="click: $parent.editItem.bind($parent), text: nodes.get('SPATIAL_COORDINATES_GEOMETRY.E47', 'value').split('(')[0].toLowerCase(), attr: { 'style': editing() ? 'font-weight:bold;' : '' }" title="Edit this geometry"></a>&nbsp; <span class="text-muted arches-crud-type-identifier" data-bind="text: nodes.get('GEOMETRY_QUALIFIER.E55', 'label')"></span>
                        </div>
                    </dd>

                </dl>
            </div>
        </div>
    </div>
    <!-- End Geometry Records -->
</div>

<hr class="devider arches-RDM-divider">

<!-- Location Description -->
<div class="row margin-bottom-10" id="description-section">
    <div class="col-xs-12">

        <!-- Resource Location Descriptions -->
        <div class="padding-left-10">
            <dl>

                <!-- Title -->
                <dt>
                    <h5 id="arches-names-form" class="section-headline">{% trans 'Location Description' %}</h5>
                </dt>

                <dd class="arches-RDM-labels">
                    
                    <!-- Simple HTML Editor -->
                    <div class="arches-html-editor">
                        <div class="summernote" data-bind="summernote: {value: getEditedNode('DESCRIPTION_OF_LOCATION.E62', 'value'), options:{}}"></div>
                    </div>

                </dd>

            </dl>
        </div>
    </div>
</div>
<!-- End Resource Location Descriptions -->

<div class="row margin-bottom-10" id="temporal-section">
    <div class="col-xs-12">

        <!-- Resource Location Descriptions -->
        <div class="padding-left-10">
            <dl>

                <!-- Title -->
                <dt>
                    <h5 id="arches-names-form" class="section-headline">{% trans 'Temporal Coverage' %}</h5>
                </dt>

                <dd class="arches-RDM-labels">
                    
                    <!-- Simple HTML Editor -->
                    <div class="arches-html-editor">
                        <div class="summernote" data-bind="summernote: {value: getEditedNode('TEMPORAL_COVERAGE_TIME-SPAN.E52', 'value'), options:{}}"></div>
                    </div>

                </dd>

            </dl>
        </div>
    </div>
</div>
{% endblock form_content %}