@extends('layouts.app')

@section('content')
<div class="mpin-lock-page" id="mpin-lock-page" data-verify-url="{{ route('gc.mpin.verify') }}">
    <div class="mpin-lock-card">
        <div class="mpin-lock-header">
            <img src="{{ $user->avatarUrl() }}" alt="{{ $user->name }}" class="mpin-lock-avatar">
            <h1>Enter chat MPIN</h1>
            <p>Enter your 4-digit MPIN to open GLETRA chat</p>
        </div>

        @if($errors->any())
            <div class="mpin-lock-error">{{ $errors->first() }}</div>
        @endif
        <div class="mpin-lock-error hidden" id="mpin-lock-error" role="alert"></div>

        <div class="mpin-dots" id="mpin-dots" aria-live="polite">
            <span></span><span></span><span></span><span></span>
        </div>

        <form id="mpin-lock-form" class="hidden">
            @csrf
            <input type="hidden" name="mpin" id="mpin-lock-value">
        </form>

        <div class="mpin-keypad" id="mpin-keypad">
            @foreach([1,2,3,4,5,6,7,8,9] as $digit)
                <button type="button" class="mpin-key" data-digit="{{ $digit }}">{{ $digit }}</button>
            @endforeach
            <button type="button" class="mpin-key mpin-key-muted" data-action="clear" aria-label="Clear">
                <i class="fa-solid fa-delete-left"></i>
            </button>
            <button type="button" class="mpin-key" data-digit="0">0</button>
            <button type="button" class="mpin-key mpin-key-muted" data-action="back" aria-label="Backspace">
                <i class="fa-solid fa-backspace"></i>
            </button>
        </div>

        <p class="mpin-lock-hint">Attempts left: <span id="mpin-attempts-left">{{ $attemptsLeft }}</span></p>

        <a href="{{ route('gc.settings.security') }}" class="mpin-lock-link">Manage MPIN in Settings</a>
    </div>
</div>
@endsection