{% extends "site_base.html" %}
{% load i18n %}
{% load leaflet_tags %}
{% load staticfiles %}


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

{% block openlayers %}

{% endblock %}

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

{% block body_outer %}
<div class="page-header">
  <h2>
    {% if geotiffname == 'ortho' %}
      Ortho Photos
    {% elif geotiffname == 'lidar' %}
      {% trans "DSM" %}
    {% endif %}
  </h2>
</div>
<div class="row">
  <div class="col-md-12">
    <article id="info">
      {% if geotiffname == 'ortho' %}
        <p>Les <strong>orthophotographies</strong> ou <strong>orthoimages</strong> sont des images aériennes ou satellitales de la surface terrestre rectifiées géométriquement et égalisées radiométriquement. Ces images se présentant sous forme de dalles couvrant une zone de la Terre peuvent être géoréférencées dans n'importe quel système de coordonnées. Elles servent de fonds cartographiques dans les Systèmes d'information géographique.</p>
      {% else %}
        <p>Un Modèle Numérique de Terrain (MNT) est une représentation 3D de la surface d'un terrain ou d'une planète, créée à partir des données d'altitude du terrain."</p>
      {% endif %}
      <p>Ces prises de vu sur Haiti ont été faites entre le 2014 et le 2016.</p>
      <p>Pour sélectionner la zone d’intérêt:</p>
      <ul>
        <li>Cliquer sur l'icône <img height="16" width="16" src="/static/img/polygon.png"> pour utiliser un polygone irrégulier</li>
        <li>Cliquer sur l'icône <img height="16" width="16" src="/static/img/square.png"> pour utiliser un rectangle comme forme de base</li>
      </ul>
      <p>Pour mieux comprendre comment sélectionner la zone d’intérêt, voir le <a href="/tutorials/#clip">tutoriel</a>.</p>
      <p>La taille maximale accepté est de 80 mégaoctets.</p>
    </article>
  </div>
</div>
<div id="download-clip-error-message" class="label label-danger" style="margin-bottom: 50px; display: none; font-size: 2em">Error message</div>
<div id="download-clip-map"></div>

<button type="button" class="btn btn-primary btn-md btn-block" data-toggle="modal" data-target="#download_clip_page" id="download-clip-button">{% trans "Download Clip" %}</button>

<style>
  #download-clip-map {height: 500px; width: 100%; text-align: center;}
  .leaflet-control-zoom {left: 0 !important;}
  #download-clip-button {margin-top: 10px;}
</style>
{% endblock %}

{% block extra_script %}
    {% leaflet_js %}
    {% leaflet_css %}

    <link rel="stylesheet" href="{% static 'css/leaflet.draw.css' %}"/>
    <script src="{% static 'js/draw/leaflet.draw.js' %}"></script>

    {% include 'clip_and_ship/download_clip.html' %}
{% endblock extra_script %}