@extends('layouts.app')

@section('title', 'Log in')

@section('content')
<main class="container lg-wrap">
  <form class="lg-form" data-ajax action="{{ route('login.submit') }}" method="POST" novalidate>
    <h1>Login</h1>

    <label class="field lg-field"><span>Email</span>
      <input type="email" name="email" placeholder="Email" autocomplete="email" autofocus><small class="ferr"></small></label>

    <label class="field lg-field"><span>Password</span>
      <span class="lg-pass">
        <input type="password" name="password" placeholder="Password" autocomplete="current-password">
        <button type="button" class="lg-eye" aria-label="Show password" aria-pressed="false"><svg viewBox="0 0 24 24"><path d="M2 12s3.600-7 10-7 10 7 10 7-3.600 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></button>
      </span>
      <small class="ferr"></small></label>

    <div class="lg-row">
      <label class="check"><input type="checkbox" name="remember" value="1"> Remember me</label>
      <a href="{{ route('contact') }}" class="lg-link">Forgot your password?</a>
    </div>

    <button class="btn lg-btn">Sign in</button>
    <p class="lg-alt">New customer? <a href="{{ route('register') }}" class="lg-link">Sign up for an account</a></p>

    <p class="muted lg-resend" id="resendBox" hidden>Didn't get the email?
      <a href="#" class="lg-link" id="resendLink" data-url="{{ route('verification.resend') }}">Resend verification link</a></p>
  </form>
</main>
@endsection

@push('scripts')
<script>
// Show / hide password
document.querySelectorAll('.lg-eye').forEach(function (b) {
  b.addEventListener('click', function () {
    var i = b.parentNode.querySelector('input'), show = i.type === 'password';
    i.type = show ? 'text' : 'password';
    b.setAttribute('aria-pressed', show ? 'true' : 'false');
    b.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
  });
});
</script>
@endpush