{% extends "maps/map_base.html" %}
{% load geonode_auth %}
{% load i18n %}
{% load dialogos_tags %}
{% load agon_ratings_tags %}
{% load url from future %}
{% load base_tags %}

{% block title %}{{ map.title }} — {{ block.super }}{% endblock %}

{% block head %}
{% include "maps/map_include.html" %}
{{ block.super }}
{% endblock %}

{% block body_class %}maps{% endblock %}

{% block body_outer %}
  {% overall_rating map "map" as map_rating %}
  <div class="span6">
    <h2 class="page-title">{{ map.title }}</h2>
  </div>
  <div class="span6 action-group pull-right">
    <div class="btn-group pull-right">
      <div class="btn-group">
        <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
          {% trans "Download Map" %}
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="{% url "map_download" map.pk %}">{% trans "Download Data Layers" %} <i class="icon-chevron-right"></i></a></li>
            <li><a href="{% url "map_wmc" map.pk %}" target="_new">{% trans "Download Web Map Context" %} <i class="icon-chevron-right"></i></a></li>
        </ul>
      </div>

      {% has_obj_perm user map "maps.change_map" as can_edit_map %}
      {% if can_edit_map %}
      <div class="btn-group">
        <a class="btn btn-large btn-info dropdown-toggle" data-toggle="dropdown" href="#">
          {% trans "Edit Map" %}
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="{% url "map_metadata" map.id %}">{% trans "Edit Map Metadata" %} <i class="icon-chevron-right"></i></a></li>
          {% if PRINTNG_ENABLED %}
          <li><a href="#" id="set_thumbnail">{% trans "Set Map Thumbnail" %} <i class="icon-chevron-right"></i></a></li>
          {% endif %}
          <li><a href="#modal_perms" data-toggle="modal">{% trans "Edit Map Permissions" %} <i class="icon-chevron-right"></i></a></li>
          <li><a href="{% url "map_remove" map.id %}">{% trans "Remove this Map" %} <i class="icon-chevron-right"></i></a></li>
        </ul>
      </div>
      {% endif %}
      <div class="btn-group">
        <a href="{% url "map_view" map.id %}" class="btn btn-large">{% trans "View Map" %}</a>
      </div>
      {% comment %}
      <div class="btn-group">
        <a href="#" class="btn btn-large btn-info strong"><i class="icon-print icon-white"></i> {% trans "Print Map" %}</a>
      </div>
      {% endcomment %}
    </div>
  </div>
  <div class="span12">
	  <div id="embedded_map" class="mrg-btm">
        <div id="the_map" width='100%'></div>
    </div>
  </div>

  <div class="span8">
    <div class="map-actions">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#info" data-toggle="tab"><i class="icon-info-sign"></i>{% trans "Info" %}</a></li>
        <li><a href="#share" data-toggle="tab"><i class="icon-share"></i>{% trans "Share" %}</a></li>
        <li><a href="#rate" data-toggle="tab"><i class="icon-star"></i>{% trans "Ratings" %}</a></li>
        <li><a href="#comments" data-toggle="tab"><i class="icon-comment"></i> {% trans "Comments" %}</a></li>
        <!-- li><a href="#flag" data-toggle="tab"><i class="icon-flag"></i>{% trans "Flag" %}</a></li -->
      </ul>
    </div>
    <div class="tab-content">

      {% include "base/resourcebase_info_panel.html" with resourcebase=map %}

      <article class="tab-pane" id="comments">
    	{% with map as obj %}
      	{% include "_comments.html" %}
    	{% endwith %}
      </article>
      <article class="tab-pane" id="rate">
        <!-- TODO: Move this to a reusable template snippet -->
        {% if request.user.is_authenticated %}
        <h3>{% trans "Rate this Map" %}</h3>
        {% user_rating request.user map "map" as user_map_rating %}
        <div id="user_rating" class="category-map"></div>
        {% endif %}
        <h3>{% trans 'Average Rating' %}</h3>
        {% overall_rating map "map" as map_rating %}
        {% num_ratings map as num_votes %}
        <div class="overall_rating" style="float:left" data-rating="{{ map_rating }}"></div> ({{num_votes}})
        <!-- TODO: Add display of who gave what rating based -->
      </article>
      {% block social_links %}
      {% include "social_links.html" %}
      {% endblock %}
        <!--article class="tab-pane" id="flag">
        <h2>{% trans "Flag" %}</h2>
      </article-->
    </div>
  </div>
  <aside class="span4">
    <div class='well'>
        <h2>{% trans "Map Layers" %}</h2>
        <p>{% trans "This map uses the following layers:" %}</p>
        <ul class="unstyled space">
          {% for layer in map.layer_set.all %}
	    {% ifnotequal layer.group 'background' %}
		{% if layer.local %}
        	    <li><a href="{% url "layer_detail" layer.name %}">{{ layer.layer_title }}</a></li>
		{% else %}
        	    <li>{{ layer.layer_title }}</li>
		{% endif %}
	    {% endifnotequal %}
          {% endfor %}
        </ul>
    </div>
    {% if documents.count > 0 %}
    <div class="well">
        <h2>{% trans "Documents related to this map" %}</h2>
        <p>{% trans "List of documents related to this map:" %}</p>
        <ul class="unstyled space">
          {% for document in documents %} 
            <li><a href="{{ document.get_absolute_url }}">{{ document.title }}</a></li>
          {% endfor %}
        </ul>
    </div>
    {% endif %}
      {% has_obj_perm user map "maps.change_map_permissions" as can_change_permissions %}
      {% if can_change_permissions %}
    <div class='well'>
        <h2>{% trans "Permissions" %}</h2>
        <p>{% trans "Specify which users can view or modify this map" %}</p>
        <a href="#modal_perms" data-toggle="modal" class="btn btn-large">{% trans "Change Permissions of this Map" %}</a>
    </div>
      {% endif %}
    <div class='well'>
        <h2>{% trans "Copy this map" %}</h2>
        <p>{% trans "Duplicate this map and modify it for your own purposes" %}</p>
        <a href="{% url "new_map" %}?copy={{ map.id }}" class="btn btn-large">{% trans "Create a New Map" %}</a>
    </div>

    {% if map.is_public and can_edit_map or map.layer_group %}
    <div class='well layer-group'>
      <h2>{% trans "Map WMS" %}</h2>
      <dl>{% if map.layer_group %}
        <dt>{% trans "WMS layer group for local map layers" %}:</dt>
        <dd><em>{{ map.layer_group.name }}</em> ({% trans "on" %} <a href="{{ ows }}?service=WMS&request=GetCapabilities">{% trans "local OWS" %}</a>)</dd>
      {% endif %}</dl>
      {% if can_edit_map %}
      <p>{% trans "Publish local map layers as WMS layer group" %}</p>
      <a href="{%url "map_wms" map.id %}" class="btn btn-large">{% trans "Publish Map WMS" %}</a>
      {% endif %}
    </div>
    {% endif %}

    <div class="well last">
    <h2>{% trans "About" %}</h2>
    <p>{% trans "Map Owner" %}</p>
      {% with map.owner.profile as profile %}
        {% include "people/_profile_about_item.html" %} 
      {% endwith %}
      <p>{% trans "Point of Contact" %}</p>
      {% with map.poc as profile %}
        {% include "people/_profile_about_item.html" %}
      {% endwith %}
      <p>{% trans "Metadata Author" %}</p>
      {% with map.metadata_author as profile %}
        {% include "people/_profile_about_item.html" %}
      {% endwith %}
    </div>
  </aside>
  {% include "_permissions_form.html" %}
{% endblock %}

