@extends('layouts.auth', ['title' => 'Login'])

@section('content')
<div class="login-layout">
    <div class="login-scene">
        <div class="login-shape login-shape--left"></div>
        <div class="login-shape login-shape--center"></div>
        <div class="login-shape login-shape--top"></div>
        <div class="login-shape login-shape--right"></div>
        <div class="login-shape login-shape--bottom"></div>

        <section class="login-hero">
            <div class="login-brand-mark" aria-hidden="true">
                <svg width="68" height="79" viewBox="0 0 68 79" fill="none">
                    <path d="M34 0 68 19.5v40L34 79 0 59.5v-40L34 0Z" fill="#27AED8"/>
                    <rect x="18" y="39" width="8" height="18" rx="4" fill="white"/>
                    <rect x="29" y="31" width="8" height="26" rx="4" fill="white"/>
                    <rect x="40" y="24" width="8" height="33" rx="4" fill="white"/>
                    <rect x="51" y="16" width="8" height="41" rx="4" fill="white"/>
                </svg>
            </div>
            <h1 class="login-title">Dsumma<br>Administration</h1>
        </section>

        <section class="login-card">
            <div class="login-card-logo" aria-hidden="true">
                <svg width="78" height="90" viewBox="0 0 78 90" fill="none">
                    <path d="M39 0 78 22.5v45L39 90 0 67.5v-45L39 0Z" fill="#2EADD8"/>
                    <rect x="18" y="41" width="8" height="18" rx="4" fill="white"/>
                    <rect x="30" y="31" width="8" height="28" rx="4" fill="white"/>
                    <rect x="42" y="24" width="8" height="35" rx="4" fill="white"/>
                    <rect x="54" y="16" width="8" height="43" rx="4" fill="white"/>
                </svg>
            </div>
            <div class="login-divider"></div>

            <form method="POST" action="{{ route('login.store') }}" class="login-form">
                @csrf

                <label class="login-field">
                    <span>Email</span>
                    <input type="email" name="email" value="{{ old('email') }}" required autofocus>
                </label>

                <label class="login-field">
                    <span>Password</span>
                    <input type="password" name="password" required>
                </label>

                @if($errors->any())
                    <div class="login-error">{{ $errors->first() }}</div>
                @endif

                <button class="login-submit" type="submit">Log in</button>
            </form>

            <div class="login-help">
                Cant log in?
                <a href="#">here</a>
            </div>
        </div>
    </div>
</div>
@endsection