<?php

/* @var yii\web\View $this */
/* @var $form yii\bootstrap\ActiveForm */
/* @var $model \common\models\LoginForm */

use yii\helpers\Html;
use yii\widgets\ActiveForm;

$this->title = 'Login';
$this->params['breadcrumbs'][] = $this->title;
?>

<div class="container-fluid h-100">
	<div class="row justify-content-center align-items-center">
		<div class="col-12 col-sm-2">
			<img style="width: 100%; margin-bottom: 30px;" src="/NGauge/images/ngauge-logo-poweredby-large.png" alt="NGauge Logo" />
		</div>
	</div>
	
	<div class="row justify-content-center align-items-center">
		<div class="login-page col-12 col-sm-4">				
			<div class="login-box">
				<p class="login-box-msg">Please Sign In</p>
				<div class="login-box-only">
							
					<div class="col-12">
						<?php $form = ActiveForm::begin(['id' => 'login-form',
								'enableAjaxValidation' => false,
								'enableClientValidation' => true,
								'validateOnBlur' => false,
								'validateOnType' => false,
								'validateOnChange' => false,]); ?>

							<?= $form->field($model, 'username')->textinput() ?>
							<?= $form->field($model, 'password')->passwordInput() ?>

							<?= $form->field($model, 'rememberMe')->checkbox() ?>
							
							<div style="color:#999;margin:1em 0;display: none">
								If you forgot your password you can <?= Html::a('reset it', ['site/request-password-reset']) ?>.
							</div>
							<?= $form->field($model, 'permissions')->hiddenInput()->label(false) ?>

							<div class="form-group text-center">
								<?= Html::submitButton('Login', ['class' => 'btn btn-primary login-button', 'name' => 'login-button']) ?>
							</div>
							<?php ActiveForm::end(); ?>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<style>

.login-box-msg {
    text-align: center;
    padding-top: 1rem;
    font-size: 1rem;
    font-weight: 600;
	color: var(--NGauge-orange-color);
}
.login-button {
	background-color: var(--NGauge-orange-color);
	border-color: var(--NGauge-orange-color);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 0;
}
.login-logo > img {
width: 100%;
}
.login-page{
	background-color: rgba(55,71,71, 0.5);
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
	}
	.login-page{
		font-size: 16px;
		color: black;
	}
</style>