{% extends 'registration/base_client.html' %}

{% block title %}Preview iscrizione{% endblock %}

{% block breadcrumb %}
    <a href="#!" class="breadcrumb hide-on-med-and-down">Preview Iscrizione</a>
{% endblock %}

{% load app_filter %}

{% block content %}
<div class="row">
  <div class="col l8 offset-l2 s12">
    <div class="card-panel">
      <div class="row">
        <div class="input-field col s12">
          <select>
            <option disabled selected>Iscrizione dimostrativa</option>
          </select>
          <label>Iscrizione</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          <div class="card {{color}}">
            <div class="card-content">
              <p style="color:white"><b>
                Il documento conterr&agrave; le informazioni personali, prego verificare che siano corrette e aggiornate
              </b></p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          <div class="card {{color}}">
            <div class="card-content">
              <p style="color:white"><b>
                Il documento conterr&agrave; le informazioni mediche, prego verificare che siano corrette e aggiornate
              </b></p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          <div class="card {{color}}">
            <div class="card-content" style="color:white">
              <p><b>
                Testo personalizzato d'esempio. <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan auctor lobortis. Etiam eu felis ac elit semper vestibulum. Praesent pharetra ex quam. Ut sed magna nec eros viverra blandit nec eget nisl. Cras maximus efficitur urna, eget semper dui commodo a. Fusce eros sem, condimentum eu dignissim eget, pharetra vulputate odio.
              </b></p>
            </div>
          </div>
        </div>
      </div>
      {% for key in keys %}
        {% if key.key_extra|is_heading %}
        <div class="row">
            <div class="input-field col s12">
            <h6>{{key.key_extra|parse_heading}}</h6>
            </div>
        </div>
        {% elif key.key_extra|is_multiple_choice %}
        <div class="row">
            <div class="col s12">
            {% with arr=key.key_extra|parse_multiple_choice %}
                {{arr.0}}
                {% for val in arr.1 %}
                <p><label>
                    <input class="with-gap" name="{{key.id}}" value="{{val}}" type="radio"/>
                    <span>{{val}}</span>
                </label></p>
                {% endfor %}
            {% endwith %}
            </div>
        </div>
        {% elif key.key_extra|is_checkbox %}
        checkbox
        {% else %}
        <div class="row">
            <div class="input-field col s12">
            <input value="" name="{{key.id}}" id="{{key.id}}" type="text">
            <label for="{{key.id}}">{{key.key}}</label>
            </div>
        </div>
        {% endif %}
      {% endfor %}
      <div class="row">
        <div class="col s12">
          <div class="card red">
            <div class="card-content">
              <p style="color:white"><b>
                Attenzione: il documento non sarà valido fino a quando non viene approvato. Selezionare
                il documento dalla pagina principale per approvarlo.
              </b></p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          <br>
          <a class="btn waves-effect waves-light {{color}}">
            <i class="material-icons left">navigate_before</i>Indietro
          </a>
          <a class="btn waves-effect waves-light {{color}}">Crea
            <i class="material-icons right">create</i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
$(document).ready(function(){
  $('select').formSelect();
});
{% endblock %}