{% extends "layers/layer_base.html" %}
{% load i18n %}
{% load dialogos_tags %}
{% load agon_ratings_tags %}
{% load bootstrap_tags %}
{% load pagination_tags %}
{% load url from future %}
{% load base_tags %}
{% load guardian_tags %}

{% block title %}{{ block.super }} {% trans "Layers" %} | {{ resource.title|default:resource.typename }}{% endblock %}
{% block page-title %}
  {% trans "Explore Layers" %}
  <div class="btn-group pull-right">
    <a class="btn btn-primary btn-icon" href="{% url "layer_browse" %}">
      <i class="fa fa-bars" title="All Layers"></i>
    </a>
    <a class="btn btn-primary" href="{% url "layer_browse" %}">
      {% trans "All Layers" %}
    </a>
  </div>
{% endblock %}

{% block head %}

  {% if TWITTER_CARD %}
    {% include "base/_resourcebase_twittercard.html" %}
  {% endif %}

  {% if OPENGRAPH_ENABLED %}
    {% include "base/_resourcebase_opengraph.html" %}
  {% endif %}

  {% if preview == 'geoext' %}
    {% include "layers/layer_geoext_map.html" %}
  {% elif preview == 'OL3' %}
    {% include "layers/layer_ol3_map.html" %}
  {% elif preview == 'react' %}
		{% include 'geonode-client/layer_map.html' %}
  {% else %}
    {% include "layers/layer_leaflet_map.html" %}
  {% endif %}
{{ block.super }}
{% endblock %}


{% block body_class %}layers{% endblock %}

