@extends('layouts.installer')

@section('title', 'Admin Account')
@section('subtitle', 'Create the primary Super Admin account to manage the application.')

@section('content')
<form action="{{ route('install.admin.post') }}" method="POST" class="space-y-6">
    @csrf
    
    <div>
        <label class="block text-sm font-medium text-text-dim mb-2">Full Name</label>
        <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i data-lucide="user" class="w-5 h-5 text-text-dim"></i>
            </div>
            <input type="text" name="admin_name" required placeholder="John Doe" class="form-input form-input-icon" value="{{ old('admin_name', $data['admin_name']) }}">
        </div>
    </div>

    <div>
        <label class="block text-sm font-medium text-text-dim mb-2">Email Address</label>
        <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i data-lucide="mail" class="w-5 h-5 text-text-dim"></i>
            </div>
            <input type="email" name="admin_email" required placeholder="admin@example.com" class="form-input form-input-icon" value="{{ old('admin_email', $data['admin_email']) }}">
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Password</label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i data-lucide="lock" class="w-5 h-5 text-text-dim"></i>
                </div>
                <input type="password" name="admin_password" required class="form-input form-input-icon" autocomplete="new-password">
            </div>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Confirm Password</label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i data-lucide="check-circle" class="w-5 h-5 text-text-dim"></i>
                </div>
                <input type="password" name="admin_password_confirmation" required class="form-input form-input-icon" autocomplete="new-password">
            </div>
        </div>
    </div>


    <div class="pt-6 border-t border-white/5 flex justify-between items-center">
        <a href="{{ route('install.queue') }}" class="text-sm text-text-dim hover:text-white transition-colors">
            &larr; Back
        </a>
        <button type="submit" class="btn-primary">
            Next Step
            <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </button>
    </div>
</form>
@endsection