{% extends 'layout.html' %}

{% block content %}
{% if user.user_name not in ["Maman","Papa"] %}
<div class="row">
  <div class="col-md-8">
    <h2>Kadoscope</h2>
    <p>Cliquer sur le cadeau ci-dessous pour découvrir le nom de l'heureux élu qui recevra un cadeau de votre part.</p>
    <p class="kadoscope">{{user.kado}}</p>
    <p id="kadobutton"></p>
    {% endif %}
    <h2>Paramètres du Compte</h2>
    <form method="post" action="{{url_for('edit_user')}}" role="form"
          class="form-horizontal">
      <fieldset>
        <legend>Paramètres</legend>
        <p class="info">Laisser les champs vides si vous ne souhaitez pas changer de mot de passe.</p>
        <div class="form-group form-group-sm">
          <label for="password" class="col-md-4">Nouveau mot de passe :</label>
          <div class="col-md-4">
            <input type="password" name="password" id="password" autocomplete="off"
                   class="form-control"/>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="confirm" class="col-md-4">Répéter le mot de passe :</label>
          <div class="col-md-4">
            <input type="password" name="password_confirm" id="confirm"
                   class="form-control"/>
          </div>
        </div>
        <div class="form-group">
          <label for="notify" class="col-md-4">Recevoir un mail lors<br/>d'une nouvelle actualité:</label>
          <div class="col-md-4">
            <input type="checkbox" name="notify" id="notify" {% if user.notify %}checked="checked"{% endif %}  style="text-align:left"/>
          </div>
        </div>
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        {% for message in messages %}
        <div class="alert alert-danger" role="alert">
          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true">
          </span>
          {{message}}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}
      </fieldset>

      <fieldset>

        <legend>Contact</legend>
        <div class="form-group form-group-sm">
          <label for="email" class="col-md-4">Email <span class="info">(pour la famille)</span> :</label>
          <div class="col-md-4">
            <input type="email" id="email" name="email" value="{{user.email}}"
                   class="form-control"/>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="phone" class="col-md-4">Téléphone :</label>
          <div class="col-md-4">
            <input type="tel" id="phone" name="phone" value="{{user.phone}}"
                   class="form-control"/>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="line1" class="col-md-4">Adresse <span class="info">(ligne 1)</span> :</label>
          <div class="col-md-4">
            <input type="text" id="line1" name="address_line1"
                   value="{{user.address_line1}}"
                   class="form-control"/>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="line2" class="col-md-4">Adresse <span class="info">(ligne 2)</span> :</label>
          <div class="col-md-4">
            <input type="text" id="line2" name="address_line2"
                   value="{{user.address_line2}}" class="form-control"/>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="city_line" class="col-md-4">Ville, CP <span class="info">(dernière ligne)</span> :</label>
          <div class="col-md-4">
            <input type="text" id="city_line" name="address_city_line"
                   value="{{user.address_city_line}}" class="form-control"/>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="timezone" class="col-md-4">Fuseau horaire:</label>
          <div class="col-md-4">
            <select id="timezone" class="form-control"
                    name="timezone">
              {% for tz in  timezones%}
              <option {%if tz==session.timezone %}selected="selected" {% endif %}>{{tz}}</option>
            {% endfor %}
            </select>
          </div>
        </div>
      </fieldset>

      <fieldset>
        <legend>Informations personelles</legend>

        <div class="form-group form-group-sm">
          <label for="birthday" class="col-md-4">Anniversaire <span class="info">(JJ/MM)</span> :</label>
          <div class="col-md-4">
            <input type="text" id="birthday" name="birthday"
                   value="{{user.birthday}}" class="form-control"/>
          </div>
        </div>

        <div class="form-group form-group-sm">
          <label for="nameday" class="col-md-4">Fête <span class="info">(JJ/MM)</span> :</label>
          <div class="col-md-4">
            <input type="text" id="nameday" name="nameday"
                   value="{{user.nameday}}" class="form-control"/>
          </div>
        </div>
      </fieldset>
      <button type="submit" class="btn btn-primary">Enregister</button>
    </form>
  </div>
</div>


{% endblock %}