{% extends 'yplaces/base.html' %}

{% load i18n %}

{% load staticfiles %}

{% block title %}{{ title }}{% endblock %}

{% block head %}
  <link href="{% static 'yplaces/css/edit.css' %}" rel="stylesheet">
{% endblock %}

{% block body %}

<div class="details round-border-shadow">    
  <h1 style="margin: 0;">
    {{ title }}
  </h1>
  {% if place %}
    <span style="font-size: 14px;">
      <a href="{% url 'yplaces:slug' pk=place.pk slug=place.name|slugify %}">{% trans 'Back to Place' %}</a>
    </span>
  {% endif %}
  <form data-validate="salsa" style="margin-top: 30px;">
    {% if request.user.is_staff %}
      <div class="form-group">
        <div class="checkbox">
          <label>
            <input id="active" type="checkbox" {% if place.active %}checked{% endif %}> Active
          </label>
        </div>
      </div>
    {% endif %}
    <div id="messages"></div>
    <div class="form-group">
      <label for="name">{% trans 'Name' %}</label>
      <input type="text" class="form-control" id="name" value="{{ place.name }}" data-required="true">
    </div>
    <div class="form-group">
      <label for="address">{% trans 'Address' %}</label>
      <input type="text" class="form-control" id="address" value="{{ place.address }}" data-required="true">
    </div>
    <div class="form-group">
      <div class="row">
        <div class="col-xs-6">
          <label for="postal_code">{% trans 'Postal Code' %}</label>
          <input type="text" class="form-control" id="postal_code" value="{{ place.postal_code }}" data-required="true">
        </div>
        <div class="col-xs-6">
          <label for="city">{% trans 'City' %}</label>
          <input type="text" class="form-control" id="city" value="{{ place.city }}" data-required="true">
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="row">
        <div class="col-xs-6">
          <label for="state">{% trans 'State' %}</label>
          <input type="text" class="form-control" id="state" value="{{ place.state }}" data-required="true">
        </div>
        <div class="col-xs-6">
          <label for="country">{% trans 'Country' %}</label>
          <input type="text" class="form-control" id="country" value="{{ place.country }}" data-required="true">
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="map">
        {% trans 'Exact Location' %}
        {% if action == 'PUT' %}
          <br>
          <span class="btn btn-default btn-xs" id="search-address">
            <i class="fa fa-search"></i>
            {% trans 'Locate Address' %}
          </span>
        {% endif %}
      </label>
      <div id="map-messages"></div>
      <input type="hidden" class="form-control" id="latitude" value="{{ place.latitude|stringformat:'f' }}">
      <input type="hidden" class="form-control" id="longitude" value="{{ place.longitude|stringformat:'f' }}">
      <div id="map">
        <i class="fa fa-map-marker fa-5x"></i>
        <br>
        {% trans 'Loading Map' %}
        <br>
        <img src="{% static 'yplaces/images/ajax-loader-16x16.gif' %}">
      </div>
    </div>
    <br>
    <h3 style="margin: 0 0 20px 0; border-bottom: 1px solid #ccc;">{% trans 'Optional Fields' %}</h3>
    <div class="form-group">
      <div class="row">
        <div class="col-xs-6">
          <label for="phone_number" style="font-weight: normal;">{% trans 'Phone Number' %}</label>
          <input type="text" class="form-control" id="phone_number" value="{{ place.phone_number }}">
        </div>
        <div class="col-xs-6">
          <label for="email" style="font-weight: normal;">{% trans 'Email' %}</label>
          <input type="email" class="form-control" id="email" value="{{ place.email }}">
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="website" style="font-weight: normal;">{% trans 'Website URL' %}</label>
      <input type="text" class="form-control" id="website" value="{{ place.website }}">
    </div>
  </form>
  <br>
  <button id="submit" class="btn btn-primary">{% trans 'Submit' %}</button>
</div>

{% endblock %}

{% block javascript %}
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="{% static 'yplaces/js/edit.js' %}"></script>
  <script>
      /*
       * Assorted variables.
       */
      var map;
      var marker;
      var geocoder = new google.maps.Geocoder();
      var api_url = '{{ api_url }}';
      var action = '{{ action }}';
      var next = '{{ next }}';

      /*
       * What to do after page finishes loading.
       */
      $(document).ready(function() {

          // Initialize form.
          initializeForm();

          // a) We have lat/lon info about the Place, use it.
          // b) We don't have info, fetch user's location based on the IP address and initialize map.
          if($('#latitude').val() != '' && $('#longitude').val() != '') {
              initializeMap($('#latitude').val(), $('#longitude').val(), false);
          } else {
              $.getJSON('http://www.openlinkmap.org/api/ippos.php?format=json&callback=?', function(data, status, xhr) {
                  initializeMap(data.lat, data.lon, true);
              });
          }
      });
  </script>
{% endblock %}