@csrf

<div class="profile-form-heading">
    <div class="profile-form-heading-icon" aria-hidden="true">
        <i class="fa-solid fa-user-shield"></i>
    </div>
    <div>
        <p class="profile-form-eyebrow">Account administration</p>
        <h2 class="profile-form-title">User profile</h2>
        <p class="profile-form-heading-copy">Identity, permissions, and secure access.</p>
    </div>
</div>

<div class="profile-form-section">
    <div class="profile-form-section-heading">
        <span class="profile-form-section-number">01</span>
        <div>
            <h3 class="profile-form-section-title">Identity</h3>
            <p class="profile-form-section-copy">Team member account details.</p>
        </div>
    </div>

    <div class="profile-form-grid">
        <div class="profile-form-field">
            <label for="name" class="profile-form-label">
                Full name <span class="profile-form-required" aria-hidden="true">*</span>
            </label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-user profile-form-control-icon" aria-hidden="true"></i>
                <input id="name" name="name" type="text" value="{{ old('name', $user->name) }}"
                    placeholder="Team member name" autocomplete="name"
                    class="builder-input profile-form-control @error('name') profile-form-control-error @enderror"
                    @error('name') aria-invalid="true" aria-describedby="name-error" @enderror required>
            </div>
            @error('name')<p id="name-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="email" class="profile-form-label">
                Email address <span class="profile-form-required" aria-hidden="true">*</span>
            </label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-envelope profile-form-control-icon" aria-hidden="true"></i>
                <input id="email" name="email" type="email" value="{{ old('email', $user->email) }}"
                    placeholder="name@business.com" autocomplete="email" inputmode="email"
                    class="builder-input profile-form-control @error('email') profile-form-control-error @enderror"
                    @error('email') aria-invalid="true" aria-describedby="email-error" @enderror required>
            </div>
            @error('email')<p id="email-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>
    </div>
</div>

<div class="profile-form-section">
    <div class="profile-form-section-heading">
        <span class="profile-form-section-number">02</span>
        <div>
            <h3 class="profile-form-section-title">Access</h3>
            <p class="profile-form-section-copy">Role and sign-in credentials.</p>
        </div>
    </div>

    <div class="profile-form-grid">
        <div class="profile-form-field md:col-span-2">
            <label for="role" class="profile-form-label">
                Role <span class="profile-form-required" aria-hidden="true">*</span>
            </label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-id-badge profile-form-control-icon" aria-hidden="true"></i>
                <select id="role" name="role"
                    class="builder-select profile-form-control @error('role') profile-form-control-error @enderror"
                    @error('role') aria-invalid="true" aria-describedby="role-error" @enderror required>
                    <option value="admin" @selected(old('role', $user->role) === 'admin')>Admin</option>
                    <option value="employee" @selected(old('role', $user->role ?: 'employee') === 'employee')>Employee</option>
                </select>
            </div>
            <p class="profile-form-help">Admins manage financial controls and settings. Employees handle operational documents.</p>
            @error('role')<p id="role-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="password" class="profile-form-label">
                Password @if (! $user->exists)<span class="profile-form-required" aria-hidden="true">*</span>@endif
            </label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-lock profile-form-control-icon" aria-hidden="true"></i>
                <input id="password" name="password" type="password"
                    placeholder="{{ $user->exists ? 'Leave blank to keep current password' : 'Minimum 8 characters' }}"
                    autocomplete="new-password"
                    class="builder-input profile-form-control @error('password') profile-form-control-error @enderror"
                    @error('password') aria-invalid="true" aria-describedby="password-error" @enderror
                    @required(! $user->exists)>
            </div>
            @error('password')<p id="password-error" class="profile-form-error">{{ $message }}</p>@enderror
        </div>

        <div class="profile-form-field">
            <label for="password_confirmation" class="profile-form-label">Confirm password</label>
            <div class="profile-form-control-wrap">
                <i class="fa-solid fa-lock profile-form-control-icon" aria-hidden="true"></i>
                <input id="password_confirmation" name="password_confirmation" type="password"
                    placeholder="Repeat the new password" autocomplete="new-password"
                    class="builder-input profile-form-control" @required(! $user->exists)>
            </div>
        </div>
    </div>
</div>

<div class="profile-form-actions">
    <a href="{{ route('users.index') }}" class="secondary-button">Cancel</a>
    <button type="submit" class="primary-button">
        <i class="fa-solid fa-check" aria-hidden="true"></i>
        {{ $submitLabel }}
    </button>
</div>