{% block subheader %}
<section id="subheader">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>{{ resource.title|default:resource.typename }}</h2>
        <p>
				    {{ resource.service_type }}
				    {% if resource.category %}
					  {% trans "in" %} <a href="{% url "search" %}?category__identifier__in={{ resource.category.identifier }}">{{ resource.category }}</a> |
				    {% endif %}
					  {% if resource.date %}
					    {% if resource.date_type == 'creation' %} {% trans "Created on" %} {{ resource.date }}
					    {% elif resource.date_type == 'publication' %} {% trans "Published on" %} {{ resource.date }}
					    {% else %} {% trans "Updated on" %} {{ resource.date }}
						{% endif %}
					{% endif %}
				</p>
				{% block social_links %}
				{% if SOCIAL_BUTTONS %}
				{% include "social_links.html" %}
				{% endif %}
				{% endblock %}
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block body_outer %}
<div class="row">

  <!-- Map Here -->

  <div class="col-md-8">
    <div id="embedded_map" class="mrg-btm">
      <div id="preview_map"></div>
    </div>

  <!-- End of Map -->






    <div class="layer-actions">
      {% include "_actions.html" %}
    </div>

    <div class="tab-content">

    <article id="info" class="tab-pane active">
    {% include "base/resourcebase_info_panel.html" %}
    </article>

     {% if resource.is_mosaic %}
      <article id="granules" class="description tab-pane {% if tab and tab == 'granules' %}active{% endif %}">
        <div class="paginate-contents">

            <form method="GET" action="{% url "layer_detail" resource.layer.service_typename %}">
                {% csrf_token %}
                <input type="text" id="filter" name="filter" style="witdh:400px"/>&nbsp;<input type="submit" value='{% trans "Filter Granules" %}'/>
                </br>
                {% if filter %}
                <strong>{% trans "Active Filter:" %}</strong> <em>{{ filter }}</em>
                {% endif %}
            </form>
            <table class="table table-striped table-bordered table-condensed">
              <thead>
                <tr>
                  <!-- th>{% trans "Granule ID" %}</th -->
                  <th>{% trans "Bounding Box" %} (minX,minY,maxX,maxY)</th>
                  <th>{% trans "Time" %}</th>
                  <!-- th>{% trans "Elevation" %}</th -->
                  <th>{% trans "Actions" %}</th>
                </tr>
              </thead>
              <tbody>
                {% autopaginate all_granules.features 10 %}
                {% for feature in granules.features %}
                  <tr>
                    <!-- td>{{ feature.id }}</td -->
                    <td><script language="Javascript">var bbox = JSON.parse('{{ feature.geometry.coordinates }}'); document.write('{{ granules.crs.properties.name }};' + bbox[0][0][0] + ',' + bbox[0][0][1] + ',' + bbox[0][2][0] + ',' + bbox[0][2][1]);</script></td>
                    <td>{% if feature.properties.time %}{{ feature.properties.time }}{% endif %}</td>
                    <!-- td>{% if feature.properties.elevation %}{{ feature.properties.elevation }}{% endif %}</td -->
                    <td>
                        <a class="btn btn-xs" href="#" onclick="doPreview('{{ resource.service_typename }}', '{{ feature.id }}', '{{ granules.crs.properties.name }}', '{{ feature.geometry.coordinates }}', {% if feature.properties.time %}'{{ feature.properties.time }}'{% else %}null{% endif %});"><img alt="Granule Preview" title="Granule Preview" src="/static/lib/img/map_go.png"/></a>
                        <a class="btn btn-xs" href="{% url "layer_granule_remove" feature.id resource.service_typename %}"><img alt="Granule Remove" title="Granule Remove" src="/static/lib/img/cancel-on.png"/></a>
                        <script language="Javascript">
                            function doPreview(layer_name, feature_id, srs, the_geom, time) {
                                var map = app.mapPanel.map;
                                for (var ll = 0; ll < app.map.layers.length; ll++) {
                                    var layer = app.map.layers[ll];
                                    if (layer.name == layer_name) {
                                        if (time) {
                                            var re = new RegExp("(\\+[0-9]{4})", "gm");
                                            var timePosition = time;
                                            if (re.test(time)) timePosition = time.replace(re, 'Z');
                                            map.layers[ll].mergeNewParams({"TIME" : timePosition, "CQL_FILTER" : "IN ('" + feature_id + "')"});
                                        }
                                        else {
                                            map.layers[ll].mergeNewParams({"CQL_FILTER" : "IN ('" + feature_id + "')"});
                                        }

                                        map.layers[ll].addOptions({
                                            singleTile: true
                                        });

                                        bbox = JSON.parse(the_geom);
                                        bbox = new OpenLayers.Bounds(bbox[0][0][0],bbox[0][0][1],bbox[0][2][0],bbox[0][2][1]).transform(srs, map.projection);

                                        //map.maxExtent = bbox;
                                        //map.restrictedExtent = bbox;
                                        map.maxExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
                                        map.restrictedExtent = map.maxExtent;

                                        map.zoomToExtent(bbox);
                                    }
                                }
                            }
                        </script>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
        </div>
        {% paginate %}
      </article>
     {% endif %}

          <article id="attributes" class="tab-pane">
        {% if resource.is_mosaic %}
            <table class="table table-striped table-bordered table-condensed">
              <thead>
                <tr>
                  <th>{% trans "Dimension" %}</th>
                  <th>{% trans "Enabled" %}</th>
                  <th>{% trans "Regex" %}</th>
                </tr>
              </thead>
              <tbody>
                  <tr>
                    <td title="TIME">{% trans "TIME" %}</td>
                    <td>{% if resource.has_time %}{% trans "True" %}{% else %}{% trans "False" %}{% endif %}</td>
                    <td>{% if resource.time_regex %}{{ resource.time_regex }}{% else %}&nbsp;{% endif %}</td>
                  </tr>
                  <!-- tr>
                    <td title="ELEVATION">{% trans "ELEVATION" %}</td>
                    <td>{% if resource.has_elevation %}{% trans "True" %}{% else %}{% trans "False" %}{% endif %}</td>
                    <td>{% if resource.elevation_regex %}{{ resource.elevation_regex }}{% else %}&nbsp;{% endif %}</td>
                  </tr -->
              </tbody>
            </table>
        {% endif %}
        {% if resource.attribute_set.all %}
            <table class="table table-striped table-bordered table-condensed">
              <thead>
                <tr>
                  <th>{% trans "Attribute Name" %}</th>
                  <th>{% trans "Label" %}</th>
                  <th>{% trans "Description" %}</th>
                  {% if wps_enabled %}
                    <th>{% trans "Range" %}</th>
                    <th>{% trans "Average" %}</th>
                    <th>{% trans "Median" %}</th>
                    <th>{% trans "Standard Deviation" %}</th>
                  {% endif %}
                </tr>
              </thead>
              <tbody>
                {% for attribute in resource.attributes %}
                  <tr>
                    <td {% if attribute.attribute_label and attribute.attribute_label != attribute.attribute %}title="{{ attribute.attribute }}"{% endif %}>{{ attribute }}</td>
                    <td>{{ attribute.attribute_label|default:"" }}</td>
                    <td>{{ attribute.description|default:"" }}</td>
                    {% if wps_enabled %}
                      {% if attribute.unique_values == "NA" %}
                      <td>{{ attribute.unique_values }}</td>
                      {% else %}
                      <td>
                        <select name="unique_values">
                        {% for value in attribute.unique_values_as_list %}
                          <option value="{{ value }}">{{ value }}</option>
                        {% endfor %}
                        </select>
                      </td>
                      {% endif %}
                      <td>{{ attribute.average|floatformat:"2" }}</td>
                      <td>{{ attribute.median|floatformat:"2" }}</td>
                      <td>{{ attribute.stddev|floatformat:"2" }}</td>
                    {% endif %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
        {% endif %}
      </article>

      <article id="comments" class="tab-pane">
        {% with resource as obj %}
          {% include "_comments.html" %}
        {% endwith %}
      </article>

      {% if GEOGIG_ENABLED and resource.link_set.geogig %}
        {% with "_geogig_layer_detail.html" as geogig_template %}
        <article id="geogig" class="tab-pane">
          {% with resource as obj %}
            {% include geogig_template %}
          {% endwith %}
        </article>
        {% endwith %}
      {% endif %}

      <article id="rate" class="tab-pane">
        <!-- TODO: Move this to a reusable template snippet -->
        {% if request.user.is_authenticated %}
        <h4>{% trans "Rate this layer" %}</h4>
        {% user_rating request.user resource "layer" as user_layer_rating %}
        <div id="user_rating" class="category-layer" data-score="{{ user_layer_rating }}"></div>
        {% endif %}
        <h4>{% trans 'Average Rating' %}</h4>
        {% overall_rating resource "layer" as layer_rating %}
        {% num_ratings resource as num_votes %}
        <div class="overall_rating" data-score="{{ layer_rating }}"></div> ({{num_votes}})
      </article>

    </div>

  </div>

  <div class="col-md-4">

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              A Layer Graph
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <img class="img-responsive" src="https://raw.githubusercontent.com/d3/d3-hexbin/master/img/color.jpg">
            <small>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</small>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Another Layer Graph
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            <small>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</small>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              <i class="fa fa-plus"></i> Create graph
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <div class="panel-body">
            <form>
              <div class="form-group">
                <label for="exampleInputEmail1">Category</label>
                <select class="form-control">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Quantity</label>
                <select class="form-control">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Type</label>
                <select class="form-control">
                  <option>Pie Chart</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Aggregation</label>
                <select class="form-control">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
              <button type="submit" class="btn btn-default">Create Graph</button>
              <button type="submit" class="btn btn-default">Save Chart</button>
            </form>
          </div>
        </div>
      </div>

    <ul class="list-group">
      {% if resource.storeType != "remoteStore" %}
        <li class="list-group-item">
        {% if links or links_download %}
           <button class="btn btn-primary btn-md btn-block" data-toggle="modal" data-target="#download-layer">{% trans "Download Layer" %}</button>
        {% else %}
          {% if request.user.is_authenticated %}
          <button class="btn btn-primary btn-md btn-block" id="request-download">{% trans "Request Download" %}</button>
          {% endif %}
        {% endif %}
        </li>
      {% endif %}
    <div class="modal fade" id="download-layer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">{% trans "Download Layer" %}</h4>
          </div>
          <div class="modal-body">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    {% if links %}
                    <li class="active"><a href="#download_tab1" data-toggle="tab">Images</a></li>
                    {% endif %}
                    {% if links_download %}
                    <li><a href="#download_tab2" data-toggle="tab">Data</a></li>
                    {% endif %}
                </ul>
                <div class="tab-content">
                {% if links %}
                    <div class="tab-pane active" id="download_tab1">
                        <li class="active">
                            <ul>
                              {% for link in links %}
                              <li><a href="{{ link.url }}" target="_blank">{% trans link.name %}</a></li>
                              {% endfor %}
                            </ul>
                        </li>
                    </div>
                {% endif %}
                {% if links_download %}
                    <div class="tab-pane" id="download_tab2">
                        <li>
                            <ul>
                              {% for link in links_download %}
                              <li><a href="{{ link.url }}" target="_blank">{% trans link.name %}</a></li>
                              {% endfor %}
                            </ul>
                        </li>
                    </div>
                {% endif %}
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
          </div>
        </div>
      </div>
    </div>

    {% if GEOSERVER_BASE_URL %}
      {% get_obj_perms request.user for resource.layer as "layer_perms" %}
    {% endif %}

    <li class="list-group-item">
      <a href="{% url "layer_metadata_detail" resource.typename %}">
        <button class="btn btn-primary btn-md btn-block">{% trans "Metadata Detail" %}</button>
      </a>
    </li>

    {% if "change_resourcebase_metadata" in perms_list or "change_resourcebase" in perms_list or "delete_resourcebase" in perms_list or "change_layer_style" in layer_perms %}
    <li class="list-group-item">
      <button class="btn btn-primary btn-md btn-block" data-toggle="modal" data-target="#edit-layer">{% trans "Edit Layer" %}</button>
    </li>
    <div class="modal fade" id="edit-layer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">{% trans "Edit Layer" %}</h4>
          </div>
          <div class="modal-body">
            <div class="row edit-modal">
              {% if "change_resourcebase_metadata" in perms_list %}
              <div class="col-sm-3">
                <i class="fa fa-list-alt fa-3x"></i>
                <h4>{% trans "Metadata" %}</h4>
                <a class="btn btn-default btn-block btn-xs" href="{% url "layer_metadata" resource.service_typename %}">{% trans "Edit" %}</a>
              </div>
              {% endif %}
              {% if GEOSERVER_BASE_URL and not resource.service %}
                {% if "change_layer_style" in layer_perms %}
                <div class="col-sm-3">
                  <i class="fa fa-tint fa-3x"></i>
                  <h4>{% trans "Styles" %}</h4>
                  {% if preview == 'geoext' %}
                  <a class="btn btn-default btn-block btn-xs style-edit" data-dismiss="modal" href="#">{% trans "Edit" %}</a>
                  <a class="btn btn-default btn-block btn-xs" href="{% url "layer_style_manage" resource.service_typename %}">{% trans "Manage" %}</a>
                  {% endif %}
                </div>
                {% endif %}
              {% endif %}
              {% if "change_resourcebase" in perms_list %}
              <div class="col-sm-3">
                <i class="fa fa-photo fa-3x"></i>
                <h4>{% trans "Thumbnail" %}</h4>
                <a class="btn btn-default btn-block btn-xs" href="#" id="set_thumbnail">{% trans "Set" %}</a>
              </div>
              {% endif %}
              {% if "change_resourcebase" in perms_list or "delete_resourcebase" in perms_list or "change_layer_data" in layer_perms %}
              <div class="col-sm-3">
                <i class="fa fa-square-o fa-3x rotate-45"></i>
                <h4>{% trans "Layer" %}</h4>
                {% if "change_resourcebase" in perms_list and not resource.service %}
                <a class="btn btn-default btn-block btn-xs" href="{% url "layer_replace" resource.service_typename %}">{% trans "Replace" %}</a>
                {% endif %}
                {% if resource.storeType == 'dataStore' and "change_layer_data" in layer_perms %}
                <a class="btn btn-default btn-block btn-xs" href="{% url "new_map" %}?layer={{resource.service_typename}}">{% trans "Edit data" %}</a>
                {% endif %}
                {% if "delete_resourcebase" in perms_list %}
                <a class="btn btn-danger btn-block btn-xs" href="{% url "layer_remove" resource.service_typename %}">{% trans "Remove" %}</a>
                {% endif %}
              </div>
              {% endif %}
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    <li class="list-group-item">
      <button class="btn btn-default btn-md btn-block" data-toggle="modal" data-target="#download-metadata">{% trans "Download Metadata" %}</button>
    </li>

    <div class="modal fade" id="download-metadata" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">{% trans "Download Metadata" %}</h4>
          </div>
          <div class="modal-body">
		    <div style="margin-bottom:20px">
				 <h5 class="modal-title" id="myModalLabel">
				Full metadata
				 </h5>
                 <ul>
 					<li><a target="_blank" href="../catalogue/csw_to_extra_format/{{resource.uuid}}/{{resource.title}}.txt"> Text format </a></li>
 					<li><a target="_blank" href="../catalogue/csw_to_extra_format/{{resource.uuid}}/{{resource.title}}.html"> HTML format </a></li>
 				</ul>
			</div>
		    <div style="margin-bottom:20px">
			<h5 class="modal-title" id="myModalLabel">
			Standard Metadata - XML format
			</h5>
            <ul>
              {% for link in metadata %}
                <li><a href="{{ link.url }}" target="_blank">{{ link.name }}</a></li>
              {% endfor %}
            <ul>
            </div>
            {% if resource.storeType == 'dataStore' %}
            <h5 class="modal-title" id="myModalLabel">Attribute Information</h5>
            <ul>
              <li><a href="{{ resource.get_absolute_url }}/feature_catalogue" target="_blank">ISO Feature Catalogue</a></li>
            <ul>
            {% endif %}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
          </div>
        </div>
      </div>
    </div>

    {% if resource.get_legend %}
    <li class="list-group-item">
      <h4 class="list-group-item-heading">{%trans "Legend" %}</h4>
      <p>{{ style.sld_title }}</p>
      {% if resource.get_legend.link_type == 'image' %}
        {% if request.user.is_authenticated and 'access_token' in request.session %}
            <p><img id="legend_icon" src="{{ resource.get_legend.url }}&access_token={{ request.session.access_token }}"></p>
        {% else %}
            <p><img id="legend_icon" src="{{ resource.get_legend.url }}"></p>
        {% endif %}
      {% else %}
      <div id='legend_placeholder'></div>
      {% endif %}
    </li>
    {% endif %}
    <li class="list-group-item">
      <h4>{% trans "Maps using this layer" %}</h4>
      {% if resource.maps %}
        <p>{% trans "List of maps using this layer:" %}</p>
        {% endif %}
        <ul class="list-unstyled">
          {% for maplayer in resource.maps %}
            <li><a href="{{ maplayer.map.get_absolute_url }}">{{ maplayer.map.title }}</a></li>
          {% empty %}
            <li>{% trans "This layer is not currently used in any maps." %}</li>
          {% endfor %}
        </ul>
    </li>
    <li class="list-group-item">
      <h4>{% trans "Create a map using this layer" %}</h4>
      <p>{% trans "Click the button below to generate a new map based on this layer." %}</p>
        <a href="{% url "new_map" %}?layer={{resource.service_typename}}" class="btn btn-primary btn-block">{% trans "Create a Map" %}</a>
    </li>

    {% if documents.count > 0 %}
    <li class="list-group-item">
      <h4>{% trans "Documents related to this layer" %}</h4>
      <p>{% trans "List of documents related to this layer:" %}</p>
      <ul class="list-unstyled">
        {% for document in documents %}
          <li><a href="{{ document.get_absolute_url }}">{{ document.title }}</a></li>
        {% endfor %}
      </ul>
    </li>
    {% endif %}

    {% if user.is_authenticated %}
    <li class="list-group-item">
      <h4>{% trans "Styles" %}</h4>
       <p>{% trans "The following styles are associated with this layer. Choose a style to view it in the preview map." %}</p>
       <ul class="list-unstyled">
        {% for style in resource.styles.all %}
        <li>
          {% if resource.default_style == style %}
          <input type="radio" checked name="style" id="{{ style.name }}" value="{{ style.title }}"/>
          (default style)
          {% else %}
          <input type="radio" name="style" id="{{ style.name }}" value="{{ style.title }}"/>
          {% endif %}
          <a href="{{ GEOSERVER_BASE_URL }}{{ style.absolute_url }}" >{{ style.sld_title }}</a>
        </li>
        {% empty %}
        <li>{% trans "No styles associated with this layer" %}</li>
        {% endfor %}
      </ul>
    </li>
    {% endif %}

    {% if GEONODE_SECURITY_ENABLED %}
    {% if "change_resourcebase_permissions" in perms_list %}
    <li class="list-group-item">
      <h4>{% trans "Permissions" %}</h4>
      <p>{% trans "Click the button below to change the permissions of this layer." %}</p>
      <p><a href="#modal_perms" data-toggle="modal" class="btn btn-primary btn-block" data-target="#_permissions">{% trans "Change Layer Permissions" %}</a></p>
    </li>
    {% endif %}
    {% endif %}

    {% if resource.storeType == "remoteStore" %}
    <li class="list-group-item">
            <h4>{% trans "External service layer" %}</h4>
            <div>{% trans "Source" %}: <a href="/services/{{resource.service.id}}">{{ resource.service.title }}</a></div>
            <div>{% trans "Type" %}: {{ resource.service.type }}</div>
    </li>
    {% endif %}

    {% include "base/_resourcebase_contact_snippet.html" %}
  </ul>


  {% if GEONODE_SECURITY_ENABLED %}
    {% include "_permissions_form.html" %}
  {% endif %}

  </div> <!-- col-md-4 -->
</div> <!-- row -->
{% endblock %}

{% block extra_script %}

    {% if GEOGIG_ENABLED and resource.link_set.geogig %}
        {% with "_geogig_scripts.html" as geogig_scripts_template %}
            {% include  geogig_scripts_template %}
        {% endwith %}
    {% endif %}

    {% if request.user.is_authenticated %}
        {% user_rating_js request.user resource "layer" %}
    {% else %}
      {% overall_rating resource 'layer' as the_layer_rating %}
    {% endif %}
    {% include 'rating.html' %}
    {% include 'request_download.html' %}
    <script type="text/javascript">
       $("#comment_submit_btn").click(function(event) {
            $.ajax({
              type: "POST",
              url: $("#form_post_comment").attr('action'),
              data: $("#form_post_comment").serialize(),
              success: function() {
                $('#form_post_comment_div').modal().find('form')[0].reset();
                $('#form_post_comment_div').modal('hide');
                $('#comments_section').load(window.location.pathname + ' #comments_section',
                		function(){$(this).children().unwrap()})
              }
            });
            return false;
          });

    {% if resource.get_legend.link_type == 'json' %}
    $.getJSON('{{resource.get_legend_url}}', function (data) {
        var legend = data.layers[0].legend;
        var items = [];
        $.each(legend, function (key, dvalue) {
            items.push('<li><img src="data:image/png;base64,' + dvalue.imageData + '">'+dvalue.label+'</li>');
        });

        $('<ul/>', {
            'class': 'arcgis-legend',
            html: items.join('')

        }).appendTo('#legend_placeholder');

    });
    {% endif %}
    </script>
    <script type="text/javascript">
      $('#set_thumbnail').click(function(){
        createMapThumbnail();
        $('#edit-layer').modal('toggle');
      });
    </script>
    {% if GEONODE_SECURITY_ENABLED %}
    {% include "_permissions_form_js.html" %}
    {% endif %}
{% endblock extra_script %}