@extends('layouts.auth')
@section('title', 'Client sign-in')
@section('content')
<div style="display:flex;flex-wrap:wrap;min-height:100vh">
    <aside class="band" style="flex:1 1 420px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:48px">
        <a href="{{ route('home') }}"><img src="{{ asset('assets/img/wordmark-ivory.webp') }}" alt="KalpCanvas" style="height:36px;width:auto;position:relative"></a>
        <img src="{{ asset('assets/img/emblem-ivory.webp') }}" alt="" style="position:absolute;width:560px;right:-140px;bottom:-120px;opacity:.1">
        <div class="stack" style="gap:16px;position:relative;max-width:420px"><h1 class="d2">Imagination, made real.</h1><p class="muted">Your projects, approvals, files and invoices in one place.</p></div>
    </aside>
    <main style="flex:1 1 480px;display:flex;align-items:center;justify-content:center;padding:48px 24px">
        <div class="stack" style="gap:24px;width:min(100%,420px)" data-tabs-root>
            @hasSection('card')
                @yield('card')
            @else
            <div class="stack" style="gap:8px"><span class="eyebrow">Client portal</span><h2 class="d3">Client sign-in</h2><p class="muted small">New client? Use the link in your invitation email.</p></div>
            @include('partials.flash')
            <div class="tabs" role="tablist" data-tabs>
                <button type="button" class="tab" role="tab" data-tab="password">Password</button>
                <button type="button" class="tab" role="tab" data-tab="code">One-time code</button>
            </div>
            <form method="post" action="{{ route('client.login') }}" class="stack" style="gap:16px" data-panel="password">
                @csrf
                <div class="field"><label class="label" for="lg-email">Email</label><input id="lg-email" name="email" type="email" class="input" autocomplete="username" required value="{{ old('email') }}"></div>
                <div class="field"><div class="row between"><label class="label" for="lg-pw">Password</label><a href="{{ route('client.password.request') }}" class="xs b">Forgot password?</a></div><input id="lg-pw" name="password" type="password" class="input" autocomplete="current-password" required></div>
                <label class="check"><input type="checkbox" name="remember" value="1"> <span>Keep me signed in on this device</span></label>
                <button class="btn btn-block">Sign in</button>
            </form>
            <form method="post" action="{{ route('client.login.send') }}" class="stack" style="gap:16px" data-panel="code" hidden>
                @csrf
                <div class="field"><label class="label" for="lg-email2">Email</label><input id="lg-email2" name="email" type="email" class="input" autocomplete="username" required></div>
                <p class="hint">We’ll send a 6-digit code by email or WhatsApp. It works for 10 minutes.</p>
                <button class="btn btn-block">Send code</button>
            </form>
            @endif
            <div class="stack xs muted" style="gap:6px;border-top:1px solid var(--line);padding-top:16px">
                <span>Work at KalpCanvas? <a href="{{ route('team.login') }}">Team login</a> · <a href="{{ route('admin.login') }}">Admin login</a></span>
            </div>
        </div>
    </main>
</div>
@endsection