{% extends 'UBVPrincipalBundle:Documentacion:inicio.html.twig' %}

{% block breadcums %}
  {{ parent() }}
  <li>
    <i class="fa fa-angle-right fa-fw"></i>
    <a>Formularios</a>
  </li>
{% endblock%}
{% block contenido %}
  <div class="row">
    <div class="col-lg-12">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Registro Usuario</div>
        </div>
        <div class="portlet-body">
          <div id="rootwizard-tab-left" class="tabbable tabs-left">
            <div id="bar" class="progress progress-striped active">
              <div class="bar progress-bar progress-bar-orange"></div>
            </div>
            <ul>
              <li><a href="#tab1-wizard-tab-left" data-toggle="tab">Usuario</a></li>
              <li><a href="#tab2-wizard-tab-left" data-toggle="tab">Información <br> Personal</a></li>
              <li><a href="#tab3-wizard-tab-left" data-toggle="tab">Dirección</a></li>
              <li><a href="#tab3-wizard-tab-left" data-toggle="tab">Est. Socio-económico</a></li>
              <li><a href="#tab4-wizard-tab-left" data-toggle="tab">Final</a></li>
            </ul>
            <div class="tab-content">
              <div id="tab1-wizard-tab-left" class="tab-pane">
                <form action="#" class="form-horizontal">
                  <div class="form-group"><label for="inputUsername"
                                                 class="col-md-3 control-label">Usuario
                      <span class='require'>*</span></label>

                    <div class="col-md-4">
                      <div class="input-icon"><i class="fa fa-user"></i><input
                          type="text" placeholder="Usuario"
                          class="inputUsername form-control"/></div>
                      <i class="alert alert-hide">Campo necesario.</i></div>
                  </div>
                  <div class="form-group"><label for="inputEmail"
                                                 class="col-md-3 control-label">Clave
                      <span class='require'>*</span></label>

                    <div class="col-md-4">
                      <div class="input-group"><span class="input-group-addon"><i
                            class="fa fa-key"></i></span><input type="password"
                                                            placeholder="Clave"
                                                            class="form-control"/>
                      </div>
                      <i class="alert alert-hide">Campo necesario.</i></div>
                  </div>
                  <div class="form-group"><label for="inputAddress"
                                                 class="col-md-3 control-label">Confrimar Clave  <span class='require'>*</span></label>

                    <div class="col-md-4">
                      <div class="input-group"><span class="input-group-addon"><i
                            class="fa fa-key"></i></span><input type="password"
                                                            placeholder="Confirmar Clave"
                                                            class="form-control"/>
                      </div>
                      <i class="alert alert-hide">Campo necesario.</i></div>
                  </div>
                </form>
              </div>
              <div id="tab2-wizard-tab-left" class="tab-pane">
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group"><label for="inputStreet"
                                                   class="control-label">Calle <span
                          class='require'>*</span></label><input id="inputStreet"
                                                             type="text"
                                                             placeholder=""
                                                             class="form-control"/><i
                                                             class="alert alert-hide">Campo necesario.</i></div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group"><label for="inputFirstName"
                                                   class="control-label">Municipio</label><input
                                                   id="inputDistrict" type="text" placeholder=""
                                                   class="form-control"/><i class="alert alert-hide">
                        Campo necesario.</i></div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group"><label for="inputCity"
                                                   class="control-label">Ciudad <span
                          class='require'>*</span></label><input id="inputCity"
                                                             type="text"
                                                             placeholder=""
                                                             class="form-control"/><i
                                                             class="alert alert-hide">Campo necesario.</i></div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group"><label for="inputPostCode"
                                                   class="control-label">Codigo Postal
                      </label><input id="inputPostCode" type="text" placeholder=""
                                     class="form-control"/><i
                                     class="alert alert-hide">Campo necesario.
                      </i></div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group"><label for="selCountry"
                                                   class="control-label">Pais</label><select
                                                   id="selCountry" class="form-control">
                        <option value="">Seleccionar opcion</option>
                        <option value="">Opcion 1</option>
                        <option value="">Opcion 2</option>
                        <option value="">Opcion 3</option>
                        <option value="">Opcion 4</option>
                      </select></div>
                  </div>
                </div>
              </div>
              <div id="tab3-wizard-tab-left" class="tab-pane">
                <form action="#" class="form-horizontal">
                  <div class="form-group"><label for="inputUsername"
                                                 class="col-md-2 control-label">Campo 1:</label>

                    <div class="col-md-10">
                      <input type="text" placeholder="Detail" class="inputUsername form-control"/>
                      <i class="alert alert-hide">Campo necesario.</i>
                    </div>
                  </div>
                  <div class="form-group"><label for="inputUsername"
                                                 class="col-md-2 control-label">Campo
                      2:</label>

                    <div class="col-md-10"><input type="text" placeholder="Detail"
                                                  class="inputUsername form-control"/><i
                                                  class="alert alert-hide"> Campo necesario.</i></div>
                  </div>
                  <div class="form-group"><label for="inputUsername"
                                                 class="col-md-2 control-label">Campo
                      3:</label>

                    <div class="col-md-10"><input type="text" placeholder="Detail"
                                                  class="inputUsername form-control"/><i
                                                  class="alert alert-hide">Campo necesario.</i></div>
                  </div>
                  <div class="form-group"><label for="selCountry"
                                                 class="col-md-2 control-label">Opciones:</label>

                    <div class="col-lg-3 col-md-5"><select id="selCountry"
                                                           class="form-control">
                        <option value="">Opcion 1</option>
                        <option value="">Opcion 2</option>
                        <option value="">Opcion 3</option>
                      </select></div>
                  </div>
                </form>
              </div>
              <div id="tab4-wizard-tab-left" class="tab-pane"><p>Felicitaciones Finalizaste el registro. </p>

                <p>Fin del Registro.</p></div>
              <div style="float: right;"><input type="button" name="next" value="Siguiente"
                                                class="btn btn-primary button-next"/></div>
              <div style="float: left;"><input type="button" name="previous" value="Atrás"
                                               class="btn btn-primary button-previous"/></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="panel panel-blue">
        <div class="panel-heading">Formulario dos columnas</div>
        <div class="panel-body pan">
          <form action="#" class="horizontal-form">
            <div class="form-body pal"><h3 class="block-heading">Personal</h3>

              <div class="row">
                <div class="col-md-6">
                  <div class="form-group"><label
                      for="inputFirstName" class="control-label">Primer Nombre <span class='require'>*</span></label>

                    <div class="input-icon right">
                      <input
                        id="inputFirstName" type="text"
                        placeholder="Primer Nombre"
                        class="form-control"/></div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group"><label
                      for="inputLastName" class="control-label">Segundo Nombre <span class='require'>*</span></label>

                    <div class="input-icon right">
                      <input id="inputLastName" type="text"
                             placeholder="Segundo Nombre"
                             class="form-control"/></div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group"><label for="inputEmail"
                                                 class="control-label">Correo
                      <span class='require'>*</span></label>

                    <div class="input-icon"><i
                        class="fa fa-envelope"></i><input
                        type="text" placeholder="Correo Electronico"
                        class="form-control"/></div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group"><label for="selGender"
                                                 class="control-label">Genero
                      <span class='require'>*</span></label><select
                      id="selGender" class="form-control">
                      <option value="">Masculino</option>
                      <option value="">Femenino</option>
                    </select></div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group"><label for="inputBirthday"
                                                 class="control-label">Fecha de Nacimiento</label><input
                                                 id="inputBirthday" type="text"
                                                 placeholder="dd/mm/yyyy" class="form-control"/>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group"><label for="inputPhone"
                                                 class="control-label">Telefono</label><input
                                                 id="inputPhone" type="text" placeholder=""
                                                 class="form-control"/></div>
                </div>
              </div>
            </div>
            <div class="form-actions text-right pal">
              <button type="button" class="btn btn-danger">
                Cancelar
              </button>
              <button type="submit" class="btn btn-primary">
                Enviar
              </button>
              &nbsp;
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block javascripts %}
  {{ parent() }}
  <script src="{{ asset('bundles/ubvprincipal/js/form-layouts.js') }}"></script>
{% endblock %}