@extends('layouts.auth')
@section('title', 'Admin sign-in')
@section('content')
@php($dark = 'background:var(--ink);border-color:var(--ink-3);color:var(--ivory)')
<div class="band" style="min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden">
    <img src="{{ asset('assets/img/emblem-ivory.webp') }}" alt="" style="position:absolute;width:760px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.04">
    <header class="wrap row between" style="height:80px;position:relative;max-width:1320px">
        <img src="{{ asset('assets/img/wordmark-ivory.webp') }}" alt="KalpCanvas" style="height:32px;width:auto">
        <span class="badge" style="background:var(--ink-2);color:var(--muted-d)">Restricted · Admin panel</span>
    </header>
    <main style="flex:1;display:flex;align-items:center;justify-content:center;padding:32px 16px;position:relative">
        <div class="stack" style="gap:24px;width:min(100%,420px);background:var(--ink-2);border:1px solid var(--ink-3);border-radius:16px;padding:36px">
            @yield('card')
            @hasSection('card')@else
            <div class="stack" style="gap:8px"><span class="eyebrow">Admin panel</span><h1 class="d3">Sign in to manage KalpCanvas</h1><p class="small muted">For Super Admin, Managers, HR and Accounts.</p></div>
            @include('partials.flash')
            <form method="post" action="{{ route('admin.login') }}" class="stack" style="gap:16px">
                @csrf
                <div class="field"><label class="label" for="al-email" style="color:var(--muted-d)">Work email</label><input id="al-email" name="email" type="email" class="input" autocomplete="username" required autofocus value="{{ old('email') }}" style="{{ $dark }}"></div>
                <div class="field"><div class="row between"><label class="label" for="al-pw" style="color:var(--muted-d)">Password</label><a href="{{ route('admin.password.request') }}" class="xs" style="color:var(--muted-d)">Forgot?</a></div><input id="al-pw" name="password" type="password" class="input" autocomplete="current-password" required style="{{ $dark }}"></div>
                <label class="check" style="color:var(--muted-d)"><input type="checkbox" name="remember" value="1"> <span>Keep me signed in</span></label>
                <button class="btn btn-ivory btn-block">Continue</button>
            </form>
            @endif
            <p class="xs muted" style="border-top:1px solid var(--ink-3);padding-top:16px">5 failed attempts lock sign-in for 15 minutes. Every sign-in is recorded with time and IP address.</p>
        </div>
    </main>
    <footer class="wrap row between xs muted" style="height:64px;position:relative;max-width:1320px"><span>Not an admin?</span><span class="row" style="gap:16px"><a href="{{ route('team.login') }}" style="color:var(--muted-d)">Team login</a><a href="{{ route('client.login') }}" style="color:var(--muted-d)">Client login</a></span></footer>
</div>
@endsection