@extends('cms.layouts.auth')

@section('contents')
    <div class="content">

        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-4">

                <x-cms.common-message />

                <!-- Sign In Block -->
                <div class="block block-themed block-fx-shadow mb-0">
                    <div class="block-header">
                        <h3 class="block-title">Sign In</h3>
                        @if (isDevelopment())
                            <div class="block-options">
                                <a class="btn-block-option font-size-sm" href="op_auth_reminder.html">Forgot Password?</a>
                                <a class="btn-block-option" href="op_auth_signup.html" data-toggle="tooltip"
                                    data-placement="left" title="New Account">
                                    <i class="fa fa-user-plus"></i>
                                </a>
                            </div>
                        @endif
                    </div>
                    <div class="block-content">
                        <div class="p-sm-3 px-lg-4">
                            <h3 class="mb-2">{{ config('cms.app-name') }}</h3>
                            <p>Welcome, please login.</p>

                            <!-- Sign In Form -->

                            <form class="js-validation-login form-horizontal push-30-t push-50"
                                action="{{ route('cms.postLogin') }}" method="post">

                                @csrf

                                <div class="form-group">
                                    <div class="col-xs-12">
                                        <div class="form-material form-material-primary floating">
                                            <label for="login-username">Username</label>
                                            <input class="form-control" type="text" id="login-username" name="username"
                                                placeholder="username">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12">
                                        <div class="form-material form-material-primary floating">
                                            <label for="login-password">Password</label>
                                            <input class="form-control" type="password" id="login-password" name="password"
                                                placeholder="password">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12">
                                        <label class="css-input switch switch-sm switch-primary">
                                            <input type="checkbox" id="login-remember-me"
                                                name="login-remember-me"><span></span> Remember Me?
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <button class="btn btn-block btn-primary" type="submit"><i
                                                class="si si-login pull-right"></i> Log in</button>
                                    </div>
                                </div>
                            </form>
                            <!-- END Sign In Form -->
                        </div>
                    </div>
                </div>
                <!-- END Sign In Block -->
            </div>
        </div>
    </div>
@endsection