<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

$this->title = 'Вход';
?>
<div class="md-login-container d-flex justify-content-center align-items-center vh-100">
    <div class="md-login-card bg-white p-4 shadow rounded" style="max-width: 400px; width: 100%;">
        <h2 class="md-login-title text-center mb-4"><?= Html::encode($this->title) ?></h2>
        
        <?php $form = ActiveForm::begin([
            'id' => 'login-form',
            'options' => ['class' => 'needs-validation'],
        ]); ?>

        <div class="mb-3">
            <?= $form->field($model, 'email')->textInput([
                'autofocus' => true,
                'class' => 'form-control profile-input',
                'style' => 'font-size: 14px; border: 1px solid var(--input-border, rgba(224, 224, 224, 0.56)); border-radius: 8px; padding: 10px 12px; background-color: var(--input-bg, rgba(248, 249, 250, 0.25)); color: var(--text-primary, #000000);',
                'onfocus' => "this.style.borderColor='#588157'; this.style.boxShadow='0 0 0 2px rgba(88, 129, 87, 0.2)';",
                'onblur' => "this.style.borderColor='var(--input-border, rgba(224, 224, 224, 0.56))'; this.style.boxShadow='none';"
            ]) ?>
        </div>

        <div class="mb-3">
            <?= $form->field($model, 'password')->passwordInput([
                'class' => 'form-control profile-input',
                'style' => 'font-size: 14px; border: 1px solid var(--input-border, rgba(224, 224, 224, 0.56)); border-radius: 8px; padding: 10px 12px; background-color: var(--input-bg, rgba(248, 249, 250, 0.25)); color: var(--text-primary, #000000);',
                'onfocus' => "this.style.borderColor='#588157'; this.style.boxShadow='0 0 0 2px rgba(88, 129, 87, 0.2)';",
                'onblur' => "this.style.borderColor='var(--input-border, rgba(224, 224, 224, 0.56))'; this.style.boxShadow='none';"
            ]) ?>
        </div>

        <div class="mb-4">
            <?= $form->field($model, 'rememberMe')->checkbox([
                'template' => "<div class='form-check mb-3'>{input} {label}</div>\n<div class='md-error'>{error}</div>",
                'labelOptions' => ['class' => 'form-check-label'],
                'inputOptions' => ['class' => 'form-check-input'],
            ]) ?>
        </div>

        <div class="d-flex justify-content-between align-items-center ">
            <button type="submit" 
                    class="btn"
                    style="font-size: 14px; text-transform: none; background-color: #588157; color: white; border: none; border-radius: 8px; padding: 10px 24px; width: 500px;"
                    onmouseover="this.style.backgroundColor='rgb(53, 126, 52)'"
                    onmouseout="this.style.backgroundColor='#588157'">
                Войти
            </button>
        </div>
        <?php ActiveForm::end(); ?>
    </div>
</div>