content: import 'package:auto_route/auto_route.dart';
  import 'package:flutter/material.dart'
      show ListTile, ListTileTheme, ListTileThemeData, Material, MaterialType;
  import 'package:hooks_riverpod/hooks_riverpod.dart';
  import 'package:shadcn_flutter/shadcn_flutter.dart';
  import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
  import 'package:spotube/collections/routes.gr.dart';
  import 'package:spotube/collections/spotube_icons.dart';
  import 'package:spotube/components/titlebar/titlebar.dart';
  import 'package:spotube/extensions/context.dart';
  
  @RoutePage()
  class SettingsScrobblingPage extends HookConsumerWidget {
    static const name = "settings_scrobbling";
  
    const SettingsScrobblingPage({super.key});
  
    @override
    Widget build(BuildContext context, ref) {
      return Material(
        type: MaterialType.transparency,
        child: ListTileTheme(
          data: ListTileThemeData(
            contentPadding: EdgeInsets.zero,
            minVerticalPadding: 0,
            shape: RoundedRectangleBorder(
              borderRadius: context.theme.borderRadiusLg,
              side: BorderSide(
                color: context.theme.colorScheme.border,
                width: .5,
              ),
            ),
            textColor: context.theme.colorScheme.foreground,
            iconColor: context.theme.colorScheme.foreground,
            selectedColor: context.theme.colorScheme.accent,
            subtitleTextStyle: context.theme.typography.xSmall,
          ),
          child: SafeArea(
            bottom: false,
            child: Scaffold(
              headers: [TitleBar(title: Text(context.l10n.scrobbling))],
              child: ListView(
                padding: const EdgeInsets.all(8),
                children: [
                  Card(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: ListTile(
                      leading: const Icon(SpotubeIcons.lastFm, color: Colors.red),
                      title: Text(context.l10n.login_with_lastfm),
                      subtitle: Text(context.l10n.scrobble_to_lastfm),
                      trailing: Button.secondary(
                        leading: const Icon(SpotubeIcons.lastFm),
                        onPressed: () {
                          context.navigateTo(const LastFMLoginRoute());
                        },
                        child: Text(context.l10n.connect),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    }
  }
  