<div class="p-6">
    <h3 class="text-lg font-semibold text-t1 mb-1">Change Role</h3>
    <p class="text-sm text-t2 mb-5">Update role for <span class="text-t1 font-medium">{{ $memberName }}</span></p>

    <div>
        <label class="block text-xs font-medium text-t2 mb-1.5">Role</label>
        <select wire:model="role"
            class="block w-full px-3 py-2.5 bg-s2 border border-white/[.06] rounded-lg text-sm text-t1 focus:outline-none focus:ring-1 focus:ring-blue/50 focus:border-blue/50">
            <option value="editor">Editor</option>
            <option value="viewer">Viewer</option>
            <option value="admin">Admin</option>
        </select>
    </div>

    <div class="flex gap-3 mt-6 justify-end">
        <button wire:click="closeModal"
            class="px-4 py-2 bg-s2 text-t2 text-sm font-medium rounded-lg hover:text-t1 transition-colors border border-white/[.06]">
            Cancel
        </button>
        <button wire:click="save"
            class="px-4 py-2 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity">
            Save
        </button>
    </div>
</div>
