{% extends "base.html" %}
{% load i18n %}

{% block head_title%}{% trans "New place" %} - {% trans "Ararteko maps" %}{% endblock %}

{% block extraheader %}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var marker;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var lat = document.getElementById("flat").value
    var lon = document.getElementById("flon").value
    var latlng = new google.maps.LatLng(lat, lon);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
              map: map,
              position: latlng,
              draggable: true
          });

    google.maps.event.addListener(marker, "dragend", function(event) {
        var latlon = marker.getPosition();
          document.getElementById("flat").value=Math.round(latlon.lat()*10000000000)/10000000000;
          document.getElementById("flon").value=Math.round(latlon.lng()*10000000000)/10000000000;
    });

    google.maps.event.addListener(map, "click", function(event) {
        var latlon = event.latLng;
          document.getElementById("flat").value=Math.round(latlon.lat()*10000000000)/10000000000;
          document.getElementById("flon").value=Math.round(latlon.lng()*10000000000)/10000000000;
        marker.setPosition(latlon);
        });
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          latlon = results[0].geometry.location;
          map.setCenter(latlon);
          map.setZoom(16);
          document.getElementById("flat").value=Math.round(latlon.lat()*10000000000)/10000000000;
          document.getElementById("flon").value=Math.round(latlon.lng()*10000000000)/10000000000;
          marker.setPosition(latlon);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
</script>
{% endblock %}

{% block main_content %}

<h1>{% trans "New place" %}</h1>

<form method="post" action="{% url 'new_place' %}" enctype="multipart/form-data" id="placeform">
    {% csrf_token %}
    <table>
      <tr>
        <td>{{form.name.errors}}<label for="{{form.name.id_for_label}}">{{form.name.label}}</label> {{form.name}}<span class="required">{% trans 'Required' %}</span></td>
      </tr>
      <tr>
        <td>{{form.category.errors}}<label for="{{form.category.id_for_label}}">{{form.category.label}}</label> {{form.category}}<span class="required">{% trans 'Required' %}</span>
        <br/><span class="helptext">{{form.category.help_text}}</span></td>
      </tr>
      <tr>
        <td><label>{% trans 'Description' %}</label>
          <textarea name="{{form.description_eu.name}}" placeholder="{% trans 'Description [eu]' %}" rows="10" cols="28">{{form.description_eu.value|default:""}}</textarea>
          <textarea name="{{form.description_es.name}}" placeholder="{% trans 'Description [es]' %}" rows="10" cols="28">{{form.description_es.value|default:""}}</textarea>
          <textarea name="{{form.description_en.name}}" placeholder="{% trans 'Description [en]' %}" rows="10" cols="28">{{form.description_en.value|default:""}}</textarea><br/>
          <span class="helptext">{{form.description_es.help_text}}</span>
        </td>
      </tr>
      <tr>
        <td>{{form.address1.errors}}<label for="{{form.address1.id_for_label}}">{{form.address1.label}}</label> {{form.address1}}<span class="required">{% trans 'Required' %}</span>
        <br/><span class="helptext">{{form.address1.help_text}}</span><br/>
        <label for="{{form.address2.id_for_label}}">&nbsp;</label>{{form.address2}}
        <br/><span class="helptext">{{form.address2.help_text}}</span>
        </td>
      </tr>
      <tr>
        <td><label for="{{form.postalcode.id_for_label}}">{{form.postalcode.label}}</label> {{form.postalcode}}
        <br/><span class="helptext">{{form.postalcode.help_text}}</span></td>
      </tr>
      <tr>
        <td>{{form.city.errors}}<label for="{{form.city.id_for_label}}">{{form.city.label}}</label> {{form.city}}<span class="required">{% trans 'Required' %}</span>
        <br/><span class="helptext">{{form.city.help_text}}</span></td>
      </tr>
      <tr>
        <td><label for="{{form.locality.id_for_label}}">{{form.locality.label}}</label> {{form.locality}}
        <br/><span class="helptext">{{form.locality.help_text}}</span></td>
      </tr>
      <tr>
        <td><label for="{{form.source_id.id_for_label}}">{{form.source_id.label}}</label> {{form.source_id}}
        <br/><span class="helptext">{{form.source_id.help_text}}</span></td>
      </tr>
      <tr>
        <td>{{form.lon.errors}}<input type="hidden" name="{{form.lat.name}}" id="f{{form.lat.name}}" value="{{form.lat.value}}" />
            <input type="hidden" name="{{form.lon.name}}" id="f{{form.lon.name}}" value="{{form.lon.value}}" />
            <label for="address">&nbsp;</label>
            <input type="text" size="40" id="address" name="address" value="" />
            <input type="button" value="{% trans 'Search in Google' %}" onclick="codeAddress()"/><span class="required">{% trans 'Required' %}</span>
            <div id="map_container">
                <label for="map_canvas">&nbsp;</label>
                <div id="map_canvas" style="width: 500px; height: 300px">MAPA</div>
                <span class="helptext">{% trans 'Incluir la dirección completa del recurso para localizarlo en el mapa' %}</span>
            </div>
        </td>
      </tr>
      <tr>
        <td><label for="{{form.tlf.id_for_label}}">{{form.tlf.label}}{% if form.tlf.required %}<span class="required">*</span>{% endif %}</label> {{form.tlf}}
        <br/><span class="helptext">{{form.tlf.help_text}}</span></td>
      </tr>
      <tr>
        <td><label for="{{form.fax.id_for_label}}">{{form.fax.label}}{% if form.fax.required %}<span class="required">*</span>{% endif %}</label> {{form.fax}}
        <br/><span class="helptext">{{form.fax.help_text}}</span></td>
      </tr>
      <tr>
        <td><label for="{{form.url_name_eu.id_for_label}}">{{form.url_name_eu.label}}</label> {{form.url_name_eu}}
            <input type="text" placeholder="{{form.url_eu.help_text}}" name="{{form.url_eu.name}}" value="{{form.url_eu.value|default:''}}" />
        <br/><span class="helptext" for="{{form.url_name_eu.id_for_label}}">{{form.url_name_eu.help_text}}</span></td>
      </tr>
      <tr>
        <td><label for="{{form.url_name_es.id_for_label}}">{{form.url_name_es.label}}</label> {{form.url_name_es}}
            <input type="text" placeholder="{{form.url_es.help_text}}" name="{{form.url_es.name}}" value="{{form.url_es.value|default:''}}" />
        <br/><span class="helptext" for="{{form.url_name_es.id_for_label}}">{{form.url_name_es.help_text}}</span></td>
      </tr>
      <tr>
        <td><label for="{{form.url_name_en.id_for_label}}">{{form.url_name_en.label}}</label> {{form.url_name_en}}
            <input type="text" placeholder="{{form.url_en.help_text}}" name="{{form.url_en.name}}" value="{{form.url_en.value|default:''}}" />
        <br/><span class="helptext" for="{{form.url_name_en.id_for_label}}">{{form.url_name_en.help_text}}</span></td>
      </tr>
      <tr>
        <td><label for="{{form.email.id_for_label}}">{{form.email.label}}{% if form.email.required %}<span class="required">*</span>{% endif %}</label> {{form.email}}
        <br/><span class="helptext">{{form.email.help_text}}</span></td>
      </tr>
      <tr><td><hr></td></tr>
      <tr>
        <td><label for="{{form.aphysic.id_for_label}}">{{form.aphysic.label}}</label> {{form.aphysic}}</td>
      </tr>
      <tr>
        <td><label for="{{form.avisual.id_for_label}}">{{form.avisual.label}}</label> {{form.avisual}}</td>
      </tr>
      <tr>
        <td><label for="{{form.aaudio.id_for_label}}">{{form.aaudio.label}}</label> {{form.aaudio}}</td>
      </tr>
      <tr>
        <td><label for="{{form.aintelec.id_for_label}}">{{form.aintelec.label}}</label> {{form.aintelec}}</td>
      </tr>
      <tr>
        <td><label for="{{form.aorganic.id_for_label}}">{{form.aorganic.label}}</label> {{form.aorganic}}
        <br/><span class="helptext">{{form.aphysic.help_text}}</span></td>
      </tr>
      <tr>
        <td><label>{% trans 'Description' %}</label>
          <textarea name="{{form.adescription_eu.name}}" placeholder="{% trans 'Description [eu]' %}" rows="10" cols="28">{{form.adescription_eu.value|default:""}}</textarea>
          <textarea name="{{form.adescription_es.name}}" placeholder="{% trans 'Description [es]' %}" rows="10" cols="28">{{form.adescription_es.value|default:""}}</textarea>
          <textarea name="{{form.adescription_en.name}}" placeholder="{% trans 'Description [en]' %}" rows="10" cols="28">{{form.adescription_en.value|default:""}}</textarea><br/>
          <span class="helptext">{{form.adescription_es.help_text}}</span>
        </td>
      </tr>
      <tr><td><hr></td></tr>
      <tr>
        <td><label for="{{form.afileurl.id_for_label}}">{{form.afileurl.label}}</label> {{form.afileurl}}
        <br/><span class="helptext">{{form.afileurl.help_text}}</span></td>
      </tr>
      <tr>
        <td><label for="{{form.is_public.id_for_label}}">{{form.is_public.label}}</label> {{form.is_public}}
        <br/><span class="helptext">{{form.is_public.help_text}}</span></td>
      </tr>
      <tr>
        <td><label for="id_photo">{% trans 'Image' %}{% if form.photo.required %}<span class="required">*</span>{% endif %}</label> <input type="file" id="id_photo" name="photo"> <span class="helptext">{% trans 'Subir archivo jpg, png, gif con imagen del recurso' %}</span></td>
      </tr>
    </table>

    <input type="submit" value="{% trans "Save" %}" class="submit" />
</form>

{% endblock %}