{% extends "maposmatic/base.html" %}

{% comment %}
 coding: utf-8

 maposmatic, the web front-end of the MapOSMatic city map generation system
 Copyright (C) 2012  David Decotigny
 Copyright (C) 2012  Frédéric Lehobey
 Copyright (C) 2012  Pierre Mauduit
 Copyright (C) 2012  David Mentré
 Copyright (C) 2012  Maxime Petazzoni
 Copyright (C) 2012  Thomas Petazzoni
 Copyright (C) 2012  Gaël Utard
 Copyright (C) 2018  Hartmut Holzgraefe

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
{% endcomment %}
{% load i18n %}
{% load l10n %}
{% load extratags %}

{% block body-class %}new{% endblock %}
{% block menu-new %}active{% endblock %}

{% block title %}{% trans "Create map" %}{% endblock %}
{% block extrajs %}
{% include "maposmatic/suggest.js" %}
{% include "maposmatic/wizard.js" %}
$('.multipleSelect').fastselect({
    onItemSelect: function($item, itemModel) {
        $("#overlay-preview").attr("src","/media/img/overlay/"+itemModel.value+".jpg");
    }
});
{% if form.errors %}
$('#error-modal').modal('show')
{% endif%}
{% endblock %}

{% block extracss %}
.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.fstElement { font-size: 1em; }
.fstToggleBtn { min-width: 16.5em; }
.fstMultipleMode { display: block; }
.fstMultipleMode .fstControls { width: 100%; }
{% endblock %}

{% block page %}

