<!DOCTYPE html>
<html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="/public/assets/js/jquery-ui.min.js"></script>
    <link href="/public/assets/css/jquery-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="/parse-sdk-js"></script>
    <script type="text/javascript" src="/sc-common"></script>
    <!-- start vue -->
    
        <!-- prod minified vue js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
    
    <script src="/public/assets/js/catch-all-minified/vue.min.js"></script>
    <!-- end vue -->
    <!-- library for image orientation -->
    <script src="/public/assets/js/load-image-all.min.js"></script>
    <!-- moment.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.45/moment-timezone-with-data.min.js"></script>
    <!-- library for charts -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <link rel="stylesheet" href="/public/assets/css/material-icons.css">
    <!-- <link rel="stylesheet" href="https://kit.fontawesome.com/a59cae6e7b.css" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="/public/assets/css/font-awesome.css" crossorigin="anonymous">
    <!-- more js -->
    <script src="/public/assets/js/cookies.js"></script>
    

    
        <!-- main app -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,500|Cormorant+Garamond|Lato:300,400,700|Lora:400,500|Montserrat:400,500,600" rel="stylesheet">
        <link rel="stylesheet" href="/public/assets/css/stylesheet.css">
        <link rel="stylesheet" media="print" href="/public/assets/css/print.css">
        <script src="/public/assets/js/catch-all-minified/common.min.js"></script>
        <!-- Tip Tap browserified -->
        <script src="/public/assets/browserified/tiptap-browserified.js"></script>
        <!-- Juice browserified for inline css -->
        <script src="/public/assets/browserified/juice-browserified.js"></script>
        <!-- <script src="/public/assets/browserified/tiptaptest.js"></script> -->
        <!-- Swiper JS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    

    
        <link rel="shortcut icon" href="/public/assets/images/favicons/favicon.ico">
        <link rel="icon" sizes="16x16 32x32 64x64" href="/public/assets/images/favicons/favicon.ico">
        <link rel="apple-touch-icon" href="/public/assets/images/favicons/apple-touch-icon.png">
        <meta name="msapplication-TileColor" content="#FFFFFF">
        <meta name="msapplication-TileImage" content="/public/assets/images/favicons/favicon.ico">
    

    <link rel="stylesheet" href="/public/assets/css/ios.css">

    <!-- weglot translations -->
    

    

    

        <!-- google tag manager in analytics mode only (it's not white label, but it is also NOT a marketing page) -->

        <script>

            window.dataLayer = window.dataLayer || [];
            function gtag(){ dataLayer.push(arguments); }

            gtag('consent', 'default', {
                ad_storage: 'denied',
                ad_user_data: 'denied',
                ad_personalization: 'denied',
                analytics_storage: 'granted',
            });

        </script>

        <!-- Google Tag Manager -->
        <script>
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-TWGR9ZMS');
        </script>
        <!-- End Google Tag Manager -->
        
        <!-- Google Tag Manager (noscript) -->
        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TWGR9ZMS"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <!-- End Google Tag Manager (noscript) -->

    
    
    <!-- userway.org accessibility snippet -->
    

    

    

    

    
        <meta name="robots" content="noindex">
    
    
        <title>Page not found</title>
    
    <!-- fb open graph tags -->
    <meta property="fb:app_id" content="314788812688609" />
    
    

    <!-- Google Analytics for clubs -->
     
    <!-- END google analytics for clubs -->

    <!-- FB pixel for clubs -->
     
    <!-- FB pixel for clubs -->

    
        <!-- Calendly link widget begin -->
        <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
        <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
        <!-- Calendly link widget end -->
    

    <!-- vue date picker -->
    <!-- see: https://vue3datepicker.com/ -->
    <script src="/public/assets/js/vue-date-picker-8.5.1.js"></script>
    <link rel="stylesheet" href="/public/assets/css/vue-date-picker.css">

</head>    <body>

        
    <div class="globalMessageInsert flexNoWrap easeFast hideForPrinting">
        <div class="global-message-icon-loading">
            <div class="global-message-icon-spinner"></div>
        </div>
        <p>
            <i class="fa-solid fa-square-check global-message-icon-good"></i>
            <i class="fa-solid fa-square-xmark global-message-icon-bad"></i>
            <span></span>
        </p>
    </div>



        <!-- start standard content -->
        <div 
            id="v-content" 
            class="hidden"
        >

            <div class="flexNoWrap flexWrapOnMobile fullView">
                
                   
                    <div class="basis-50 flexGrowOne borderLeft hideOnMobile">
                        <div class="cs-login-image" style="background-image:url(https://d282wvk2qi4wzk.cloudfront.net/imageGrid_component-image_1611952471506)"></div>
                    </div>
                
                <div class="basis-50 flexGrowOne fff flexWrap align-items-center leftText">
                    <div class="centeredBlock hugePaddingBottom eightyThenNinety">

                        <div class="standardCard centeredBlock marginTop noBoxShadow noBorder leftText">
                            <h3 class="leftText">Page not found</h3>
                            <div class="standardCardBody fff noBorder">
                                <p class="noObjectsMSG leftText">Sorry, we can't seem to find the page you're looking for.<br><br>If you are a Leatherlips Yacht Club administrator, please check to make sure this page is not in DRAFT mode in the website editor. You can also contact us at <a href="mailto:support@theclubspot.com">support@theclubspot.com</a> for assistance.
                                </p>
                                <button class="primaryButton easeSuperFast smallMarginBottom marginTop">
                                    Return to homepage
                                    <a href="/" class="absoluteA"></a>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- react native tab bar -->
            <native-tab-bar-component></native-tab-bar-component>

        </div>

        <div id="v-overlays">
            <template v-if="overlays.show_push_notification">
                <show-push-notification></show-push-notification>
            </template>
        </div>
    </body>

    <script>

        //create the app
        var app_content = createApp({
            data() {
                return store
            },
            mounted() {
                $('#v-content').removeClass('hidden');
            },
            methods: {
               
            },
        });

        var app_overlays = createApp({
            data() {
                return store
            },
            mounted() {
                $('#v-overlays').removeClass('hidden');
            },
            methods: {
            },
        });
    </script>

    <!-- native tab bar -->
    <!DOCTYPE html>
<html lang="en">
    <script type="text/html" id="template-bottom-sheet-overlay">

    <div 
        class="v-overlay scrollable hugePaddingBottom active" 
        @touchstart.self="touched_overlay()"
        @mousedown.self="touched_overlay()"
        @click.self="clicked_overlay()"
    >
        <div 
            class="standardOverlayCard centeredBlock bottom-sheet"
            :class="[
                {'short': height == 'short'}, 
                {'narrow': narrow}
            ]"
        >

            <!-- generic header content -->
            <div class="bottom-sheet-overlay-header">
                <div 
                    class="relative"
                >
                    <div 
                        class="overlay-header-handle-wrap centeredBlock"
                        @click.stop="toggle_height()" 
                    >
                        <div class="overlay-header-handle"></div>
                    </div>
                    <i 
                        class="overlay-x-button fa-regular fa-xmark pointer"
                        @click.stop="dismiss_overlay()"
                    ></i>
                </div>

                <!-- header content injected here -->
                <slot name="header"></slot>

            </div>

            <!-- body content injected here -->
            <slot name="body"></slot>

            <!-- footer content injected here -->
            <slot name="footer"></slot>

        </div>
    </div>

