@extends('public._layout')

@section('title', 'Enter class code')

@section('content')
    <h1>Enter your class code</h1>
    <p class="lead">Type the join code your teacher gave you. It looks like <span style="font-family: ui-monospace, monospace; color: #BF9237; font-weight: 700;">XXX-XXXX</span>.</p>

    <form method="POST" action="{{ route('join.manual.submit') }}">
        @csrf
        <label for="join_code">Class code</label>
        <input type="text" id="join_code" name="join_code" autofocus required
               class="otp-input" maxlength="24"
               placeholder="XXX-XXXX"
               style="text-transform: uppercase;"
               value="{{ old('join_code') }}">
        @error('join_code')
            <div class="error">{{ $message }}</div>
        @enderror

        <button type="submit" class="primary">CONTINUE →</button>
    </form>
@endsection