{% block extra_script %}
{% if SOCIAL_BUTTONS %}
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{% endif %}
{% if request.user.is_authenticated %}
      {% user_rating_js request.user map "map" %}
{% else %}
      {% overall_rating map "map" as the_map_rating %}
{% endif %}
<script type="text/javascript" src="{{ STATIC_URL}}geonode/js/thumbnail/map_thumbnail.js"></script>
<script type="text/javascript">
 $(function() {
   $('.overall_rating').raty({
     half: true,
     readOnly: true,
     start: $('div.overall_rating').data('rating'),
     path: "{{ STATIC_URL }}lib/img/"
     {% if not request.user.is_authenticated %},
     score: {{ the_map_rating }}
     {% endif %}
   });
   $("#rate-map").raty();

  {% verbatim %}
  // Publish layer group
  // TODO: this should really not be inside a script tag...
  var $wmsBtn = $(".layer-group .btn"),
      layerGroupElTpl;

  if ($wmsBtn.length > 0) {

    $wmsBtn.on("click", function(event) {
      event.preventDefault();

      $.ajax({
        type: "PUT",
        url: $wmsBtn.attr("href")
      })

        .done(function(data) {
          layerGroupElTpl = "<dt>WMS layer group for local map layers:</dt> \
            <dd><em>{{layerGroupName}}</em> (on <a href='{{ows}}?request=GetCapabilities'>local OWS</a>)</dd>";
          $.each(data, function(key, value) {
            // client-side template hack
            layerGroupElTpl = layerGroupElTpl.replace("{{"+ key + "}}", value);
          });
        })

        .fail(function(){
          layerGroupElTpl = "<dt>Error:</dt> \
            <dd>Layer group could not be created.</dd>";
        })

        .always(function(){
          $(".layer-group dl").html(layerGroupElTpl);
        });

    });
  };
  {% endverbatim %}


 });
{% if SOCIAL_BUTTONS %}
 (function() {
   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
{% endif %}
  $("#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('hide');
        $('#comments_section').load(window.location.pathname + ' #comments_section', 
        		function(){$(this).children().unwrap()})
      }
    });
    return false;
  });

{% if PRINTNG_ENABLED %}
  $('#set_thumbnail').click(function(){
    return createMapThumbnail();
  });
{% endif %}
 
</script>
{% include "_permissions_form_js.html" %}
{% endblock %}
