{% extends "base.html" %}

{% load bootstrap %}
{% load staticfiles %}

{% block body_class %}form{% endblock %}

{% block content %}
  <script src="{% static 'form.js' %}" type="text/javascript"></script>

  <header class="jumbotron">
    <div class="container">
    <p>
<a href="{{ isp.SITE }}">{{ isp.NAME }}</a> expérimente à
grande échelle ({{ isp.ZONE }}) la création d'un réseau sans-fil à
longue portée à des fins, entre autres, de <em>partage</em> et
<em>fourniture</em> d'<strong>accès à internet</strong>.
    </p>

    <p>
Pour cela, nous recherchons des volontaires, tant pour <strong>partager une
partie de leur connexion</strong> que pour participer au réseau (accès à
internet, partage local…).
      </p>

      <p>
Renseigner ce formulaire nous permet de définir quelles <strong>zones
d'expérimentations</strong> (avec une grande densité de volontaires)
pourraient être intéressantes.
      </p>
    </div>
  </header>

  <section role="main" class="container">
  <form role="form" method="post">{% csrf_token %}

{% if form.non_field_errors %}
    <div id="errors" class="bg-danger">
      {{ form.non_field_errors }}
    </div>
{% endif %}

    <h2>Contact</h2>

    <div class="form-group">
      <label for="name">Nom / Pseudo</label>
      {{ form.name|formcontrol }}
      {{ form.name.errors }}
    </div>

    <div class="row">
      <div class="form-group col-md-6">
        <label for="email">Email</label>
        {{ form.email|formcontrol }}
        {{ form.email.errors }}
        <p class="help-block">
          <span class="glyphicon glyphicon-warning-sign"></span>
          Un moyen de contact au moins est nécessaire
        </p>
      </div>
      <div class="form-group col-md-6">
        <label for="phone">Téléphone</label>
        {{ form.phone|formcontrol }}
        {{ form.phone.errors }}
      </div>
    </div>


    <h2>Je souhaite</h2>
    <div id="id_contrib_type">
      {% for i in form.contrib_type %}
      <p class="radio">{{ i }}</p>
      {% endfor %}
    </div>

    <div id="contrib-type-share"
    <h2>Partager une connexion</h2>

    <h3>Type de connexion</h3>
    <div id="id_access_type">
      {% for i in form.access_type %}
      {% if i.choice_value %}<p class="radio">{{ i }}</p>{% endif %}
      {% endfor %}
    </div>

    {{ form.access_type.errors }}
    </div>


  <h2>Ma localisation</h2>

    <div class="row">
      <div class="col-sm-6">
        <div id="map" data-json="{{geojson}}"
            start_lon="{{ isp.LONGITUDE|stringformat:"f" }}" start_lat="{{ isp.LATITUDE|stringformat:"f" }}"
            start_zoom="{{ isp.ZOOM }}"></div>
      </div>
      <div class="form-group col-sm-6">
        <div class="form-group form-group-lg form-inline">
          <input type="text" name="search"
                 id="search" placeholder="rue du calvaire, nantes" class="form-control" />
          <span id="search-btn" class="btn btn-default btn-lg" data-loading-text="...">Recherche</span>

          <div id="search-results" class=""></div>
          <p class="help-block">Déplacer le marqueur bleu pour pointer précisément le bâtiment au besoin</p>
          <p class="help-block">
            Les ronds verts sont ceux renseignés par d'autres utilisateurs, vous
            pouvez aussi consulter <a href="{% url 'display_map' %}" target="_blank">la carte
            publique plus détaillée</a>.
          </p>

        </div>
        {{ form.latitude }}
        {{ form.longitude }}
        {% firstof form.latitude.errors form.latitude.errors %}
        </div>
      </div>

    <p class="help-block">Les antennes peuvent être positionées soit sur le toit soit aux fenêtres/balcons/velux.</p>

    <div class="form-group">
      <label for="orientation" />Orientation(s) de mes fenêtres, balcons ou velux</label>

    (<label class="checkbox-inline"><input type="checkbox" name="orientation-all" id="orientation-all" value="" />Vue à 360°</label>)
      <br>
{% for val, label in form.orientations.field.choices %}
    <label class="checkbox-inline">
      <input type="checkbox" class="orientation" name="orientations" value="{{ val }}"
             {% if val in form.orientations.value %}checked="yes"{% endif %}/>
      {{label}}
    </label>
{% endfor %}

    {{ form.orientations.errors }}

    <div class="form-group">
      <label for="roof">Je peux accéder à mon toit
        {{ form.roof }}
      {{ form.roof.errors }}
      </label>
    </div>
    <p class="form-inline">
      <label for="floor">Mon étage</label>
      {{ form.floor }}
      {{ form.floor.errors }}
      /
      {{ form.floor_total }}
      {{ form.floor_total.errors }}
    </p>

    <h2>Remarque/commentaire</h2>
    {{ form.comment|formcontrol }}
    {{ form.comment.errors }}


    <h2>Mes données</h2>
    {{ form.human_field|formcontrol }}

    <p class="help-block">
Les données collectées dans ce formulaire sont accessibles
au bureau de {{ isp.NAME }}.<br />

Vous pouvez cocher ci-dessous celles que vous voulez bien voir <a
href="{% url 'legal' %}">rendues publiques et librement réutilisées</a>.
    </p>

    <div class="form-group">
    <label for="privacy" />
J'autorise qu'apparaissent sur la carte publique :
    </label><br />
    </div>
    {% for i in form.privacy_fields %}
    <div class="checkbox">
      <label>
      {{ i }}
      {{ i.label }}
      </label>
    </div>
    {% endfor %}

    <input type="submit" value="Envoyer" class="btn btn-primary btn-lg"/>
  </form>
  </section>


<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Resultats" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
        <h4 class="modal-title" id="myModalLabel">Résultats</h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

{% endblock %}