</script>

<style>

    .standardOverlayCard.bottom-sheet.narrow{
        max-width: 600px;
    }

    .standardOverlayCard.bottom-sheet{
        position: fixed;
        bottom: 0px;
        top: 50px;
        left: 0px;
        right: 0px;
        z-index: 1001;
        /*
        background-color: rgba(249, 251, 251, 1);
        */
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding-bottom: 10px;
        padding-top: 10px;
        max-width: 1100px;
        margin-top: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .standardOverlayCard.bottom-sheet.short{
        top: 50%;
    }

    @media (max-height: 600px) {

        .standardOverlayCard.bottom-sheet.short{
            top: 150px;
        }

    }

    .standardOverlayCard.bottom-sheet h3{
        padding-top:0px;
    }

    .standardOverlayCard.bottom-sheet{
        display: flex;
        flex-direction: column;
        padding-bottom:0px;
        padding-top: 0px;
    }

    .standardOverlayCard.bottom-sheet .bottom-sheet-overlay-card-header
    {
        flex: 0 0 auto; /* Fixed height, doesn't grow or shrink */
    }

    .standardOverlayCard.bottom-sheet .standardCardFooter{
        position: absolute;
        bottom: 0px;
        padding-bottom: var(--cs-safe-area-bottom, 10px);
        left: 0px;
        right: 0px;
        background-color: #fff;
        border-top: 1px solid #e4ebf1;
        z-index: 10;
    }

    .standardOverlayCard.bottom-sheet .standardCardBody{
        flex: 1 1 auto; /* Flexible height, can grow and shrink */
        padding-bottom: 90px !important;
    }

    .overlay-header-handle-wrap{
        padding: 10px;
        cursor: pointer;
        max-width: 120px;
    }
    .overlay-header-handle{
        width: 70px;
        height: 3px;
        border-radius: 10px;
        background-color: #acb3ba;
        margin-left: auto;
        margin-right: auto;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .overlay-x-button{
        position: absolute;
        right: 14px;
        color: #535e6c;
        font-size: 20px;
        top: 12px;
    }

</style>

<script>

    //define the component
    app_overlays.component("bottom-sheet-overlay", {
        template: "#template-bottom-sheet-overlay",
        data() {
            return {
                height: "tall"
            }
        },
        props: {
            narrow: {
                type: Boolean,
                default: false
            }
        },
        mounted(){
            const universalEditOverlay = document.getElementById('overlay_universal-edit');
            if (universalEditOverlay) {
                universalEditOverlay.style.zIndex = "1000000";
            }
            const membershipValidationOverlay = document.getElementById('overlay_verifyMembership');
            if (membershipValidationOverlay) {
                membershipValidationOverlay.style.zIndex = "1000000";
            }
        },
        beforeUnmount() {
            //reset the z-index
            const universalEditOverlay = document.getElementById('overlay_universal-edit');
            if (universalEditOverlay) {
                universalEditOverlay.style.zIndex = ""; // Revert to default
            }
            const membershipValidationOverlay = document.getElementById('overlay_verifyMembership');
            if (membershipValidationOverlay) {
                membershipValidationOverlay.style.zIndex = ""; // Revert to default
            }
        },
        methods: {
            dismiss_overlay(){
                this.$emit('dismiss_overlay');
            },
            toggle_height(){
                if( this.height == "tall" ){
                    this.height = "short";
                }else{
                    this.height = "tall";
                }
            },
            clicked_overlay(){
                if (should_close_overlay(this.last_touch)) {
                    this.dismiss_overlay();
                }
            },
            touched_overlay(){
                this.last_touch = new Date().getTime();
            },
        },
    });
    
</script>    <script type="text/html" id="template-show-push-notification">
	
    <bottom-sheet-overlay
        @dismiss_overlay="dismiss_overlay()"
    >

        <!-- header content -->
        <template #header>
            <div class="flexNoWrap">
                <h3 
                    class="flexGrowOne" 
                    style="padding-bottom:0px;"
                >
                    <p>{{ title }}</p>
                    <template v-if="has_date">
                        <p 
                            class="card-header-subtext pointer"
                        >{{ date_string }}</p>
                    </template>
                </h3>
            </div>
        </template>

        <!-- body content -->
        <template #body>
            <div 
                class="standardCardBody fff scrollable"
            >
                <p class="p-1" style="margin: 0px 8px;">{{ notification.get('data').alert }}</p>
            </div>
        </template>

        <!-- footer content -->
        <template 
            #footer
        >
            <div 
                class="standardCardFooter flexNoWrap"
            >
                <div class="flexGrowOne"></div>
                <button class="marketing-header-button blue easeSuperFast flexWrapLeftAlign align-items-center" @click="dismiss_overlay()" >Done</button>
            </div>
        </template>

    </bottom-sheet-overlay>

</script>

<script>

    function show_push_notification( params ){
        store.components.show_push_notification.notification = params.notification;
        store.overlays.show_push_notification = true;
    }

    //add a value to our global store, specific to this component
    store.components["show_push_notification"] = {
        notification: null
    }

    //define the component
    app_overlays.component("show-push-notification", {
        template: "#template-show-push-notification",
        data() {
            return store.components["show_push_notification"]
        },        
        methods: {
            dismiss_overlay(){
                store.overlays.show_push_notification = false;
            } 
        },
        computed: {
            title(){               
                let title = this.notification.get('data').title;
                if (title && title.length > 0){
                    return title;
                }
                return "Notification";
            },
            has_date(){
                return this.notification.createdAt !== undefined;
            },
            date_string(){
                const createdAt = this.notification.createdAt;

                if (! createdAt){
                    return createdAt;
                }

                if ( is_utc_date_today( createdAt ) ){
                    return format_utc_date_v2({
                        "utcDate": createdAt,
                        "formatString": "[Today at] h:mm A"
                    });
                } else {
                    return format_utc_date_v2({
                        "utcDate": createdAt,
                        "formatString": "ddd M/D h:mm A"
                    });
                }
            }
        }
    });

</script>    <script type="text/html" id="template-native-tab-bar">

    <!-- first, make sure we're in the react native member app -->
    <template v-if="is_react_native_member_app || is_admin_preview">
            
        <div 
            v-if="show_tab_bar"
            class="native-tab-bar-outer flexNoWrap"
            :style="[{ 
                backgroundColor: tab_bar_colors.background || 'rgba(249, 251, 251, 1)' 
            }, {
                backdropFilter: tab_bar_colors.blur ? 'blur(' + tab_bar_colors.blur + ')' : 'none'
            }]"
            :class="{ 'noBorder': tab_bar_colors.background, 'preview': is_admin_preview }"
        >
            <!-- tab bar (only for the member portal) -->
            <template v-if="visible_tabs">
                <div 
                    v-for="tab in visible_tabs"
                    :key="tab.key"
                    class="native-tab-bar-item"
                    :class="{ active : tab_is_active( tab ) }"
                    :style=" tab_is_active( tab ) ? { color: tab_bar_colors.active || '#4a56f8' } : { color: tab_bar_colors.text || '#697684' } "
                    @touchstart.prevent="tapped_tab_bar_item( tab )"
                    @click="tapped_tab_bar_item( tab )"
                >
                    <div class="centeredText centeredBlock">
                        <p><i class="native-tab-bar-icon" :class="tab.icon_class"></i></p>
                        <p class="native-tab-bar-label">{{ tab.label }}</p>
                    </div>
                </div>
                <div 
                    class="native-tab-bar-item"
                    @touchstart.prevent="tapped_more()"
                    @click="tapped_more()"
                    :class="{ 'active': more_is_active }"
                    :style=" more_is_active ? { color: tab_bar_colors.active || '#4a56f8' } : { color: tab_bar_colors.text || '#697684' } "
                >
                    <div class="centeredText centeredBlock">
                        <p><i class="fa-regular fa-grid native-tab-bar-icon"></i></p>
                        <p class="native-tab-bar-label">More</p>
                    </div>
                </div>
            </template>
        </div>

        <!-- back button (global) -->
        <div v-else-if="! loading && show_back_button">

            <!-- overlay -->
            <div 
                class="native-tab-bar-back-button-overlay pointer"
                @touchstart.self.prevent="back_button_expanded = false"
                @click.self="back_button_expanded = false"
                :class="{ 'active': back_button_expanded }"
            ></div>

            <!-- home button -->
            <div 
                class="native-tab-bar-floating-home-button boxShadowBottom moreBlur pointer easeFast"
                @click="tapped_home()"
                :class="{ 'active': back_button_expanded }"
            >
                <div class="centeredText centeredBlock">
                    <p><i class="fa-solid fa-house native-tab-bar-icon" style="font-size:20px;"></i><span v-if="back_button_expanded" style="padding-left:6px;font-size:18px;">Home</span></p>
                </div>
            </div>

            <!-- back button -->
            <div 
                class="native-tab-bar-floating-back-button boxShadowBottom moreBlur pointer easeFast"
                @click="tapped_back()"
                :class="{ 'expanded': back_button_expanded }"
            >
                <div class="centeredText centeredBlock">
                    <p><i class="fa-regular fa-chevron-left native-tab-bar-icon" style="font-size:20px;"></i><span v-if="back_button_expanded" style="padding-left:6px;font-size:18px;">Back</span></p>
                </div>
            </div>

        </div>

        <!-- full menu sheet -->
        <div 
            v-if="tabs"
            class="native-tab-bar-menu-sheet"
            :class="{'active': show_full_menu}"
        >
            <!-- overlay -->
            <div 
                class="native-tab-bar-menu-sheet-overlay pointer"
                @touchstart.self.prevent="show_full_menu = false"
                @click.self="show_full_menu = false"
            ></div>
            <!-- actual menu sheet -->
            <div class="native-tab-bar-menu-sheet-inner scrollable">

                <div 
                    class="relative"
                    style="height:20px;"
                >
                    <i 
                        class="overlay-x-button fa-regular fa-xmark pointer"
                        style="top:0px;right:8px;"
                        @click.stop="show_full_menu = false"
                    ></i>
                </div>

                <div 
                    v-for="tab in tabs"
                    class="moreMenuItem flexibleHeight"
                    :class="{ active : tab_is_active( tab ) }"
                    @click="selected_full_menu_option( tab )"
                >
                    <div class="more-menu-icon-wrap flexNoWrap align-items-center">
                        <i v-if="tab.icon_class" :class="tab.icon_class"></i>
                        <p class="flexGrowOne">{{ tab.label }}</p>
                    </div>
                </div>

                

                <!--
                <div 
                    class="flexWrap"
                    style="padding-top: 10px"
                >
                    <div 
                        v-for="tab in tabs"
                        class="quick-action-wrap noMaxWidth relative"
                        @click="selected_full_menu_option( tab )"
                    >
                        <div 
                            class="quick-action-icon-wrap overflowHidden"
                        >
                            <div>
                                <i v-if="tab.icon_class" :class="tab.icon_class"></i>
                            </div>
                        </div>
                        <p class="quick-action-title">{{ tab.label }}</p>
                    </div>
                </div>
                -->
            </div>
        </div>

    </template>
    
