|  |  |  | import 'package:easy_localization/easy_localization.dart'; | 
					
						
							|  |  |  | import 'package:flutter/material.dart'; | 
					
						
							|  |  |  | import 'package:flutter_staggered_animations/flutter_staggered_animations.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/core/app_assets.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/core/app_state.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/core/dependencies.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/core/utils/size_utils.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/core/utils/utils.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/extensions/int_extensions.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/extensions/string_extensions.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/extensions/widget_extensions.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/features/authentication/authentication_view_model.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/generated/locale_keys.g.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/presentation/authentication/quick_login.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/presentation/home/data/landing_page_data.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/presentation/home/widgets/habib_wallet_card.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/presentation/home/widgets/large_service_card.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/presentation/home/widgets/small_service_card.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/presentation/home/widgets/welcome_widget.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/presentation/medical_file/medical_file_page.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/services/navigation_service.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/theme/colors.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/widgets/common_bottom_sheet.dart'; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/widgets/custom_tab_bar.dart' show CustomTabBar; | 
					
						
							|  |  |  | import 'package:hmg_patient_app_new/widgets/transitions/fade_page.dart'; | 
					
						
							|  |  |  | import 'package:provider/provider.dart'; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | class LandingPage extends StatefulWidget { | 
					
						
							|  |  |  |   const LandingPage({super.key}); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   @override | 
					
						
							|  |  |  |   State<LandingPage> createState() => _LandingPageState(); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | class _LandingPageState extends State<LandingPage> { | 
					
						
							|  |  |  |   late final AuthenticationViewModel authVM; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   @override | 
					
						
							|  |  |  |   void initState() { | 
					
						
							|  |  |  |     authVM = context.read<AuthenticationViewModel>(); | 
					
						
							|  |  |  |     if(mounted) { | 
					
						
							|  |  |  |       authVM.checkLastLoginStatus(() { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         showQuickLogin(context, false); | 
					
						
							|  |  |  |       }); | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |     super.initState(); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   @override | 
					
						
							|  |  |  |   Widget build(BuildContext context) { | 
					
						
							|  |  |  |     AppState appState = getIt.get<AppState>(); | 
					
						
							|  |  |  |     NavigationService navigationService = getIt.get<NavigationService>(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     return Scaffold( | 
					
						
							|  |  |  |       backgroundColor: AppColors.bgScaffoldColor, | 
					
						
							|  |  |  |       body: SingleChildScrollView( | 
					
						
							|  |  |  |         child: Column( | 
					
						
							|  |  |  |           children: [ | 
					
						
							|  |  |  |             Padding( | 
					
						
							|  |  |  |               padding: EdgeInsets.only(top: 50.0), | 
					
						
							|  |  |  |               child: Row( | 
					
						
							|  |  |  |                 mainAxisAlignment: MainAxisAlignment.spaceBetween, | 
					
						
							|  |  |  |                 children: [ | 
					
						
							|  |  |  |                   appState.isAuthenticated | 
					
						
							|  |  |  |                       ? WelcomeWidget( | 
					
						
							|  |  |  |                           onTap: () {}, | 
					
						
							|  |  |  |                           name: ('${appState.getAuthenticatedUser()!.firstName!} ${appState.getAuthenticatedUser()!.lastName!}'), | 
					
						
							|  |  |  |                           imageUrl: appState.getAuthenticatedUser()?.gender == 1 ? AppAssets.male_img : AppAssets.femaleImg, | 
					
						
							|  |  |  |                         ) | 
					
						
							|  |  |  |                       : CustomButton( | 
					
						
							|  |  |  |                           text: LocaleKeys.loginOrRegister.tr(context: context), | 
					
						
							|  |  |  |                           onPressed: () async { | 
					
						
							|  |  |  |                             await authVM.onLoginPressed(); | 
					
						
							|  |  |  |                           }, | 
					
						
							|  |  |  |                           backgroundColor: Color(0xffFEE9EA), | 
					
						
							|  |  |  |                           borderColor: Color(0xffFEE9EA), | 
					
						
							|  |  |  |                           textColor: Color(0xffED1C2B), | 
					
						
							|  |  |  |                           fontSize: 16, | 
					
						
							|  |  |  |                           fontWeight: FontWeight.w500, | 
					
						
							|  |  |  |                           borderRadius: 12, | 
					
						
							|  |  |  |                           padding: EdgeInsets.fromLTRB(10, 0, 10, 0), | 
					
						
							|  |  |  |                           height: 50, | 
					
						
							|  |  |  |                         ), | 
					
						
							|  |  |  |                   Row( | 
					
						
							|  |  |  |                     children: [ | 
					
						
							|  |  |  |                       Utils.buildSvgWithAssets(icon: AppAssets.bell, height: 20, width: 20).onPress(() { | 
					
						
							|  |  |  |                         Navigator.of(context).push( | 
					
						
							|  |  |  |                           FadePage( | 
					
						
							|  |  |  |                             page: MedicalFilePage(), | 
					
						
							|  |  |  |                             // page: LoginScreen(),
 | 
					
						
							|  |  |  |                           ), | 
					
						
							|  |  |  |                         ); | 
					
						
							|  |  |  |                       }).paddingSymmetrical(8.h, 0), | 
					
						
							|  |  |  |                       Utils.buildSvgWithAssets(icon: AppAssets.search_icon, height: 20, width: 20).onPress(() { | 
					
						
							|  |  |  |                         Navigator.of(context).push( | 
					
						
							|  |  |  |                           FadePage( | 
					
						
							|  |  |  |                             page: MedicalFilePage(), | 
					
						
							|  |  |  |                             // page: LoginScreen(),
 | 
					
						
							|  |  |  |                           ), | 
					
						
							|  |  |  |                         ); | 
					
						
							|  |  |  |                       }).paddingSymmetrical(8.h, 0), | 
					
						
							|  |  |  |                       Utils.buildSvgWithAssets(icon: AppAssets.contact_icon, height: 20, width: 20).onPress(() { | 
					
						
							|  |  |  |                         Navigator.of(context).push( | 
					
						
							|  |  |  |                           FadePage( | 
					
						
							|  |  |  |                             page: MedicalFilePage(), | 
					
						
							|  |  |  |                             // page: LoginScreen(),
 | 
					
						
							|  |  |  |                           ), | 
					
						
							|  |  |  |                         ); | 
					
						
							|  |  |  |                       }).paddingSymmetrical(8.h, 0), | 
					
						
							|  |  |  |                     ], | 
					
						
							|  |  |  |                   ) | 
					
						
							|  |  |  |                 ], | 
					
						
							|  |  |  |               ).paddingSymmetrical(24.h, 0.h), | 
					
						
							|  |  |  |             ), | 
					
						
							|  |  |  |             SizedBox(height: 16.h), | 
					
						
							|  |  |  |             appState.isAuthenticated | 
					
						
							|  |  |  |                 ? Column( | 
					
						
							|  |  |  |                     children: [ | 
					
						
							|  |  |  |                       Container( | 
					
						
							|  |  |  |                         width: double.infinity, | 
					
						
							|  |  |  |                         decoration: RoundedRectangleBorder().toSmoothCornerDecoration( | 
					
						
							|  |  |  |                           color: AppColors.whiteColor, | 
					
						
							|  |  |  |                           borderRadius: 24, | 
					
						
							|  |  |  |                         ), | 
					
						
							|  |  |  |                         child: Padding( | 
					
						
							|  |  |  |                           padding: EdgeInsets.all(12.h), | 
					
						
							|  |  |  |                           child: Column( | 
					
						
							|  |  |  |                             children: [ | 
					
						
							|  |  |  |                               Utils.buildSvgWithAssets(icon: AppAssets.home_calendar_icon, width: 32.h, height: 32.h), | 
					
						
							|  |  |  |                               SizedBox(height: 12.h), | 
					
						
							|  |  |  |                               "You do not have any upcoming appointment. Please book an appointment".toText12(isCenter: true), | 
					
						
							|  |  |  |                               SizedBox(height: 12.h), | 
					
						
							|  |  |  |                               CustomButton( | 
					
						
							|  |  |  |                                 text: LocaleKeys.bookAppo.tr(context: context), | 
					
						
							|  |  |  |                                 onPressed: () { | 
					
						
							|  |  |  |                                   Navigator.of(context).pushReplacement( | 
					
						
							|  |  |  |                                     MaterialPageRoute(builder: (BuildContext context) => LandingPage()), | 
					
						
							|  |  |  |                                   ); | 
					
						
							|  |  |  |                                 }, | 
					
						
							|  |  |  |                                 backgroundColor: Color(0xffFEE9EA), | 
					
						
							|  |  |  |                                 borderColor: Color(0xffFEE9EA), | 
					
						
							|  |  |  |                                 textColor: Color(0xffED1C2B), | 
					
						
							|  |  |  |                                 fontSize: 14, | 
					
						
							|  |  |  |                                 fontWeight: FontWeight.w500, | 
					
						
							|  |  |  |                                 borderRadius: 12, | 
					
						
							|  |  |  |                                 padding: EdgeInsets.fromLTRB(10, 0, 10, 0), | 
					
						
							|  |  |  |                                 height: 40, | 
					
						
							|  |  |  |                                 icon: AppAssets.add_icon, | 
					
						
							|  |  |  |                                 iconColor: AppColors.primaryRedColor, | 
					
						
							|  |  |  |                               ), | 
					
						
							|  |  |  |                             ], | 
					
						
							|  |  |  |                           ), | 
					
						
							|  |  |  |                         ), | 
					
						
							|  |  |  |                       ).paddingSymmetrical(24.h, 0.h), | 
					
						
							|  |  |  |                       SizedBox(height: 12.h), | 
					
						
							|  |  |  |                       Row( | 
					
						
							|  |  |  |                         mainAxisAlignment: MainAxisAlignment.spaceBetween, | 
					
						
							|  |  |  |                         children: [ | 
					
						
							|  |  |  |                           "Quick Links".toText16(isBold: true), | 
					
						
							|  |  |  |                           Row( | 
					
						
							|  |  |  |                             children: [ | 
					
						
							|  |  |  |                               "View medical file".toText12(color: AppColors.primaryRedColor), | 
					
						
							|  |  |  |                               SizedBox(width: 2.h), | 
					
						
							|  |  |  |                               Icon(Icons.arrow_forward_ios, color: AppColors.primaryRedColor, size: 10.h), | 
					
						
							|  |  |  |                             ], | 
					
						
							|  |  |  |                           ), | 
					
						
							|  |  |  |                         ], | 
					
						
							|  |  |  |                       ).paddingSymmetrical(24.h, 0.h).onPress(() { | 
					
						
							|  |  |  |                         Navigator.of(context).push( | 
					
						
							|  |  |  |                           FadePage( | 
					
						
							|  |  |  |                             page: MedicalFilePage(), | 
					
						
							|  |  |  |                           ), | 
					
						
							|  |  |  |                         ); | 
					
						
							|  |  |  |                       }), | 
					
						
							|  |  |  |                       SizedBox(height: 12.h), | 
					
						
							|  |  |  |                       Container( | 
					
						
							|  |  |  |                         height: 127.h, | 
					
						
							|  |  |  |                         decoration: RoundedRectangleBorder().toSmoothCornerDecoration( | 
					
						
							|  |  |  |                           color: AppColors.whiteColor, | 
					
						
							|  |  |  |                           borderRadius: 24, | 
					
						
							|  |  |  |                         ), | 
					
						
							|  |  |  |                         child: Padding( | 
					
						
							|  |  |  |                           padding: EdgeInsets.all(16.h), | 
					
						
							|  |  |  |                           child: Column( | 
					
						
							|  |  |  |                             children: [ | 
					
						
							|  |  |  |                               Expanded( | 
					
						
							|  |  |  |                                 child: ListView.separated( | 
					
						
							|  |  |  |                                   scrollDirection: Axis.horizontal, | 
					
						
							|  |  |  |                                   itemCount: LandingPageData.getLoggedInServiceCardsList.length, | 
					
						
							|  |  |  |                                   shrinkWrap: true, | 
					
						
							|  |  |  |                                   padding: const EdgeInsets.only(left: 0, right: 8), | 
					
						
							|  |  |  |                                   itemBuilder: (context, index) { | 
					
						
							|  |  |  |                                     return AnimationConfiguration.staggeredList( | 
					
						
							|  |  |  |                                       position: index, | 
					
						
							|  |  |  |                                       duration: const Duration(milliseconds: 1000), | 
					
						
							|  |  |  |                                       child: SlideAnimation( | 
					
						
							|  |  |  |                                         horizontalOffset: 100.0, | 
					
						
							|  |  |  |                                         child: FadeInAnimation( | 
					
						
							|  |  |  |                                           child: SmallServiceCard( | 
					
						
							|  |  |  |                                             icon: LandingPageData.getLoggedInServiceCardsList[index].icon, | 
					
						
							|  |  |  |                                             title: LandingPageData.getLoggedInServiceCardsList[index].title, | 
					
						
							|  |  |  |                                             subtitle: LandingPageData.getLoggedInServiceCardsList[index].subtitle, | 
					
						
							|  |  |  |                                             iconColor: LandingPageData.getLoggedInServiceCardsList[index].iconColor, | 
					
						
							|  |  |  |                                             textColor: LandingPageData.getLoggedInServiceCardsList[index].textColor, | 
					
						
							|  |  |  |                                             backgroundColor: LandingPageData.getLoggedInServiceCardsList[index].backgroundColor, | 
					
						
							|  |  |  |                                             isBold: LandingPageData.getLoggedInServiceCardsList[index].isBold, | 
					
						
							|  |  |  |                                             serviceName: LandingPageData.getLoggedInServiceCardsList[index].serviceName, | 
					
						
							|  |  |  |                                           ), | 
					
						
							|  |  |  |                                         ), | 
					
						
							|  |  |  |                                       ), | 
					
						
							|  |  |  |                                     ); | 
					
						
							|  |  |  |                                   }, | 
					
						
							|  |  |  |                                   separatorBuilder: (BuildContext cxt, int index) => 0.width, | 
					
						
							|  |  |  |                                 ), | 
					
						
							|  |  |  |                               ), | 
					
						
							|  |  |  |                             ], | 
					
						
							|  |  |  |                           ), | 
					
						
							|  |  |  |                         ), | 
					
						
							|  |  |  |                       ).paddingSymmetrical(24.h, 0.h), | 
					
						
							|  |  |  |                     ], | 
					
						
							|  |  |  |                   ) | 
					
						
							|  |  |  |                 : Container( | 
					
						
							|  |  |  |                     height: 127.h, | 
					
						
							|  |  |  |                     decoration: RoundedRectangleBorder().toSmoothCornerDecoration( | 
					
						
							|  |  |  |                       color: AppColors.whiteColor, | 
					
						
							|  |  |  |                       borderRadius: 24, | 
					
						
							|  |  |  |                     ), | 
					
						
							|  |  |  |                     child: Padding( | 
					
						
							|  |  |  |                       padding: EdgeInsets.all(16.h), | 
					
						
							|  |  |  |                       child: Column( | 
					
						
							|  |  |  |                         children: [ | 
					
						
							|  |  |  |                           Expanded( | 
					
						
							|  |  |  |                             child: ListView.separated( | 
					
						
							|  |  |  |                               scrollDirection: Axis.horizontal, | 
					
						
							|  |  |  |                               itemCount: LandingPageData.getNotLoggedInServiceCardsList.length, | 
					
						
							|  |  |  |                               shrinkWrap: true, | 
					
						
							|  |  |  |                               padding: const EdgeInsets.only(left: 0, right: 8), | 
					
						
							|  |  |  |                               itemBuilder: (context, index) { | 
					
						
							|  |  |  |                                 return AnimationConfiguration.staggeredList( | 
					
						
							|  |  |  |                                   position: index, | 
					
						
							|  |  |  |                                   duration: const Duration(milliseconds: 1000), | 
					
						
							|  |  |  |                                   child: SlideAnimation( | 
					
						
							|  |  |  |                                     horizontalOffset: 100.0, | 
					
						
							|  |  |  |                                     child: FadeInAnimation( | 
					
						
							|  |  |  |                                       child: SmallServiceCard( | 
					
						
							|  |  |  |                                         icon: LandingPageData.getNotLoggedInServiceCardsList[index].icon, | 
					
						
							|  |  |  |                                         title: LandingPageData.getNotLoggedInServiceCardsList[index].title, | 
					
						
							|  |  |  |                                         subtitle: LandingPageData.getNotLoggedInServiceCardsList[index].subtitle, | 
					
						
							|  |  |  |                                         iconColor: LandingPageData.getNotLoggedInServiceCardsList[index].iconColor, | 
					
						
							|  |  |  |                                         textColor: LandingPageData.getNotLoggedInServiceCardsList[index].textColor, | 
					
						
							|  |  |  |                                         backgroundColor: LandingPageData.getNotLoggedInServiceCardsList[index].backgroundColor, | 
					
						
							|  |  |  |                                         isBold: LandingPageData.getNotLoggedInServiceCardsList[index].isBold, | 
					
						
							|  |  |  |                                       ), | 
					
						
							|  |  |  |                                     ), | 
					
						
							|  |  |  |                                   ), | 
					
						
							|  |  |  |                                 ); | 
					
						
							|  |  |  |                               }, | 
					
						
							|  |  |  |                               separatorBuilder: (BuildContext cxt, int index) => 0.width, | 
					
						
							|  |  |  |                             ), | 
					
						
							|  |  |  |                           ), | 
					
						
							|  |  |  |                         ], | 
					
						
							|  |  |  |                       ), | 
					
						
							|  |  |  |                     ), | 
					
						
							|  |  |  |                   ).paddingSymmetrical(24.h, 0.h), | 
					
						
							|  |  |  |             SizedBox(height: 16.h), | 
					
						
							|  |  |  |             Row( | 
					
						
							|  |  |  |               mainAxisAlignment: MainAxisAlignment.spaceBetween, | 
					
						
							|  |  |  |               children: [ | 
					
						
							|  |  |  |                 "Services".toText16(isBold: true), | 
					
						
							|  |  |  |                 Row( | 
					
						
							|  |  |  |                   children: [ | 
					
						
							|  |  |  |                     "View all services".toText12(color: AppColors.primaryRedColor), | 
					
						
							|  |  |  |                     SizedBox(width: 2.h), | 
					
						
							|  |  |  |                     Icon(Icons.arrow_forward_ios, color: AppColors.primaryRedColor, size: 10.h), | 
					
						
							|  |  |  |                   ], | 
					
						
							|  |  |  |                 ), | 
					
						
							|  |  |  |               ], | 
					
						
							|  |  |  |             ).paddingSymmetrical(24.h, 0.h), | 
					
						
							|  |  |  |             SizedBox(height: 16.h), | 
					
						
							|  |  |  |             SizedBox( | 
					
						
							|  |  |  |               height: 325.h, | 
					
						
							|  |  |  |               child: Column( | 
					
						
							|  |  |  |                 children: [ | 
					
						
							|  |  |  |                   Expanded( | 
					
						
							|  |  |  |                     child: ListView.separated( | 
					
						
							|  |  |  |                       scrollDirection: Axis.horizontal, | 
					
						
							|  |  |  |                       itemCount: LandingPageData.getServiceCardsList.length, | 
					
						
							|  |  |  |                       shrinkWrap: true, | 
					
						
							|  |  |  |                       padding: const EdgeInsets.only(left: 0, right: 8), | 
					
						
							|  |  |  |                       itemBuilder: (context, index) { | 
					
						
							|  |  |  |                         return AnimationConfiguration.staggeredList( | 
					
						
							|  |  |  |                           position: index, | 
					
						
							|  |  |  |                           duration: const Duration(milliseconds: 1000), | 
					
						
							|  |  |  |                           child: SlideAnimation( | 
					
						
							|  |  |  |                             horizontalOffset: 100.0, | 
					
						
							|  |  |  |                             child: FadeInAnimation( | 
					
						
							|  |  |  |                               child: LargeServiceCard( | 
					
						
							|  |  |  |                                 image: LandingPageData.getServiceCardsList[index].icon, | 
					
						
							|  |  |  |                                 title: LandingPageData.getServiceCardsList[index].title, | 
					
						
							|  |  |  |                                 subtitle: LandingPageData.getServiceCardsList[index].subtitle, | 
					
						
							|  |  |  |                                 icon: LandingPageData.getServiceCardsList[index].largeCardIcon, | 
					
						
							|  |  |  |                               ), | 
					
						
							|  |  |  |                             ), | 
					
						
							|  |  |  |                           ), | 
					
						
							|  |  |  |                         ); | 
					
						
							|  |  |  |                       }, | 
					
						
							|  |  |  |                       separatorBuilder: (BuildContext cxt, int index) => 0.width, | 
					
						
							|  |  |  |                     ), | 
					
						
							|  |  |  |                   ), | 
					
						
							|  |  |  |                 ], | 
					
						
							|  |  |  |               ), | 
					
						
							|  |  |  |             ), | 
					
						
							|  |  |  |             SizedBox(height: 16.h), | 
					
						
							|  |  |  |             appState.isAuthenticated ? HabibWalletCard() : SizedBox(), | 
					
						
							|  |  |  |             SizedBox(height: 16.h), | 
					
						
							|  |  |  |           ], | 
					
						
							|  |  |  |         ), | 
					
						
							|  |  |  |       ), | 
					
						
							|  |  |  |     ); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   void showQuickLogin(BuildContext context, bool isDone) { | 
					
						
							|  |  |  |     showCommonBottomSheet( | 
					
						
							|  |  |  |       context, | 
					
						
							|  |  |  |       title: "", | 
					
						
							|  |  |  |       child: QuickLogin( | 
					
						
							|  |  |  |         isDone: isDone, | 
					
						
							|  |  |  |         onPressed: () { | 
					
						
							|  |  |  |           // sharedPref.setBool(HAS_ENABLED_QUICK_LOGIN, true);
 | 
					
						
							|  |  |  |           // loginWithFingerPrintFace(3, 1, user, deviceToken);
 | 
					
						
							|  |  |  |         }, | 
					
						
							|  |  |  |       ), | 
					
						
							|  |  |  |       height: 400, | 
					
						
							|  |  |  |       isFullScreen: false, | 
					
						
							|  |  |  |       callBackFunc: (str) {}, | 
					
						
							|  |  |  |     ); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | } |