@extends('admin.layouts.base')

@section('content')
<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="row">
                    @if($message->hasMessages())
                        {{ $message->display() }}
                    @endif
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card-group d-block d-md-flex row">
                    <div class="card col-md-7 p-4 mb-0">
                        <div class="card-body">
                            <h1>Admin</h1>
                            <p class="text-medium-emphasis">Sign In to your account</p>
                            
                            <form method="POST" action="/admin/login.php">
                                <div class="input-group mb-3">
                                    <span class="input-group-text">
                                        <svg class="icon">
                                            <use xlink:href="vendor/svg/free.svg#cil-user"></use>
                                        </svg>
                                    </span>

                                    <div class="form-floating">
                                        <input type="text" name="username" class="form-control {{ hasError('username') }}" value="{{ old('username') }}" id="floatingInput" placeholder="name@example.com">
                                        <label for="floatingInput">Username</label>
                                    </div>
                                </div>
                                <div class="input-group mb-4">
                                    <span class="input-group-text">
                                        <svg class="icon">
                                            <use xlink:href="vendor/svg/free.svg#cil-lock-locked"></use>
                                        </svg>
                                    </span>
                                    <div class="form-floating">
                                        <input type="password"  name="password" class="form-control {{ hasError('password') }}" value="{{ old('password') }}" id="floatingPassword" placeholder="Password">
                                        <label for="floatingPassword">Password</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <button class="btn btn-primary px-4 text-white" type="submit">Login</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card col-md-5 text-white bg-primary py-5">
                        <div class="card-body d-flex align-items-center justify-content-center">
                            <div>
                                <img src="../images/logo-pemeserie-white.svg" alt="Logo Pemeserie"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection