content: import 'package:hooks_riverpod/hooks_riverpod.dart';
  import 'package:shadcn_flutter/shadcn_flutter.dart';
  import 'package:spotube/collections/routes.gr.dart';
  import 'package:spotube/collections/spotube_icons.dart';
  import 'package:spotube/components/ui/button_tile.dart';
  import 'package:spotube/modules/connect/local_devices.dart';
  import 'package:spotube/components/titlebar/titlebar.dart';
  import 'package:spotube/extensions/context.dart';
  import 'package:spotube/provider/connect/clients.dart';
  import 'package:auto_route/auto_route.dart';
  
  @RoutePage()
  class ConnectPage extends HookConsumerWidget {
    static const name = "connect";
  
    const ConnectPage({super.key});
  
    @override
    Widget build(BuildContext context, ref) {
      final ThemeData(:colorScheme, :typography) = Theme.of(context);
  
      final connectClients = ref.watch(connectClientsProvider);
      final connectClientsNotifier = ref.read(connectClientsProvider.notifier);
      final discoveredDevices = connectClients.asData?.value.services;
  
      return SafeArea(
        bottom: false,
        child: Scaffold(
          headers: [
            TitleBar(title: Text(context.l10n.devices)),
          ],
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: CustomScrollView(
              slivers: [
                SliverPadding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  sliver: SliverToBoxAdapter(
                    child: Text(
                      context.l10n.remote,
                      style: typography.bold,
                    ),
                  ),
                ),
                const SliverGap(10),
                SliverList.separated(
                  itemCount: discoveredDevices?.length ?? 0,
                  separatorBuilder: (context, index) => const Gap(10),
                  itemBuilder: (context, index) {
                    final device = discoveredDevices![index];
                    final selected =
                        connectClients.asData?.value.resolvedService?.name ==
                            device.name;
                    return ButtonTile(
                      selected: selected,
                      leading: const Icon(SpotubeIcons.monitor),
                      title: Text(device.name),
                      subtitle: selected
                          ? Text(
                              "${connectClients.asData?.value.resolvedService?.host}"
                              ":${connectClients.asData?.value.resolvedService?.port}",
                            )
                          : null,
                      trailing: selected
                          ? IconButton.outline(
                              icon: const Icon(SpotubeIcons.power),
                              size: ButtonSize.small,
                              onPressed: () =>
                                  connectClientsNotifier.clearResolvedService(),
                            )
                          : null,
                      onPressed: () {
                        if (selected) {
                          context.navigateTo(const ConnectControlRoute());
                        } else {
                          connectClientsNotifier.resolveService(device);
                        }
                      },
                    );
                  },
                ),
                const ConnectPageLocalDevices(),
              ],
            ),
          ),
        ),
      );
    }
  }
  