@extends('layouts.master-auth')

@section('title', 'Lock Screen')

@section('content')
<div class="auth-main">
    <div class="auth-wrapper v3">
        <div class="auth-form">
            <div class="card my-5">
                <div class="card-body">
                    <div class="text-center">
                         <img src="/build/images/user/avatar-2.jpg" alt="user-image" class="user-avtar rounded-circle img-thumbnail mb-3" style="width: 100px;">
                         <h4 class="mb-3"><b>Hi, {{ $user->system_user_username ?? 'User' }}</b></h4>
                         <p class="text-muted mb-4">Enter your password to unlock the screen!</p>
                    </div>
                    
                    <form action="{{ route('lock-screen.unlock') }}" method="POST">
                        @csrf
                        <div class="form-group mb-3">
                            <input type="password" name="password" class="form-control" placeholder="Password" required autofocus>
                            @error('password')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="d-grid mt-4">
                            <button type="submit" class="btn btn-primary">Unlock</button>
                        </div>
                    </form>
                    
                    <div class="text-center mt-3">
                         <p>Not you? <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form-lock').submit();">Logout</a></p>
                    </div>
                     <form id="logout-form-lock" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection