{% 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

 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 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" %}
{% endblock %}

{% block page %}
<h1 id="submitmapform">{% trans "Generate your own map" %}</h1>

<div class="row-fluid" style="margin-top: 30px;">
  <div class="span12">
    <form id="mainfrm" method="post" action="{% url new %}#submitmapform">
      <div id="wizard" class="carousel slide">
        <div class="carousel-inner">

          <div class="active item" id="wizard-step-location">
            <div class="row-fluid">
              <div class="span12">
                <ul class="nav nav-tabs">
                  <li class="active">
                    <label for="id_mode_0" data-target="#step-location-admin">
                      <input name="mode" value="admin" id="id_mode_0" type="radio" checked="checked" />
                      {% trans "City search" %}
                    </label>
                  </li>
                  <li>
                    <label for="id_mode_1" data-target="#step-location-bbox">
                      <input name="mode" value="bbox" id="id_mode_1" type="radio" />
                      {% trans "Geographic area" %}
                    </label>
                  </li>
                </ul>

                <div class="tab-content">
                  <div class="tab-pane active" id="step-location-admin">
                    <div style="position: relative;">
                    {{ form.administrative_city }}
                    <i class="icon-refresh suggest-icon" id="loading-icon"></i>
                    <i class="icon-warning-sign suggest-icon" id="error-icon"></i>
                    <ul id="suggest" class="dropdown-menu" role="menu"
                        aria-labelledby="id_administrative_city">
                    </ul>

                    {{ form.errors }}
                    </div>

                    {{ form.administrative_osmid }}
                    {{ form.administrative_osmid.errors }}
                    {{ form.administrative_city.errors }}
                  </div>
                  <div class="tab-pane" id="step-location-bbox">
                    {{ form.bbox }}
                  </div>
                </div>
              </div>
            </div>

            <div class="carousel-caption">
              <h4>{% trans "Geographic area selection" %}</h4>
              <p>
{% blocktrans %}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 class="item" id="wizard-step-layout-stylesheet">

            <div class="row-fluid">
              <div class="span6">
                <fieldset>
                  <legend>{% trans "Layout" %}</legend>
                  {{ form.layout }}
                </fieldset>
              </div>

              <div class="span6">
                <fieldset>
                  <legend>{% trans "Stylesheet" %}</legend>
                  {{ form.stylesheet }}
                </fieldset>
              </div>
            </div>

            <div class="carousel-caption">
              <h4>{% trans "Map layout and stylesheet" %}</h4>
              <p>
{% blocktrans %}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. 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 class="item" id="wizard-step-paper-size">
            <div class="row-fluid" id="paper-selection">
              <div class="span6">
                <fieldset id="paper-size">
                  <legend>{% trans "Paper size" %}</legend>
                  {{ form.papersize }}
                  {{ form.paper_width_mm }}
                  {{ form.paper_height_mm }}
                </fieldset>
              </div>
              <div class="span6">
                <fieldset id="paper-orientation">
                  <legend>{% trans "Paper orientation" %}</legend>
                  {{ form.paperorientation }}
                </fieldset>
              </div>
            </div>

            <div class="row-fluid">
              <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">
                {% blocktrans %}<i class="icon-refresh"></i> Calculating available paper formats for your map...{% endblocktrans %}
              </div>
            </div>

            <div class="carousel-caption">
              <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="item" id="wizard-step-lang-title">
            <div class="row-fluid">
              <div class="span8">
                <fieldset>
                  <legend>{% trans "Map title" %}</legend>
                  {{ form.maptitle }}
                </fieldset>
              </div>
              <div class="span4">
                <fieldset>
                  <legend>{% trans "Language" %}</legend>
                  {{ form.map_language }}
                </fieldset>
              </div>
            </div>

            <div class="row-fluid" style="margin-top: 30px;">
              <div class="span12">
                <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 "Paper format:" %}</td><td id="summary-paper-size"></td></tr>
                    </tbody>
                  </table>
                </fieldset>

                <button id="id_go_next_btn" type="submit" class="btn btn-large btn-primary pull-right">
                  {% trans "Generate &raquo;" %}
                </button>
              </div>
            </div>

            <div class="carousel-caption">
              <h4>{% trans "Almost there!" %}</h4>
              <p>
{% blocktrans %}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>

        <a href="#wizard" id="prevlink" class="carousel-control left" data-slide="prev">&lsaquo;</a>
        <a href="#wizard" id="nextlink" class="carousel-control right" data-slide="next">&rsaquo;</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}