{% if form.errors %}
<div class="modal" tabindex="-1" role="dialog" id="error-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Form Errors</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	{% for field in form %}
          {% for error in field.errors %}
          <div class="alert alert-danger">
            <strong>{{field.label}} {{ error|escape }}</strong>
          </div>
          {% endfor %}
	{% endfor %}
	{% for error in form.non_field_errors %}
        <div class="alert alert-danger">
          <strong>{{ error|escape }}</strong>
        </div>
	{% endfor %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
{% endif %}

<div class="row">
  <div class="col-lg-12">
    <h1 id="submitmapform">{% trans "Generate your own map" %}&nbsp;&nbsp;<small><a href='{% url 'documentation_user_guide' %}#_creating_a_map_step_by_step' target='_blank'><i class='fa fa-question-circle'></i></a></small></h1>
  </div>
</div>

<div class="row justify-content-around">
  <div class="col-lg-2">
    <button type="button" class="btn btn-default" id="prevlink" onclick="nextPrev(-1)"><i class="fa fa-arrow-left"></i>  {% trans "Back" %}</button>
  </div>
  <div class="stepwizard col-lg-6">
    <div class="stepwizard-row setup-panel">

      <div class="stepwizard-step">
	<i class="btn btn-light btn-circle fa fa-globe active"></i>
	<p>{% trans "Map area" %}</p>
      </div>

      <div class="stepwizard-step">
	<i class="btn btn-light btn-circle fa fa-file"></i>
	<p>{% trans "Layout" %}</p>
      </div>

      <div class="stepwizard-step">
	<i class="btn btn-light btn-circle fa fa-image"></i>
	<p>{% trans "Style" %}</p>
      </div>

      <div class="stepwizard-step">
	<i class="btn btn-light btn-circle fa fa-bars"></i>
	<p>{% trans "Overlays" %}</p>
      </div>

      <div class="stepwizard-step">
	<i class="btn btn-light btn-circle fa fa-file"></i>
	<p>{% trans "Paper" %}</p>
      </div>

      <div class="stepwizard-step">
	<i class="btn btn-light btn-circle fa fa-check"></i>
	<p>{% trans "Submit" %}</p>
      </div>
    </div>
  </div>
  <div class="col-lg-2" style="align: right">
    <button type="button" class="btn btn-success" id="nextlink" onclick="nextPrev(1)"><i class="fa fa-arrow-right"></i> {% trans "Next" %}</button>
    <button id="formsubmit" type="button" class="btn btn-success" value="submit" onclick="$('#mainfrm').submit()">
      {% trans "Generate" %}&nbsp;<i class="fa fa-check-circle"></i>
    </button>
  </div>
</div>

<form id="mainfrm" method="post" enctype="multipart/form-data" action="{% url "new" %}#submitmapform">
  {{ form.mode }}
  {{ form.default_papersize }}
  {{ form.default_paperorientation }}
  <div class="row" style="margin-top: 30px;" >
    <div class="col-lg-12" >

      <div class="tab" style="display: block" id="wizard-step-location">

        <ul class="nav nav-tabs" id="locTabs">
          <li class="nav-item">
            <a class="nav-link active" id="step-location-bbox-tab" data-toggle="tab" href="#step-location-bbox" role="tab" aria-controls="home" aria-selected="true">{% trans "Geographic area" %}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="step-location-admin-tab" data-toggle="tab" href="#step-location-admin" role="tab" aria-controls="admin" aria-selected="false">{% trans "City search" %}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="step-location-gpx-tab" data-toggle="tab" href="#step-location-gpx" role="tab" aria-controls="gpx" aria-selected="false">{% trans "GPX track" %}</a>
          </li>
          <li calss="nav-item">
            <a class="nav-link" id="step-location-umap-tab" data-toggle="tab" href="#step-location-umap" role="tab" aria-controls="umap" aria-selected="false">{% trans "Umap data file" %}</a>
          </li>
	</ul>

        <div class="tab-content" id="step-location-tabs">
          <div class="tab-pane active" id="step-location-bbox" role="tabpanel">
            {{ form.bbox }}
          </div>

          <div class="tab-pane" id="step-location-admin" role="tabpanel">
            <div style="position: relative;">
              {{ form.administrative_city }}
              <i class="fa fa-repeat suggest-icon" id="loading-icon"></i>
              <i class="fa fa-exclamation-triangle suggest-icon" id="error-icon"></i>
              <ul id="suggest" class="dropdown-menu" role="menu"
                  aria-labelledby="id_administrative_city">
              </ul>

            </div>

	    {{ form.administrative_osmid }}

          </div>

	  <div class="tab-pane" id="step-location-gpx" role="tabpanel">
	    <div class="col-lg-12">
	      <br/>
	      <div class="alert alert-secondary">
                {% blocktrans trimmed %}
		Upload a GPX file here. The GPX track stored in this file,
		and any named waypoints, will be drawn on top of the created map.
		{% endblocktrans %}
	      </div>
              <div class="alert alert-danger">
		{% blocktrans trimmed %}
		<b>Note:</b> The uploaded file will not be made available to anyone, the map created using this
		file <b>will be publicly visible</b> though.<br/>Do <b>NOT</b> upload any data you don't want to be publicly
		visible.
		{% endblocktrans %}
	      </div>
	      <fieldset id="track-file">
		<legend>{% trans "GPX track file" %}</legend>
		{{ form.track }}
	      </fieldset>
	    </div>
	  </div>

	  <div class="tab-pane" id="step-location-umap" role="tabpanel">
	    <div class="col-lg-12">
	      <br/>
	      <div class="alert alert-secondary">
		{% trans "Upload an <a href='https://umap.openstreetmap.fr/'>Umap</a> file here." %}
		<p>
		  {% blocktrans trimmed %}
		  Markers, lines and shapes that have been placed on that Umap will be
		  printed on top of the generated map.
		  {% endblocktrans %}
		<p/>
	      </div>
              <div class="alert alert-danger">
		{% blocktrans trimmed %}
		<b>Note:</b> The uploaded file will not be made available to anyone, the map created using this
		file <b>will be publicly visible</b> though.<br/>Do <b>NOT</b> upload any data you don't want
		to be publicly visible.
		{% endblocktrans %}
	      </div>
	      <fieldset id="umap-file">
		<legend>{% trans "Umap data file" %}</legend>
		{{ form.umap }}
	      </fieldset>
	    </div>
	  </div>
        </div>

        <div class="alert alert-info">
          <h4>{% trans "Geographic area selection" %}</h4>
          <p>
    	    {% blocktrans trimmed %}
	    Start by choosing the city or geographic area you want to
	    render. Suggestions will appear as you start typing. If you can't find the city
	    you want, or if you prefer to choose the exact area you want to render
	    yourself, select the <em>Geographic area</em> tab and use the mini-map to set
	    the limits of the rendered area.
	    {% endblocktrans %}
          </p>
        </div>
      </div>

    </div>

    <div class="tab" id="wizard-step-layout">
      <div class="row">
	<div class="col-lg-6">
          <fieldset>
            <legend>{% trans "Layout" %}</legend>
            {{ form.layout }}
          </fieldset>
	</div>
	<div class="col-lg-6">
          <img id="layout-preview" align="right" src="/media/img/layout/{{request.session.new_layout}}.png"/>
	</div>
      </div>

      <div class="row">
	<div class="col-lg-12">
	  <div class="alert alert-info">
	    <h4>{% trans "Map layout" %}</h4>
	    <p>
	      {% blocktrans trimmed %}
	      The map layout determines how the map and the index are
	      rendered. The <em>Multi-page layout</em> produces a booklet very suitable for
	      printing and binding.
	      {% endblocktrans %}
	    </p>
	  </div>
	</div>
      </div>
    </div>


    <div class="tab" id="wizard-step-stylesheet">

      <div class="row">
	<div class="col-lg-6">
          <fieldset>
            <legend>{% trans "Stylesheet" %}</legend>
            {{ form.stylesheet }}
          </fieldset>
	</div>
	<div class="col-lg-6">
	  <img id="style-preview" align="right" src="/media/img/style/{{request.session.new_stylesheet}}.jpg"/> {# TODO: need to pick first style from list here #}
	</div>
      </div>

      <div class="row">
	<div class="col-lg-12">
	  <div class="alert alert-info">
	    <h4>{% trans "Map stylesheet" %}</h4>
	    <p>
	      {% blocktrans trimmed %}
	      The map stylesheet determines the style and appearance of the map itself.
	      Note that the stylesheet also drives what details will be visible on the map.
	      {% endblocktrans %}
	    </p>
	  </div>
	</div>
      </div>
    </div>

    <div class="tab" id="wizard-step-overlay">

      <div class="row">
	<div class="col-lg-6">
          <fieldset>
            <legend>{% trans "Overlays" %}</legend>
            {{ form.overlay }}
          </fieldset>
	</div>
	<div class="col-lg-6">
          <img id="overlay-preview" align="right" src="/media/img/empty.png"/> {# TODO: select default here, too #}
	</div>
      </div>

      <div class="row">
	<div class="col-lg-12">
	  <div class="alert alert-info">
	    <h4>{% trans "Map overlays" %}</h4>
	    <p>
	      {% blocktrans trimmed %}
	      Overlays render extra objects on top of the chosen base style.
	      Multiple overlays can be selected to add different kinds of additional information on top of the map.
	      {% endblocktrans %}
	    </p>
	  </div>
	</div>
      </div>
    </div>

    <div class="tab" id="wizard-step-paper-size">
      <div class="row" id="paper-selection">
	<div class="col-lg-6">
          <fieldset id="paper-size">
            <legend>{% trans "Paper size" %}</legend>
            {{ form.papersize }}
            {{ form.paper_width_mm }}
            {{ form.paper_height_mm }}
          </fieldset>
	</div>
	<div class="col-lg-6">
          <fieldset id="paper-orientation">
            <legend>{% trans "Paper orientation" %}</legend>
            {{ form.paperorientation }}
          </fieldset>
	</div>
      </div>

      <div class="alert alert-error" id="paper-size-loading-error">
        {% blocktrans %}An error occured while retrieving compatible paper sizes.{% endblocktrans %}
      </div>

      <div class="alert alert-info" id="paper-size-loading">
	<i class="fa fa-repeat"></i>
        {% blocktrans %}Calculating available paper formats for your map...{% endblocktrans %}
      </div>

      <div class="alert alert-info">
	<h4>{% trans "Paper format and size" %}</h4>
	<p>
          {% blocktrans %}Select the desired format, size and orientation for your map.{% endblocktrans %}
	</p>
      </div>
    </div>

    <div class="tab" id="wizard-step-lang-title">
      <div class="row">
	<div class="col-lg-8">
          <fieldset>
            <legend>{% trans "Map title" %}</legend>
            {{ form.maptitle }}
          </fieldset>
	</div>
	<div class="col-lg-4">
          <fieldset>
            <legend>{% trans "Locale" %}</legend>
	    <div class="dropdown">
	      <button id="map_language_button" type="button" class="btn dropdown-toggle" data-toggle="dropdown">
		{{ form.map_language.value }}
	      </button>
	      <input type="hidden" name="{{ form.map_language.name }}" id="{{ form.map_language.name }}"/>
	      <div id="maplang_choices" role="menu" class="dropdown-menu bg-light" style="height: 400px; overflow-y: auto;">
		{% for choice in form.map_language.field.choices %}
		<a class="dropdown-item" href="#" data-langcode="{{choice.0}}" onclick="$('#map_language_button').html($(this).html()); $('#{{ form.map_language.name }}').val('{{choice.0}}');">{{choice.1}} ({{choice.0|locale_base}})</a>
		{% endfor %}
	      </div>
	    </div>
          </fieldset>
	</div>
      </div>
      <div class="row">
	<div class="col-lg-12">
	  <br/>
          <fieldset>
            <legend>{% trans "Your Email address (for notifications, optional)" %}</legend>
            {{ form.submittermail }}
          </fieldset>
	</div>
      </div>

      <div class="row" style="margin-top: 30px;">
	<div class="col-lg-12">
          <fieldset id="summary">
            <legend>{% trans "Summary" %}</legend>
            <table class="table table-striped">
              <tbody>
		<tr><td>{% trans "Location:" %}</td><td id="summary-location"></td></tr>
		<tr><td>{% trans "Layout:" %}</td><td id="summary-layout"></td></tr>
		<tr><td>{% trans "Stylesheet:" %}</td><td id="summary-stylesheet"></td></tr>
		<tr><td>{% trans "Overlay:" %}</td><td id="summary-overlay"></td></tr>
		<tr><td>{% trans "Paper format:" %}</td><td id="summary-paper-size"></td></tr>
              </tbody>
            </table>
          </fieldset>

	</div>
      </div>

      <div class="alert alert-info">
	<h4>{% trans "Almost there!" %}</h4>
	<p>
	  {% blocktrans trimmed %}
	  You're almost ready to request to map rendering! Select the map language,
	  eventually adjust the title of your map, and you're good to go!
	  {% endblocktrans %}
	</p>
      </div>
    </div>
  </div>
</form>

{% endblock %}
