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

{% block title %}Admin - Crea Tipo{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'server'%}" class="breadcrumb hide-on-med-and-down">Admin</a>
    <a href="{% url 'doctype' %}" class="breadcrumb hide-on-med-and-down">Tipo Doc</a>
    <a class="breadcrumb hide-on-med-and-down">Crea Tipo</a>
{% endblock %}

{% block content %}
<div id="modal1" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4>Parametri personalizzati</h4>
    <p>Inserire un parametro per riga. I parametri sono di base dei campi di testo, qui di seguito sono spiegati gli altri tipi di parametri e come ottenerli.</p>
    <h5>Scelta multipla</h5>
    <blockquote>
      !m {Titolo},{Opzione1},{Opzione2},...<br>
      !m Colore preferito,Blu,Bianco,Giallo
    </blockquote>
    <div class="row">
      <div class="col s12">
        Colore preferito
        <p><label>
          <input class="with-gap" name="radiobtn" type="radio"/>
          <span>Blu</span>
        </label></p>
        <p><label>
          <input class="with-gap" name="radiobtn" type="radio"/>
          <span>Bianco</span>
        </label></p>
        <p><label>
          <input class="with-gap" name="radiobtn" type="radio"/>
          <span>Giallo</span>
        </label></p>
      </div>
    </div>
    <h5>Titolo</h5>
    <blockquote>
      !t {Titolo}<br>
      !t Esempio di titolo
    </blockquote>
    <h6>Esempio di titolo</h6>
    <h5>Tutte le opzioni insieme</h5>
    <blockquote>
      !t Esempio di titolo<br>
      Nome dell'animale domestico<br>
      !m Colore preferito,Blu,Bianco,Giallo
    </blockquote>
    <h6>Esempio di titolo</h6>
    <div class="row">
      <div class="input-field col s12">
        <input value="" name="ex" id="ex" type="text">
        <label for="ex">Node dell'animale domestico</label>
      </div>
    </div>
    <div class="row">
      <div class="col s12">
        Colore preferito
        <p><label>
          <input class="with-gap" name="radiobt2" type="radio"/>
          <span>Blu</span>
        </label></p>
        <p><label>
          <input class="with-gap" name="radiobt2" type="radio"/>
          <span>Bianco</span>
        </label></p>
        <p><label>
          <input class="with-gap" name="radiobt2" type="radio"/>
          <span>Giallo</span>
        </label></p>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect btn-flat">Chiudi</a>
  </div>
</div>
<div class="row">
  <div class="col l8 offset-l2 s12">
    <div class="card-panel">
      <div class="row">
        <form id="form" action="{% url 'doccreate'%}" method="post" class="col s12">
          {% csrf_token %}
          <div class="row">
            <div class="input-field col s12">
              <input name="name" value="{{name}}" id="name" type="text">
              <label for="name">Nome</label>
            </div>
          </div>
          <div class="row">
            <div class="switch col l3 s12">
              <label>
                Disabilitato
                <input name="enabled" type="checkbox" {{enabled_check}}>
                <span class="lever"></span>
                Abilitato
              </label>
            </div>
            <div class="switch col l3 s12">
              <label>
                Publico
                <input name="group_private" type="checkbox" {{private_check}}>
                <span class="lever"></span>
                Privato
              </label>
            </div>
            <div class="switch col l3 s12">
              <label>
                Richiede firma
              </label>
              <label>
                No
                <input name="sign" type="checkbox" {{sign_check}}>
                <span class="lever"></span>
                Si
              </label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col l2 s12">
              <label>
                <input name="personal_data" type="checkbox" class="filled-in" {{personal_check}}/>
                <span style="color:black">Dati personali</span>
              </label>
            </div>
            <div class="input-field col l2 s12">
              <label>
                <input name="medical_data" type="checkbox" class="filled-in" {{medical_check}} />
                <span style="color:black">Dati medici</span>
              </label>
            </div>
            <div class="input-field col l4 s12">
              <label>
                <input name="custom_data" type="checkbox" class="filled-in" {{custom_check}}/>
                <span style="color:black">Parametri personalizzati</span>
                <i class="material-icons"><a href="#modal1" class="modal-trigger black-text">info</a></i>
              </label>
            </div>
            <div class="input-field col l4 s12">
              <label>
                <input name="custom_message" type="checkbox" class="filled-in" {{custom_message_check}}/>
                <span style="color:black">Messaggio personalizzato</span>
              </label>
            </div>
          </div>
          <br>
          <div class="row">
            <div class="input-field col s12">
              <textarea name="custom" id="param" class="materialize-textarea"></textarea>
              <label for="param">Lista parametri personalizzati, uno per riga</label>
              <a onclick="preview()" class="waves-effect waves-light btn {{color}}">Visualizza anteprima</a>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <textarea name="custom_message_text" id="message" class="materialize-textarea"></textarea>
              <label for="message">Messaggio personalizzato</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <textarea name="custom_group" id="group" class="materialize-textarea"></textarea>
              <label for="group">Gruppo personalizzato</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col l4 s12">
              <label>
                <input name="staff_only" type="checkbox" class="filled-in" {{staff_only_check}}/>
                <span style="color:black">Visibile solo ai capi</span>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <textarea name="max_instances" id="max_instances" class="materialize-textarea"></textarea>
              <label for="max_instances">Numero massimo di partecipanti</label>
            </div>
          </div>
          <div class="fixed-action-btn">
            <a class="btn-floating btn-large {{color}}" onclick="document.getElementById('form').submit()">
              <i class="large material-icons">save</i>
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script%}
$(document).ready(function(){
  {% if error %}
    M.toast({html: '{{ error_text}}', classes: 'orange'})
  {% endif %}
  $('.modal').modal();
});

function preview() {
  var param = document.getElementById("param").value;
  var param_base64 = btoa(param);
  window.open("{%url 'custom_parameters_preview' %}?param=" + param_base64);
}
{% endblock %}