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

{% block breadcums %}
  {{ parent() }}
  <li>
    <i class="fa fa-angle-right fa-fw"></i>
    <a>Formularios</a>
  </li>
  <li>
    <i class="fa fa-angle-right fa-fw"></i>
    <a>Componentes</a>
  </li>
{% endblock%}
{% block contenido %}
  <div class="row">
    <div class="col-lg-6">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Input sizing</div>
        </div>
        <div class="portlet-body">
          <form role="form" class="form-horizontal form-separated">
            <div class="form-bodyhelp">
              <div class="form-group"><label class="col-md-3 control-label">Usuario:</label>

                <div class="col-md-3"><input class="form-control"/>

                  <p class="help-block">Input Corto</p></div>
              </div>
              <div class="form-group"><label class="col-md-3 control-label">Nombres:</label>

                <div class="col-md-6"><input class="form-control"/>

                  <p class="help-block">Input Medio</p></div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Mas información</label>

                <div class="col-md-9">
                  <input class="form-control"/>
                  <p class="help-block">Input Grande</p>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Contraseña</label>
                <div class="col-md-9">
                  <div class="input-group input-group-sm">
                    <input class="form-control"/>
                    <p class="help-block">Input Pequeño</p>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Repetir Contraseña</label>
                <div class="col-md-9">
                  <div class="input-group">
                    <input class="form-control"/>
                    <p class="help-block">Input Mediano</p>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label mts">Correo</label>
                <div class="col-md-9">
                  <div class="input-group input-group-lg">
                    <input class="form-control"/>
                    <p class="help-block">Input Largo</p>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Placehoder & Mascaras  input</div>
        </div>
        <div class="portlet-body">
          <form role="form" class="form-horizontal form-separated">
            <div class="form-body">
              <div class="form-group">
                <label class="col-md-3 control-label">Etiqueta</label>
                <div class="col-md-9">
                  <input placeholder="placehoder" class="form-control"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Fecha</label>
                <div class="col-md-9">
                  <input id="date" placeholder="__/__/____" class="form-control"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Telefono</label>
                <div class="col-md-9">
                  <input id="phone" placeholder="(123) 123-1234" class="form-control"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Clave de Productos</label>
                <div class="col-md-9">
                  <input id="product-key" placeholder="(ab) 12-123" class="form-control"/>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div id="help-block" class="portlet">
        <div class="portlet-header">
          <div class="caption">Bloques de Ayuda Input</div>
        </div>
        <div class="portlet-body">
          <form role="form" class="form-horizontal form-separated">
            <div class="form-body">
              <div class="form-group">
                <label class="col-md-3 control-label mtxl">Usuario</label>
                <div class="col-md-4">
                  <p class="text-success">Ayuda Sobre</p>
                  <input class="form-control"/>
                </div>
              </div>
              <div class="form-group form-inline">
                <label class="col-md-3 control-label">Contraseña</label>
                <div class="col-md-9"><input class="form-control mrl"/><span
                    class="text-warning mts help-block-right">Ayuda a la Derecha</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Repetir Contraseña</label>
                <div class="col-md-4">
                  <input class="form-control"/>
                  <p class="text-danger">Ayuda Debajo</p>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Campos de fecha</div>
        </div>
        <div class="portlet-body pan ptl">
          <form role="form" class="form-horizontal form-separated">
            <div class="form-body">
              <div class="form-group">
                <label class="col-md-3 control-label">Defecto</label>
                <div class="col-md-3">
                  <input type="text" data-date-format="dd/mm/yyyy" placeholder="dd/mm/yyyy" class="datepicker-default form-control"/>
                </div>
                <div class="col-md-3">
                  <input type="text" data-date-format="dd-mm-yyyy" placeholder="dd-mm-yyyy" class="datepicker-default form-control"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Formatos</label>
                <div class="col-md-3">
                  <input type="text" data-date-format="mm-dd-yyyy" placeholder="mm-dd-yyyy" class="datepicker-default form-control"/>
                </div>
                <div class="col-md-3">
                  <input type="text" data-date-format="dd-mm-yyyy" placeholder="dd-mm-yyyy" class="datepicker-default form-control"/>
                </div>
                <div class="col-md-3">
                  <input type="text" data-date-format="mm-yyyy" placeholder="mm-yyyy" class="datepicker-default form-control"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Intervalo de años</label>
                <div class="col-md-3">
                  <div class="input-group">
                    <input type="text" class="datepicker-years form-control"/>
                    <div class="input-group-addon">
                      <i class="fa fa-calendar"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Rangos</label>
                <div class="col-md-6">
                  <div class="input-group input-daterange">
                    <input type="text" name="start" class="form-control"/>
                    <span class="input-group-addon">hasta</span>
                    <input type="text" name="end" class="form-control"/>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-actions">
              <div class="col-md-offset-3 col-md-9">
                <button type="submit" class="btn btn-primary">Enviar</button>
                &nbsp;
                <button type="button" class="btn default">Cancelar</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Estados de validaciones</div>
        </div>
        <div class="portlet-body">
          <form role="form"></form>
          <div class="row">
            <div class="col-md-12"><h4 class="block-heading">Estado de validaciones con iconos</h4>
              <div class="form-group">
                <label for="inputSuccess" class="control-label">Input por Defecto</label>
                <div class="input-icon right">
                  <i data-hover="tooltip" data-original-title="Email address" data-container="body" class="glyphicon glyphicon-info-sign tooltips"></i>
                  <input type="text" class="form-control"/>
                </div>
              </div>
              <div class="form-group has-success">
                <label for="inputSuccess" class="control-label">Input con aprovación</label>
                <div class="input-icon right">
                  <i data-hover="tooltip" data-original-title="You look OK!" data-container="body" class="glyphicon glyphicon-ok tooltips"></i>
                  <input type="text" class="form-control"/>
                </div>
              </div>
              <div class="form-group has-warning">
                <label for="inputWarning" class="control-label">Input advertencia</label>
                <div class="input-icon right">
                  <i data-hover="tooltip" data-original-title="please provide an email" data-container="body" class="glyphicon glyphicon-warning-sign tooltips"></i>
                  <input type="text" class="form-control"/>
                </div>
              </div>
              <div class="form-group has-error">
                <label for="inputError" class="control-label">Input con error</label>
                <div class="input-icon right">
                  <i data-hover="tooltip" data-original-title="please write a valid email" data-container="body" class="glyphicon glyphicon-exclamation-sign tooltips"></i>
                  <input type="text" class="form-control"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Componentes Básicos</div>
        </div>
        <div class="portlet-body">
          <form role="form">
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label for="InputText">Texto</label>
                  <input type="email" id="InputText" placeholder="Enter text" class="form-control"/>
                </div>
                <div class="form-group">
                  <label for="InputEmail">Correo eléctronico</label>
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                    <input type="text" placeholder="Email Address" class="form-control"/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="InputPassword">Contraseña</label>
                  <div class="input-group">
                    <input type="password" placeholder="Password" class="form-control"/>
                    <span  class="input-group-addon"><i class="fa fa-key"></i></span>
                  </div>
                </div>
                <div class="form-group">
                  <label for="InputDropdown">Multiple Selecion</label>
                  <select multiple="multiple" class="form-control">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                    <option>Option 5</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>Checkboxes</label>
                  <div class="checkbox-list">
                    <label><input type="checkbox"/>&nbsp;Checkbox 1</label>
                    <label><input type="checkbox"/>&nbsp;Checkbox 2</label>
                    <label><input type="checkbox" disabled="disabled"/>&nbsp;Disabled</label>
                  </div>
                </div>
                <div class="form-group">
                  <label>Inline Checkboxes</label>
                  <div class="checkbox-list">
                    <label class="checkbox-inline"><input id="inlineCheckbox1" type="checkbox" value="option1"/>&nbsp; Checkbox 1</label>
                    <label class="checkbox-inline"><input id="inlineCheckbox2" type="checkbox" value="option2"/>&nbsp; Checkbox 2</label>
                    <label class="checkbox-inline"><input id="inlineCheckbox3" type="checkbox" value="option3" disabled="disabled"/>&nbsp; Disabled</label>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="">icono en la izquierda</label>
                  <div class="input-icon">
                    <i class="fa fa-bell"></i><input type="text" placeholder="Left icon" class="form-control"/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="">icono en la derecha</label>
                  <div class="input-icon right">
                    <i class="fa fa-microphone"></i><input type="text" placeholder="Right icon" class="form-control"/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="">Input con rueda giratoria</label>
                  <div class="input-icon right">
                    <i class="fa fa-spinner fa-spin"></i><input type="text" placeholder="Process something" class="form-control"/>
                  </div>
                </div>
                <div class="form-group">
                  <label for="">Textarea</label>
                  <textarea rows="3" class="form-control"></textarea>
                </div>
                <div class="form-group">
                  <label>Radio</label>
                  <div class="radio-list">
                    <label><input id="optionsRadios1" type="radio" name="optionsRadios" value="option1" checked="checked"/>&nbsp; Option 1</label>
                    <label><input id="optionsRadios2" type="radio" name="optionsRadios" value="option2"/>&nbsp; Option 2</label>
                    <label><input id="optionsRadios3" type="radio" name="optionsRadios" value="option3" disabled="disabled"/>&nbsp;Deshabilitado</label>
                  </div>
                </div>
                <div class="form-group">
                  <label>Inline Radio</label>
                  <div class="radio-list">
                    <label class="radio-inline"><input id="optionsRadios4" type="radio" name="optionsRadios" value="option1" checked="checked"/>&nbsp; Option 1</label>
                    <label class="radio-inline"><input id="optionsRadios5" type="radio" name="optionsRadios" value="option2"/>&nbsp; Option 2</label>
                    <label class="radio-inline"><input id="optionsRadios6" type="radio" name="optionsRadios" value="option3" disabled="disabled"/>&nbsp; Deshabilitado</label>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="">Deshabilitado</label>
                  <input type="text" placeholder="Disabled" disabled="disabled" class="form-control"/>
                </div>
                <div class="form-group">
                  <label for="">solo lectura</label><input type="text" placeholder="Readonly" readonly="readonly" class="form-control"/>
                </div>
                <div class="form-group">
                  <label for="">Desplegable</label>
                  <select class="form-control">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                    <option>Option 5</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="">Control estatico</label>
                  <p class="form-control-static">example@email.com</p>
                </div>
                <div class="form-group">
                  <label for="exampleInputFile1">input cargar archivo</label>
                  <input id="exampleInputFile1" type="file"/>
                  <p class="help-block">texto de ayuda aqui.</p>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="portlet">
        <div class="portlet-header">
          <div class="caption">Barra de busquedas</div>
        </div>
        <div class="portlet-body"><h4 class="block-heading">Checkboxes complentarios</h4>
          <div class="row">
            <div class="col-md-6 mbm">
              <div class="input-group">
                <span class="input-group-addon"><input type="checkbox"/></span><input type="text" class="form-control"/>
              </div>
            </div>
            <div class="col-md-6 mbm">
              <div class="input-group">
                <input type="text" class="form-control"/><span class="input-group-addon"><input type="checkbox"/></span>
              </div>
            </div>
          </div>
          <div class="clearfix mbxxl"></div>
          <h4 class="block-heading">Botón complentarios</h4>
          <div class="row">
            <div class="col-md-6 mbm">
              <div class="input-group">
                <span class="input-group-btn">
                  <button type="button" class="btn btn-primary"> Go! </button>
                </span>
                <input type="text" class="form-control"/>
              </div>
            </div>
            <div class="col-md-6 mbm">
              <div class="input-group">
                <input type="text" class="form-control"/>
                <span class="input-group-btn"><button type="button" class="btn btn-primary"> Ir</button></span>
              </div>
            </div>
          </div>
          <div class="clearfix mbxxl"></div>
          <h4 class="block-heading">Con botones a los lados</h4>
          <div class="row">
            <div class="col-md-12 mbm">
              <div class="input-group">
                <span class="input-group-btn"><button type="button" class="btn btn-orange">Ir!</button></span>
                <input type="text" class="form-control"/>
                <span class="input-group-btn"><button type="button" class="btn btn-orange">Ir!</button></span>
              </div>
            </div>
          </div>
          <div class="clearfix mbxxl"></div>
          <h4 class="block-heading">Botones desplegables</h4>
          <div class="row">
            <div class="col-md-6 mbm">
              <div class="input-group">
                <div class="input-group-btn">
                  <button type="button" data-toggle="dropdown"
                          class="btn btn-green dropdown-toggle">Action <i
                      class="fa fa-angle-down"></i></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Accion</a></li>
                    <li><a href="#">Otra accion</a></li>
                    <li><a href="#">Algo más aqui</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Enlace separado</a></li>
                  </ul>
                </div>
                <input type="text" class="form-control"/></div>
            </div>
            <div class="col-md-6 mbm">
              <div class="input-group"><input type="text" class="form-control"/>

                <div class="input-group-btn">
                  <button type="button" data-toggle="dropdown"
                          class="btn btn-green dropdown-toggle">Accion <i
                      class="fa fa-angle-down"></i></button>
                  <ul class="dropdown-menu pull-right">
                    <li><a href="#">Accion</a></li>
                    <li><a href="#">Otra accion</a></li>
                    <li><a href="#">Algo más aqui</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Enlace separado</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="clearfix mbxxl"></div>
          <h4 class="block-heading">Botones con Dropdowns On Both Sides</h4>

          <div class="row">
            <div class="col-md-12 mbm">
              <div class="input-group">
                <div class="input-group-btn">
                  <button type="button" data-toggle="dropdown"
                          class="btn btn-yellow dropdown-toggle">Accion <i
                      class="fa fa-angle-down"></i></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Accion</a></li>
                    <li><a href="#">Otra accion</a></li>
                    <li><a href="#">Algo más aqui</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Enlace separado</a></li>
                  </ul>
                </div>
                <input type="text" class="form-control"/>

                <div class="input-group-btn">
                  <button type="button" data-toggle="dropdown"
                          class="btn btn-yellow dropdown-toggle">Accion <i
                      class="fa fa-angle-down"></i></button>
                  <ul class="dropdown-menu pull-right">
                    <li><a href="#">Accion</a></li>
                    <li><a href="#">Otra accion</a></li>
                    <li><a href="#">Algo más aqui</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Enlace separado</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="clearfix mbxxl"></div>
          <h4 class="block-heading">Segmented Buttons</h4>

          <div class="row">
            <div class="col-md-6 mbm">
              <div class="input-group">
                <div class="input-group-btn">
                  <button type="button" tabindex="-1" class="btn btn-blue">Action</button>
                  <button type="button" data-toggle="dropdown" tabindex="-1"
                          class="btn btn-blue dropdown-toggle"><i
                      class="fa fa-angle-down"></i></button>
                  <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <input type="text" class="form-control"/></div>
            </div>
            <div class="col-md-6 mbm">
              <div class="input-group"><input type="text" class="form-control"/>

                <div class="input-group-btn">
                  <button type="button" tabindex="-1" class="btn btn-blue">Action</button>
                  <button type="button" data-toggle="dropdown" tabindex="-1"
                          class="btn btn-blue dropdown-toggle"><i
                      class="fa fa-angle-down"></i></button>
                  <ul role="menu" class="dropdown-menu pull-right">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock %}
{% block javascripts %}
  {{ parent() }}
  <script src="{{ asset('bundles/ubvprincipal/js/form-layouts.js') }}"></script>
{% endblock %}