{% extends 'consulta.base.html' %}
{% load staticfiles %}
{% block title %}Registrarse{% endblock %}
{% block contenido %}
  <div class="row text-center">
    <h1>Registro</h1><hr>
    <form action="{% url 'register' %}" method="post">
    {% csrf_token %}
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="form-group {% if form.username.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.username.auto_id }}">
            {{ form.username.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.username }}
            {% include 'base.forms.errors.html' with form_errors=form.username.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div><br><br><br>
      
       <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="form-group {% if form.password.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.password.auto_id }}">
            {{ form.password.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.password }}
            {% include 'base.forms.errors.html' with form_errors=form.password.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div><br><br><br>
      
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="form-group {% if form.password_repeat.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.password_repeat.auto_id }}">
            {{ form.password_repeat.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.password_repeat }}
            {% include 'base.forms.errors.html' with form_errors=form.password_repeat.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div><br><br><br>
          
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="form-group {% if form.nombre.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.nombre.auto_id }}">
            {{ form.nombre.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.nombre }}
            {% include 'base.forms.errors.html' with form_errors=form.nombre.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div><br><br><br>
      
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="form-group {% if form.apellido.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.apellido.auto_id }}">
            {{ form.apellido.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.apellido }}
            {% include 'base.forms.errors.html' with form_errors=form.apellido.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div><br><br><br>
      
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="form-group {% if form.cedula.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.cedula.auto_id }}">
            {{ form.cedula.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
          <div class="form-inline">
            {{ form.cedula }}
          </div>
            {% include 'base.forms.errors.html' with form_errors=form.cedula.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div><br><br><br>
          
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="form-group {% if form.email.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.email.auto_id }}">
            {{ form.email.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.email }}
            {% include 'base.forms.errors.html' with form_errors=form.email.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div><br><br><br>
      
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="form-group {% if form.sector.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.sector.auto_id }}">
            {{ form.sector.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.sector }}
            {% include 'base.forms.errors.html' with form_errors=form.sector.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div>
      
      <div class="col-md-6 col-sm-6 col-xs-6" id="sector_trabajador" style="display: none;">
        <div class="form-group {% if form.sector_trabajador.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.sector_trabajador.auto_id }}">
            {{ form.sector_trabajador.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.sector_trabajador }}
            {% include 'base.forms.errors.html' with form_errors=form.sector_trabajador.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div>
      
      <div class="col-md-6 col-sm-6 col-xs-6" id="sector_estudiante" style="display: none;" >
        <div class="form-group {% if form.sector_estudiante.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.sector_estudiante.auto_id }}">
            {{ form.sector_estudiante.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.sector_estudiante }}
            {% include 'base.forms.errors.html' with form_errors=form.sector_estudiante.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div>
      <br><br><br>
      
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="form-group {% if form.participacion.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.participacion.auto_id }}">
            {{ form.participacion.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.participacion }}
            {% include 'base.forms.errors.html' with form_errors=form.participacion.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div>
      
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="form-group {% if form.colectivo.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.colectivo.auto_id }}">
            {{ form.colectivo.label }}
          </label>
          <div class="col-md-4 col-xs-4 col-sm-4">
            {{ form.colectivo }}
            {% include 'base.forms.errors.html' with form_errors=form.colectivo.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="col-sm-1"><i class="ion ion-ios-medical item-requerido"></i></div>
        </div>
      </div><br><br><br>
      
      <div class="col-md-4 col-sm-4 col-xs-4">
        <div class="form-group {% if form.estado.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.estado.auto_id }}">
            {{ form.estado.label }}
          </label>
          <div class="col-md-5 col-xs-5 col-sm-5">
            {{ form.estado }}
            {% include 'base.forms.errors.html' with form_errors=form.estado.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
        </div>
      </div>
      
      <div class="col-md-4 col-sm-4 col-xs-4">
        <div class="form-group {% if form.municipio.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.municipio.auto_id }}">
            {{ form.municipio.label }}
          </label>
          <div class="col-md-5 col-xs-5 col-sm-5">
            {{ form.municipio }}
            {% include 'base.forms.errors.html' with form_errors=form.municipio.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
        </div>
      </div>
      
      <div class="col-md-4 col-sm-4 col-xs-4">
        <div class="form-group {% if form.parroquia.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label" for="{{ form.parroquia.auto_id }}">
            {{ form.parroquia.label }}
          </label>
          <div class="col-md-5 col-xs-5 col-sm-5">
            {{ form.parroquia }}
            {% include 'base.forms.errors.html' with form_errors=form.parroquia.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
        </div>
      </div>

      <br />
      <br />
      <br />

      <div class="row">
        <div class="form-group {% if form.captcha.errors %}has-error{% endif %}">
          <label class="col-md-3 col-xs-3 col-sm-3 control-label">
            {{form.captcha.label}}
          </label>
          <div class="col-md-6 col-xs-6 col-sm-6">
            {{form.captcha}}
            <a onclick="refresh_captcha(this);" style="cursor: pointer">
              <span class="glyphicon glyphicon-refresh red" data-toggle="tooltip" title="Presione para recargar la imagen del captcha"></span>
            </a>
            {% include 'base.forms.errors.html' with form_errors=form.captcha.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
        </div>
      </div>

      <br />
      <br />

      <div class="col-md-12 col-sm-12 col-xs-12">
         <button type="submit" class="btn btn-red pull-center">Registrarse</button>
      </div>
    </form>
  </div>
  <br />
{% endblock %}
{% block extraJs %}
<script>
  $(document).ready(function(){
    mostrar_sector($('#id_sector').val());
    habilitar_colectivo($('#id_participacion').val());
  });
</script>
{% endblock %}