<div class="card">
	<div class="card-header bg-secondary">
    	<h5 class="card-title text-center text-white">Cambio de contraseña</h5>
  	</div>
  	<!-- Barra de progreso -->
  	<div class="progress"></div>

	<div class="card-body" id="formulario">
		<!-- Mensaje que devuelve el formulario. -->
		<div id="message"></div>

		<div class="row">
			<div class="col-md-10 offset-md-1">
				<?php 
					$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
						'layout' => TbHtml::FORM_LAYOUT_VERTICAL,
						'id' => 'cambio-clave-form',
						'enableClientValidation' => true,
						'enableAjaxValidation' => false,
						'clientOptions' => array(
							'validateOnSubmit' => true,
							'afterValidate' => 'js:function(form, data, hasError) {
			              		if(!hasError){
			                		return false;
			              		}
			                }',
						),
					));
				?>
				<br>	
				<div class="row">
					<div class="col-md-10 offset-md-1">
						<p>La contraseña debe tener entre 8 y 15 caracteres, al menos un dígito, una minúscula, una mayúscula y  uno de los siguientes simbolos <b>$@!%*_#.()?&</b></p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 offset-md-3">
						<div class="form-row justify-content-start">
		                    <div class="form-group col-md-12">
		                        <div class="input-password">
		                            <span class="show-password" onclick="show_password(this)"><i class="fas fa-eye"></i></span>
		                            <?php 
		                            echo $form->passwordFieldControlGroup($model, 'contrasena_actual', 
		                                array(
		                                    'autocomplete'  => 'off',
		                                    'maxlength'     => 15,
		                                )
		                            );
		                            ?>
		                        </div>
		                    </div>
		                </div>
		                <div class="form-row justify-content-start">
		                    <div class="form-group col-md-12">
		                        <div class="input-password">
		                            <span class="show-password" onclick="show_password(this)"><i class="fas fa-eye"></i></span>
		                            <?php 
		                            echo $form->passwordFieldControlGroup($model, 'contrasena_nueva', 
		                                array(
		                                    'autocomplete'  => 'off',
		                                    'maxlength'     => 15,
		                                )
		                            );
		                            ?>
		                        </div>
		                    </div>
		                </div>
		                <div class="form-row justify-content-start">
		                    <div class="form-group col-md-12">
		                        <div class="input-password">
		                            <span class="show-password" onclick="show_password(this)"><i class="fas fa-eye"></i></span>
		                            <?php 
		                            echo $form->passwordFieldControlGroup($model, 'repetir_contrasena', 
		                                array(
		                                    'autocomplete'  => 'off',
		                                    'maxlength'     => 15,
		                                )
		                            );
		                            ?>
		                        </div>
		                    </div>
		                </div>
					</div>
				</div>
				<br>
				<div class="form-group text-center">
					<?php 
					echo TbHtml::submitButton('Guardar Cambios', 
						array(
							'color' => TbHtml::BUTTON_COLOR_SECONDARY, 
							'class' => 'btn-xs',
							'id' => 'guardar',
						)
					); ?>
				</div>
				<?php 
				$this->endWidget(); 
				?>
			</div>
		</div>
	</div>
</div>
<?php 
Yii::app()->getClientScript()->registerScriptFile(Yii::app()->baseUrl . '/assets/js/guardar.js', CClientScript::POS_END); 
?>