<div style="height:640px">
<.auth_layout title="Sign in to Acme" subtitle="Welcome back. Use your work email.">
<:brand><span class="ui-sidebar-logo" style="width:28px;height:28px"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg></span>Acme</:brand>
<button class="ui-btn" data-variant="outline" style="width:100%" type="button"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>Continue with single sign-on</button>
<div class="ui-auth-divider">or</div>
<form class="ui-stack" data-gap="4" method="post" action="/session">
{{ csrf_field() }}
<div class="ui-field" style="max-width:none"><label class="ui-label" for="au-email">Email</label><input class="ui-input" id="au-email" name="email" type="email" autocomplete="username" placeholder="you@company.com"></div>
<div class="ui-field" style="max-width:none"><div class="ui-split"><label class="ui-label" for="au-password">Password</label><a class="ui-link" href="#" style="font-size:13px">Forgot password?</a></div><input class="ui-input" id="au-password" name="password" type="password" autocomplete="current-password"></div>
<button class="ui-btn" style="width:100%">Sign in</button>
</form>
<:footer>New to Acme? <a href="#">Create an account</a></:footer>
</.auth_layout>
</div>
<div style="height:520px;margin-top:24px">
<.auth_layout title="Create your account" layout="split">
<a class="ui-btn" href="#" style="width:100%">Continue with email</a>
<:footer>Already have an account? <a href="#">Sign in</a></:footer>
<:aside><strong>Acme</strong><blockquote>“We closed the books two days faster the first month.”<cite>Grace Hopper, Finance lead</cite></blockquote></:aside>
</.auth_layout>
</div>