</script>


<style>

    .native-tab-bar-outer{
        position: fixed;
        bottom: 0px;   
        padding-bottom: var(--cs-safe-area-bottom, 0px);
        left: 0px;
        right: 0px;
        background-color: rgba(249, 251, 251, 1);
        border-top: 1px solid #e4ebf1;
        z-index: 1000;
        transition: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    /* set position relative when preview  class is applied to native tab bar outer*/
    .native-tab-bar-outer.preview{
        position: relative;
    }

    .native-tab-bar-item{
        padding: 11px;
        display: flex;
        flex: 1 1 0; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
        color: #697684;
        cursor: pointer;
    }
    .native-tab-bar-item.active{
        color: #4a56f8;
    }
    .native-tab-bar-label{
        font-size: 12px;
        padding-top: 4px;
        white-space: nowrap;
    }
    .native-tab-bar-icon{
        font-size: 22px;
    }

    /* ------  menu sheet (full menu)  ------- */

    .native-tab-bar-menu-sheet-overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(8,8,19,0.64);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease;
        z-index: 1000;
    }

    .native-tab-bar-menu-sheet.active .native-tab-bar-menu-sheet-overlay{
        opacity: 1;
        visibility: visible;
    }

    .native-tab-bar-menu-sheet.active .native-tab-bar-menu-sheet-inner{
        bottom: 0px;
    }

    .native-tab-bar-menu-sheet-inner .quick-action-wrap{
        padding-left: 10px;
        padding-right:10px;
    }

    .native-tab-bar-menu-sheet-inner{
        position: fixed;
        bottom: -100%;
        max-height: 90%;
        left: 0px;
        right: 0px;
        z-index: 1001;
        background-color: rgba(249, 251, 251, 1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: bottom 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    /*------  back button  -------*/

    .native-tab-bar-back-button-overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*
        background-color: rgba(111,117,122,0.5);
        */
        background-color: rgba(249, 251, 251, 0.8);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease;
        z-index: 999;
    }

    .native-tab-bar-back-button-overlay.active{
        opacity: 1;
        visibility: visible;
    }

    .native-tab-bar-floating-back-button{
        position: fixed;
        bottom: 22px;
        left: 22px;
        right: auto;
        background-color: rgba(249, 251, 251, 1);
        /* border-top: 1px solid #e4ebf1; */
        z-index: 1000;
        transition: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
        border-radius: 100%;
        width: 50px;
        height: 50px;
        background-color: #fff;
        line-height: 50px;
        font-size: 16px;
        white-space: nowrap;
        min-width: 50px;
    }

    .native-tab-bar-floating-back-button.expanded{
        border-radius: 25px;
        padding-left: 16px;
        padding-right: 16px;
        width: auto;
    }

    /*------  home button  -------*/

    .native-tab-bar-floating-home-button.active{
        border-radius: 25px;
        padding-left: 16px;
        padding-right: 16px;
        width: auto;
        visibility: visible;
        opacity: 1;
        animation: expand 0.15s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        background-color: #4a56f8;
        color: #fff;
    }

    .native-tab-bar-floating-home-button{
        position: fixed;
        bottom: 82px;
        left: 22px;
        right: auto;
        visibility: hidden;
        opacity: 0;
        background-color: rgba(249, 251, 251, 1);
        /* border-top: 1px solid #e4ebf1; */
        z-index: 1000;
        transition: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
        border-radius: 20px;
        width: auto;
        height: 50px;
        background-color: #fff;
        line-height: 50px;
        font-size: 16px;
        white-space: nowrap;

        /* Initial state for animation */
        transform: scale(0);
        animation: none;
    }

    /* Keyframes for the expansion effect */
    @keyframes expand {
        from {
            transform: scale(0);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

</style>

<script>

    let native_tab_bar_config = {
        template: "#template-native-tab-bar",
        data() {
            return {
                loading: true,
                last_scroll_top: 0, 
                slide_down: false,
                ticking: false,
                show_full_menu: false,
                back_button_expanded: false
            }
        },
        props: {
            primary_view: String,
            tabs: Array, 
            hide_back_button: Boolean,
            is_admin_preview: {
                type: Boolean,
                default: false
            }
        },
        mounted(){
            console.log("Mounted native tab bar");
            if( this.is_react_native_member_app ){
                this.last_scroll_top = this.return_scroll_top();
                window.addEventListener('scroll', this.handle_scroll);
                setTimeout(() => {
                    this.loading = false;
                }, 100);
            }
        },
        unmounted(){
            if( this.is_react_native_member_app ){
                window.removeEventListener('scroll', this.handle_scroll);
            }
        },
        methods: {
            tab_is_active( tab ){
                if( this.primary_view ){
                    return tab.key == this.primary_view;
                }
                return false;
            },
            tapped_home(){
                if(this.is_admin_preview){
                    return;
                }
                window.location.href = "/account/home";
            },
            tapped_more(){
                this.show_full_menu = true;
            },
            selected_full_menu_option( option ){
                this.show_full_menu = false;
                this.tapped_tab_bar_item( option );
            },
            return_scroll_top(){
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                return scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
            },
            handle_scroll(){
                if ( ! this.ticking ) {
                    window.requestAnimationFrame(() => {
                        let scrollTop = this.return_scroll_top();
                        let windowHeight = window.innerHeight;
                        let documentHeight = document.documentElement.scrollHeight;

                        // Prevent action if bouncing past the bottom of the page
                        if (scrollTop + windowHeight >= documentHeight) {
                            // We're at or past the bottom, so we ignore this scroll event
                            this.ticking = false;
                            return;
                        }
                        
                        if (scrollTop > this.last_scroll_top) {
                            //hide tab bar
                            this.slide_down = true;
                        } else if (scrollTop < this.last_scroll_top && scrollTop >= 0) {
                            //show tab bar
                            this.slide_down = false;
                        }
                        this.last_scroll_top = scrollTop;
                        this.ticking = false;
                    });
                    this.ticking = true;
                }
            },
            tapped_tab_bar_item( tab ){
                if(this.is_admin_preview){
                    return;
                }
                updateURL( tab.key );
                displayViewForUrlPath();
            },
            tapped_back(){
                if(this.is_admin_preview){
                    return;
                }
                if( this.back_button_expanded ){
                    this.back_button_expanded = false;
                    window.history.back();
                } else {
                    this.back_button_expanded = true;
                }
            },
        },
        computed: {
            tab_bar_colors(){
                //this is  only supported in newer versions of the app (where we have the native_app_props set so we can calculate padding-bottom on the safe area)
                if( ! store.native_app_props || ! store.native_app_props.safeAreaInsets ){
                    if(!this.is_admin_preview){
                        return {};
                    }
                }
                //ok, it's a newer version of the app!
                if( store.clubObject && store.clubObject.get('web_settings').get('tab_bar_colors') ){
                    //validate the config
                    let tab_bar_colors = store.clubObject.get('web_settings').get('tab_bar_colors');
                    if( 
                        tab_bar_colors.background && 
                        tab_bar_colors.text && 
                        tab_bar_colors.active 
                    ){
                        return tab_bar_colors;
                    }
                }
                return {};
            },
            //we only show it when we're on one of the relevant primary views (contained in the tab bar)
            //.. otherwise we should display the back button bar
            tab_bar_keys(){

                /*
                var keys = [];
                if( this.visible_tabs ){
                    this.visible_tabs.forEach(tab => {
                        keys.push( tab.key );
                    });
                }
                return keys;
                */
                
                var keys = [];
                if( this.tabs ){
                    this.tabs.forEach(tab => {
                        keys.push( tab.key );
                    });
                }
                return keys;
            
            },
            visible_tab_keys(){
                var keys = [];
                if( this.visible_tabs ){
                    this.visible_tabs.forEach(tab => {
                        keys.push( tab.key );
                    });
                }
                return keys;
            },
            more_is_active(){
                //it's active if not in the visible tabs
                if( this.visible_tab_keys.includes( this.primary_view ) ){
                    return false;
                }
                return true;
            },
            show_tab_bar(){
                for (let t = 0; t < this.tab_bar_keys.length; t++) {
                    if( this.tab_bar_keys[t] == this.primary_view ){
                        return true
                    }   
                }
                return false;
            },
            visible_tabs(){
                if( this.tabs ){
                    return this.tabs.slice(0,4)
                }
                return [];
            },
            show_back_button(){
                if( this.hide_back_button ){
                    return false;
                }
                if( ! this.show_tab_bar && window.history.length >= 1 ){
                    return true;
                }
                return false;
            },
            is_react_native_member_app(){
                return store.is_react_native_member_app;
            }
        },
    }
    app_content.component("native-tab-bar-component", native_tab_bar_config );
    app_overlays.component("native-tab-bar-component", native_tab_bar_config );

</script></html>
    <!-- club header -->
    <script type="text/html" id="template-club-header">

    <div 
        class="header ease"
        :class="[
            {'startOpaque': start_opaque && start_opaque != 'false' }, 
            {'showOnMobile': mobile_only }
        ]"
    >
        <div class="innerHeader relative">

            <div 
                class="flexNoWrap align-items-center"
                style="height:68px"
            >

                <!-- left hand side -->
                <div class="flexGrowOne">
                    <!-- clean data we may or may not have -->
                    
                    <!-- desktop version -->
                    <div class="relative flexNoWrap">
                        
                            <div class="smallIcon burgee left fe" style="background-image:url(https://d282wvk2qi4wzk.cloudfront.net/FSw34JBUHv_burgee_1664560199582);border:1px solid rgba(255,255,255,0);"></div>
                        
                        <h1 class="modern lessPadding hideOnMobile" style="margin-right:0px;">Leatherlips Yacht Club</h1>
                        <a href="/" class="absoluteA"></a>
                    </div>
                </div>

                <!-- dashboard link -->
                <div v-if="include_dashboard_link">
                    <!-- logged in user --> 
                    <div 
                        v-if="current_user"
                        class="club-header-button easeFast relative noWrap"
                    >   
                        <!-- has profile picture -->
                        <div 
                            class="flexNoWrap align-items-center"
                            v-if="current_user.get('profPicURL')"
                        >
                            <div 
                                class="tinyIcon"
                                :style="{ backgroundImage: 'url(' + current_user.get('profPicURL') + ')' }"
                                style="margin-left:0px;border:0px;height:22px;width:22px;margin-right:8px;"
                            ></div>
                            <p>Account <i class="fa-light fa-chevron-right" style="padding-left:3px;font-size:12px;"></i></p>
                        </div>
                        <!-- no profile picture -->
                        <p v-else>
                            <i 
                                class="fa-light fa-user-circle" 
                                style="padding-right:3px;"
                            ></i> 
                            Account
                            <i class="fa-light fa-chevron-right" style="padding-left:3px;font-size:12px;"></i> 
                        </p>
                        <a class="absoluteA" href="/account" rel="nofollow"></a>
                    </div>
                    <!-- not logged in -->
                    <div 
                        v-else
                        class="club-header-button easeFast relative"
                    >
                        <p>Account <i class="fa-light fa-chevron-right" style="padding-left:3px;font-size:12px;"></i></p>
                        <a class="absoluteA" href="/account" rel="nofollow"></a>
                    </div>
                </div>

            </div>

        </div>
    </div>
    
</script>

<style>
    .club-header-button{
        border: 1px solid #e4ebf1;
        background-color: #fff;
        color: rgb(106, 116, 130);;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 8px;
        padding-bottom: 8px;
        line-height: 24px;
        border-radius: 30px;
        text-align: center;
        position: absolute;
        right: 30px;
        top: 13px;
    }

    .club-header-button:hover{
        color: #081333;
    }
</style>

<script>

    //define the component
    app_content.component("club-header-component", {
        template: "#template-club-header",
        data() {
            return {}
        }, 
        props: {
            start_opaque: Boolean,
            mobile_only: Boolean,
            include_dashboard_link: Boolean
        },
        mounted(){
            console.log("mounted club header")
        },
        methods: {
            
        },
        computed: {
            current_user(){
                return Parse.User.current()
            }
        },
    });


</script>
    <script>

        app_content.mount('#v-content');
        app_overlays.mount('#v-overlays');
    </script>

</html>