
                {devices.as(d => {
                    return d.map(device => {
                        if (device.get_media_class() !== type) {
                            return <box cssClasses={[ 'empty' ]}></box>;
                        }
                        return (
                            <button
                                cssClasses={bind(device, "id").as(id => {
                                    if (
                                        id ===
                                        (type ===
                                        AstalWp.MediaClass.AUDIO_SPEAKER
                                            ? wp.defaultSpeaker.id
                                            : type ===
                                                AstalWp.MediaClass
                                                    .AUDIO_MICROPHONE
                                              ? wp.defaultMicrophone.id
                                              : "")
                                    ) {
                                        return [
                                            "sink-option",
                                            "currently-selected-sink-option",
                                        ];
                                    } else {
                                        return ["sink-option"];
                                    }
                                })}
                                child={
                                    <box halign={Gtk.Align.START}>
                                        <image
                                            iconName={bind(device, "icon").as(
                                                icon => icon,
                                            )}
                                            marginEnd={3}
                                        ></image>
                                        <label
                                            label={bind(
                                                device,
                                                "description",
                                            ).as(t => t ?? "")}
                                        ></label>
                                    </box>
                                }
                                onClicked={() => {
                                    device.set_is_default(true);
                                }}
                            ></button>
                        );
                    });
                })}
