@extends('public._layout')

@section('title', 'Verify code')

@section('content')
    <div class="badge-class">{{ $classroom->name }}</div>
    <h1>Almost there!</h1>
    <p class="lead">
        We sent a 6-digit code to <strong>{{ $hint }}</strong>. Enter it below to join {{ $classroom->name }}.
    </p>

    @if ($devCode)
        <div class="dev">
            <strong>Dev mode:</strong> your code is <code>{{ $devCode }}</code>
        </div>
    @endif

    <form method="POST" action="{{ route('join.verify', ['code' => $code]) }}">
        @csrf
        <label for="otp_code">6-digit code</label>
        <input type="text" id="otp_code" name="otp_code" autofocus required
               class="otp-input" maxlength="6" inputmode="numeric" pattern="[0-9]{6}"
               placeholder="••••••">
        @error('otp_code')
            <div class="error">{{ $message }}</div>
        @enderror

        <button type="submit" class="primary">JOIN {{ strtoupper($classroom->name) }} →</button>
    </form>

    <p style="text-align: center; margin-top: 1.5rem; font-size: 0.85rem;">
        <a href="{{ route('join.show', ['code' => $code]) }}" style="color: #6B6B6B; text-decoration: none;">
            ← Use a different email or phone
        </a>
    </p>
@endsection