@csrf
@if($mode === 'edit') @method('PUT') @endif

<div class="panel">
    <div class="form-grid">
        <div class="field">
            <label>Nombre completo</label>
            <input type="text" name="name" value="{{ old('name', $user->name) }}" required>
            @error('name')<small class="flash-error" style="display:block;margin-top:6px">{{ $message }}</small>@enderror
        </div>
        <div class="field">
            <label>Correo electrónico</label>
            <input type="email" name="email" value="{{ old('email', $user->email) }}" required>
            @error('email')<small class="flash-error" style="display:block;margin-top:6px">{{ $message }}</small>@enderror
        </div>
        <div class="field">
            <label>Usuario</label>
            <input type="text" name="username" value="{{ old('username', $user->username) }}">
            @error('username')<small class="flash-error" style="display:block;margin-top:6px">{{ $message }}</small>@enderror
        </div>
        <div class="field">
            <label>Estado</label>
            <select name="is_active">
                <option value="1" @selected(old('is_active', (int) ($user->is_active ?? 1)) == 1)>Activo</option>
                <option value="0" @selected(old('is_active', (int) ($user->is_active ?? 1)) == 0)>Inactivo</option>
            </select>
        </div>
        <div class="field">
            <label>Contraseña {{ $mode === 'edit' ? '(opcional)' : '' }}</label>
            <input type="password" name="password" {{ $mode === 'create' ? 'required' : '' }}>
            @error('password')<small class="flash-error" style="display:block;margin-top:6px">{{ $message }}</small>@enderror
        </div>
        <div class="field">
            <label>Confirmar contraseña</label>
            <input type="password" name="password_confirmation" {{ $mode === 'create' ? 'required' : '' }}>
        </div>
    </div>
</div>

<div class="panel">
    <div style="font-weight:800;margin-bottom:10px">Perfiles / roles</div>
    <div class="checkbox-grid">
        @foreach($roles as $role)
            <label class="check">
                <input type="checkbox" name="roles[]" value="{{ $role->id }}" {{ in_array($role->id, old('roles', $selectedRoles), true) ? 'checked' : '' }}>
                <span>
                    <strong>{{ $role->display_name }}</strong><br>
                    <small>{{ $role->description ?: $role->name }}</small>
                </span>
            </label>
        @endforeach
    </div>
    @error('roles')<small class="flash-error" style="display:block;margin-top:8px">{{ $message }}</small>@enderror
</div>

<div class="actions" style="margin-top:16px">
    <button class="btn" type="submit">{{ $mode === 'create' ? 'Crear usuario' : 'Guardar cambios' }}</button>
    <a class="btn-outline" href="{{ route('usuarios.index') }}">Cancelar</a>
</div>