@extends('layouts.login')

@section('content')
    <div class="centered-screen">
        <div class="container-sm">
            <x-fluent-card 
                class="p-lg bg-canvas"
            >
                <x-slot name="title">
                    <div class="d-flex align-center gap-sm pb-lg">
                        <img src="{{ asset('assets/images/favicon.jpg') }}" class="h-5xl" />
                        <span class="fw-light fs-sm">{{ $info->name }}</span>
                    </div>
                    <div class="fw-semibold fs-h2 text-center">Content Management System</div>
                </x-slot>
                <x-slot:body>
                    <form method="POST" action="{{ route('login') }}" class="p-lg">
                        @csrf
                        <div class="d-flex flex-column">
                            <x-fluent-input
                                type="email"
                                name="email"
                                invalid="{{ $errors->has('email') ? 'is-invalid' : '' }}"
                                placeholder="Username"
                                icon="person"
                                :autofocus="true"
                            />
                            <x-fluent-input 
                                type="password"
                                placeholder="Password" 
                                name="password" 
                                invalid="{{ $errors->has('password') ? 'is-invalid' : '' }}"
                                icon="key"
                            />
                        </div>
                        <div class="mt-md small text-muted">
                            Lupa password? <a href="#" class="text-decoration-none text-hover-underline">Klick di sini</a>
                        </div>
                        <div class="small text-muted">
                            <a href="#" class="text-decoration-none text-hover-underline">Reset MFA (Multi-Factor Authentication)</a>
                        </div>
                        <x-fluent-button type="submit" class="mt-xl" icon="chevron_right" icon-position="right" variant="primary">
                            Login
                        </x-fluent-button>
                    </form>
                </x-slot:body>
            </x-fluent-card>
            <x-fluent-card 
                class="bg-canvas p-0 mt-lg"
            >
                <x-slot:body>
                    <x-fluent-list-group :items="[
                        [
                            'title' => 'Login dengan Google',
                            'icon' => 'google_icon',
                            'url' => route('auth.google'),
                        ],
                    ]" />
                </x-slot:body>
            </x-fluent-card>
        </div>
    </div>
    <div class="position-fixed text-center text-sm-end bottom-0 end-0 text-muted small p-1 px-3 w-100">
        {{ $info->copyright }}
    </div>
@endsection