<template>
    <div>
        <loginHeader :unread_messages="unreadMessages" @open-user-settings="openUserSettings" @open-user-profile="openMyProfile" @open-conversations="openConversations"></loginHeader>
        <div class="app-main">
            <v-alert type="info" v-if="adminMessage">{{adminMessage}}</v-alert>
            <v-container>
                <v-row class="mt-1">
                    <v-col class="d-flex justify-start">
                        <v-btn @click="filterDrawer = !filterDrawer" elevation="0" color="primary">
                            <v-icon left>mdi-heart-search</v-icon> Filter
                        </v-btn>
                    </v-col>
                </v-row>
                <div class="loadingScreen" v-if="searching">
                    <v-progress-circular
                    indeterminate
                    color="primary"
                    ></v-progress-circular>
                </div>
                <v-row v-if="filterUsers && filterUsers.length" class="equal-height-row">
                    <v-col v-for="(filterUser, index) in filterUsers" :key="index" cols="6" md="2" class="equal-height-card">
                        <v-card @click="openProfile(filterUser.id)" style="height:100%;">
                            <v-img :src="imageDomain + filterUser.avatar" aspect-ratio="1.5"></v-img>
                            <v-card-title>{{ filterUser.username }} <span class="user-age">{{ filterUser.age
                                    }}</span></v-card-title>
                            <v-card-text class="user-info">
                                <ul>
                                    <li>
                                        {{ filterUser.sexuality }} {{ filterUser.gender }}
                                    </li>
                                    <li>
                                        Location: {{ filterUser.country }}
                                    </li>
                                </ul>
                            </v-card-text>
                        </v-card>
                    </v-col>
                </v-row>
                <v-row v-else>
                    <v-col>
                        <p>Your search did not match any users</p>
                    </v-col>
                </v-row>

                <v-navigation-drawer class="filterDrawer" v-model="filterDrawer" fixed temporary>
                    <h3 class="filter-header">Filter</h3>
                    <v-list nav dense class="filter">
                        <v-list-item-group>

                            <!---->
                            <!-- General-->
                            <!---->

                            <!-- Gender-->
                            <v-list-item @click="toggleMenu('general')">
                                <v-list-item-content>
                                    <h3 class="filter-titles">General</h3>
                                </v-list-item-content>
                                <v-list-item-action>
                                    <v-icon v-if="mainMenus.general">mdi-chevron-up</v-icon>
                                    <v-icon v-else>mdi-chevron-down</v-icon>
                                </v-list-item-action>
                            </v-list-item>
                            <v-expand-transition>
                                <v-list-item-group v-if="mainMenus.general">
                                    <v-list-item @click="toggleSubmenu('gender')">
                                        <v-list-item-content>
                                            <v-list-item-title>Gender <span class="filter-span">{{ filter.gender
                                                    }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.gender">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.gender">
                                            <v-list-item :ripple="false" inactive>
                                                <v-radio-group v-model="filter.gender" dense>
                                                    <v-radio label="Male" value="male"></v-radio>
                                                    <v-radio label="Female" value="female"></v-radio>
                                                    <v-radio label="Other" value="other"></v-radio>
                                                </v-radio-group>
                                            </v-list-item>
                                            <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetDualFilter('gender', 'string')"> Reset
                                                </v-btn>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- Age-->
                                    <v-list-item @click="toggleSubmenu('age')">
                                        <v-list-item-content>
                                            <v-list-item-title>Age <span class="filter-span">{{ filter.minAge }} - {{
            filter.maxAge }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.height">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.age" inactive>
                                            <label class="filter-label">Min age: {{ filter.minAge }}</label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.minAge" max="99" min="18" dense></v-slider>
                                            </v-list-item>

                                            <label class="filter-label">Max age: {{ filter.maxAge }}</label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.maxAge" max="99" :min="filter.minAge"
                                                    dense></v-slider>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetDualFilter('minAge', 'maxAge', 'string')"> Reset
                                                </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Sexuality-->
                                    <v-list-item @click="toggleSubmenu('sexuality')">
                                        <v-list-item-content>
                                            <v-list-item-title>Sexuality <span class="filter-span">{{
            filter.sexuality.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.sexuality">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.sexuality">
                                            <v-list-item :ripple="false" v-for="sexuality in sexualities"
                                                :key="sexuality" dense inactive>
                                                <v-checkbox v-model="filter.sexuality" :label="sexuality"
                                                    :value="sexuality" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('sexuality', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- Sexual activity-->
                                    <v-list-item @click="toggleSubmenu('sexualActivity')">
                                        <v-list-item-content>
                                            <v-list-item-title>Sexual activity <span class="filter-span">{{
            filter.sexualActivity.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.sexualActivity">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.sexualActivity">
                                            <v-list-item :ripple="false" v-for="activity in sexualActivity"
                                                :key="activity" dense inactive>
                                                <v-checkbox v-model="filter.sexualActivity" :label="activity"
                                                    :value="activity" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('sexualActivity', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Looking for-->
                                    <v-list-item @click="toggleSubmenu('lookingFor')">
                                        <v-list-item-content>
                                            <v-list-item-title>Looking for <span class="filter-span">{{
            filter.lookingFor.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.lookingFor">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.lookingFor">
                                            <v-list-item :ripple="false" v-for="subject in lookingFor" :key="subject"
                                                dense inactive>
                                                <v-checkbox v-model="filter.lookingFor" :label="subject"
                                                    :value="subject" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('lookingFor', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Country -->
                                    <v-list-item @click="toggleSubmenu('country')">
                                        <v-list-item-content>
                                            <v-list-item-title>Country <span class="filter-span">{{ filter.country
                                                    }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.country">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.country">
                                            <v-list-item :ripple="false" dense inactive>
                                                <v-select v-model="filter.country" :items="countries" item-text="text"
                                                    item-value="val"></v-select>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('country', 'string')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- City -->
                                    <v-list-item @click="toggleSubmenu('city')">
                                        <v-list-item-content>
                                            <v-list-item-title>City/State/Location <span class="filter-span">{{filter.city}}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.city">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.city">
                                            <v-list-item :ripple="false" dense inactive>
                                                <v-select v-model="filter.city" :items="cities" item-text="text"
                                                    item-value="val"></v-select>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('city', 'string')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>
                                </v-list-item-group>
                            </v-expand-transition>



                            <!---->
                            <!-- Body features-->
                            <!---->
                            <v-divider class="pb-3"></v-divider>

                            <v-list-item @click="toggleMenu('body')">
                                <v-list-item-content>
                                    <h3 class="filter-titles">Body features</h3>
                                </v-list-item-content>
                                <v-list-item-action>
                                    <v-icon v-if="mainMenus.body">mdi-chevron-up</v-icon>
                                    <v-icon v-else>mdi-chevron-down</v-icon>
                                </v-list-item-action>
                            </v-list-item>
                            <v-expand-transition>
                                <v-list-item-group v-if="mainMenus.body">
                                    <!-- Height-->
                                    <v-list-item @click="toggleSubmenu('height')">
                                        <v-list-item-content>
                                            <v-list-item-title>Height <span class="filter-span">{{ filter.minHeight }} -
                                                    {{
            filter.maxHeight }} cm</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.height">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.height" inactive>
                                            <label class="filter-label">Min height: {{ filter.minHeight }} cm <span>({{
            displayMinHeight }})</span></label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.minHeight" max="240" min="110"
                                                    dense></v-slider>
                                            </v-list-item>

                                            <label class="filter-label">Max height: {{ filter.maxHeight }} cm <span>({{
            displayMaxHeight }})</span></label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.maxHeight" max="240" :min="filter.minHeight"
                                                    dense></v-slider>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetHeight()"> Reset
                                                </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Weight-->
                                    <v-list-item @click="toggleSubmenu('weight')">
                                        <v-list-item-content>
                                            <v-list-item-title>Weight <span class="filter-span">{{ filter.minWeight }} -
                                                    {{
            filter.maxWeight }} kg</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.weight">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.weight" inactive>
                                            <label class="filter-label">Min weight: {{ filter.minWeight }} kg <span>({{
            displayMinWeight }})</span></label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.minWeight" max="200" min="30"
                                                    dense></v-slider>
                                            </v-list-item>

                                            <label class="filter-label">Max weight: {{ filter.maxWeight }} kg <span>({{
            displayMaxWeight }})</span></label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.maxWeight" max="200" :min="filter.minWeight"
                                                    dense></v-slider>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetWeight()"> Reset
                                                </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- Hair-->
                                    <v-list-item @click="toggleSubmenu('hair')">
                                        <v-list-item-content>
                                            <v-list-item-title>Hair <span class="filter-span">{{ filter.hair.join(', ')
                                                    }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.hair">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.hair">
                                            <v-list-item :ripple="false" v-for="hair in hairs" :key="hair" dense
                                                inactive>
                                                <v-checkbox v-model="filter.hair" :label="hair" :value="hair" dense
                                                    hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('hair', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- Hair color-->
                                    <v-list-item @click="toggleSubmenu('hairColor')">
                                        <v-list-item-content>
                                            <v-list-item-title>Hair color <span class="filter-span">{{
            filter.hairColor.join(',') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.hair">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.hairColor">
                                            <v-list-item :ripple="false" v-for="color in hairColors" :key="color" dense
                                                inactive>
                                                <v-checkbox v-model="filter.hairColor" :label="color" :value="color"
                                                    dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('hairColor', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Eye color-->
                                    <v-list-item @click="toggleSubmenu('eyeColor')">
                                        <v-list-item-content>
                                            <v-list-item-title>Eye color <span class="filter-span">{{
            filter.eyeColor.join(', ')
        }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.hair">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.eyeColor">
                                            <v-list-item :ripple="false" v-for="color in eyeColors" :key="color" dense
                                                inactive>
                                                <v-checkbox v-model="filter.eyeColor" :label="color" :value="color"
                                                    dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('eyeColor', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                    <!-- Facial Hair-->
                                    <v-list-item @click="toggleSubmenu('facialHair')">
                                        <v-list-item-content>
                                            <v-list-item-title>Facial hair <span class="filter-span">{{
            filter.facialHair.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.facialHair">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.facialHair">
                                            <v-list-item :ripple="false" v-for="facialHair in facialHairs"
                                                :key="facialHair" dense inactive>
                                                <v-checkbox v-model="filter.facialHair" :label="facialHair"
                                                    :value="facialHair" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('facialHair', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- Pubic hair-->
                                    <v-list-item @click="toggleSubmenu('pubicHair')">
                                        <v-list-item-content>
                                            <v-list-item-title>Pubic hair <span class="filter-span">{{
            filter.pubicHair.join(',') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.pubicHair">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.pubicHair">
                                            <v-list-item :ripple="false" v-for="pubicHair in pubicHairs"
                                                :key="pubicHair" dense inactive>
                                                <v-checkbox v-model="filter.pubicHair" :label="pubicHair"
                                                    :value="pubicHair" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('pubicHair', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- Body hair-->
                                    <v-list-item @click="toggleSubmenu('bodyHair')">
                                        <v-list-item-content>
                                            <v-list-item-title>Body hair <span class="filter-span">{{
            filter.bodyHair.join(', ')
        }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.bodyHair">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.bodyHair">
                                            <v-list-item :ripple="false" v-for="bodyHair in bodyHairs" :key="bodyHair"
                                                dense inactive>
                                                <v-checkbox v-model="filter.bodyHair" :label="bodyHair"
                                                    :value="bodyHair" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('bodyHair', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- Tattoo-->
                                    <v-list-item @click="toggleSubmenu('tattoo')">
                                        <v-list-item-content>
                                            <v-list-item-title>Tattoos <span class="filter-span">{{
            filter.tattoo.join(', ')
        }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.tattoo">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.tattoo">
                                            <v-list-item :ripple="false" v-for="tattoo in tattoos" :key="tattoo" dense
                                                inactive>
                                                <v-checkbox v-model="filter.tattoo" :label="tattoo" :value="tattoo"
                                                    dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('tattoo', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Piercings-->
                                    <v-list-item @click="toggleSubmenu('piercing')">
                                        <v-list-item-content>
                                            <v-list-item-title>Piercings <span class="filter-span">{{
            filter.piercing.join(', ')
        }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.piercing">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.piercing">
                                            <v-list-item :ripple="false" v-for="piercing in piercings" :key="piercing"
                                                dense inactive>
                                                <v-checkbox v-model="filter.piercing" :label="piercing"
                                                    :value="piercing" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('piercing', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Breast size-->
                                    <v-list-item @click="toggleSubmenu('breastSize')" v-if="filter.gender == 'female'">
                                        <v-list-item-content>
                                            <v-list-item-title>Breast size <span class="filter-span">{{
            filter.breastSize.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.breastSize">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.breastSize">
                                            <v-list-item :ripple="false" v-for="breastSize in breastSizes"
                                                :key="breastSize" dense inactive>
                                                <v-checkbox v-model="filter.breastSize" :label="breastSize"
                                                    :value="breastSize" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('breastSize', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Penis size-->
                                    <v-list-item @click="toggleSubmenu('penisSize')" v-if="filter.gender == 'male'">
                                        <v-list-item-content>
                                            <v-list-item-title>Penis size <span class="filter-span">{{
            filter.minPenisSize
        }} -
                                                    {{ filter.maxPenisSize }} cm</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.penisSize">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.penisSize" inactive>
                                            <label class="filter-label">Min penis size: {{ filter.minPenisSize }} cm
                                                ({{ displayMinPenisSize }})</label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.minPenisSize" max="40" min="2"
                                                    dense></v-slider>
                                            </v-list-item>

                                            <label class="filter-label">Max penis size: {{ filter.maxPenisSize }} cm
                                                ({{ displayMaxPenisSize }})</label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.maxPenisSize" max="40"
                                                    :min="filter.minPenisSize" dense></v-slider>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetPenisSize()">
                                                    Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- Abs-->
                                    <v-list-item @click="toggleSubmenu('abs')">
                                        <v-list-item-content>
                                            <v-list-item-title>Abs <span class="filter-span">{{
            filter.abs.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.abs">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.abs">
                                            <v-list-item :ripple="false" v-for="abs in abs" :key="abs" dense inactive>
                                                <v-checkbox v-model="filter.abs" :label="abs" :value="abs" dense
                                                    hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('abs', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Bottom-->
                                    <v-list-item @click="toggleSubmenu('bottomSize')">
                                        <v-list-item-content>
                                            <v-list-item-title>Bottom size <span class="filter-span">{{
            filter.bottomSizes.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.bottomSize">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.bottomSize">
                                            <v-list-item :ripple="false" v-for="bottomSizes in bottomSizes"
                                                :key="bottomSizes" dense inactive>
                                                <v-checkbox v-model="filter.bottomSizes" :label="bottomSizes"
                                                    :value="bottomSizes" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('bottomSizes', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Body type-->
                                    <v-list-item @click="toggleSubmenu('bodyType')">
                                        <v-list-item-content>
                                            <v-list-item-title>Body type <span class="filter-span">{{
            filter.bodyTypes.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.bodyType">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.bodyType">
                                            <v-list-item :ripple="false" v-for="bodyType in bodyTypes" :key="bodyType"
                                                dense inactive>
                                                <v-checkbox v-model="filter.bodyTypes" :label="bodyType"
                                                    :value="bodyType" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('bodyTypes', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- Ethniticies type-->
                                    <v-list-item @click="toggleSubmenu('ethnicitie')">
                                        <v-list-item-content>
                                            <v-list-item-title>Ethnicity <span class="filter-span">{{
            filter.ethnicities.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.ethnicitie">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.ethnicitie">
                                            <v-list-item :ripple="false" v-for="ethnicities in ethnicities"
                                                :key="ethnicities" dense inactive>
                                                <v-checkbox v-model="filter.ethnicities" :label="ethnicities"
                                                    :value="ethnicities" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('ethnicities', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>
                                </v-list-item-group>
                            </v-expand-transition>

                            <v-divider class="pb-3"></v-divider>
                            <!---->
                            <!-- Body and lifestyle-->
                            <!---->

                            <v-list-item @click="toggleMenu('lifestyle')">
                                <v-list-item-content>
                                    <h3 class="filter-titles">Body and lifestyle</h3>
                                </v-list-item-content>
                                <v-list-item-action>
                                    <v-icon v-if="mainMenus.lifestyle">mdi-chevron-up</v-icon>
                                    <v-icon v-else>mdi-chevron-down</v-icon>
                                </v-list-item-action>
                            </v-list-item>
                            <v-expand-transition>
                                <v-list-item-group v-if="mainMenus.lifestyle">


                                    <!-- Fitness level-->
                                    <v-list-item @click="toggleSubmenu('fitnessLevel')">
                                        <v-list-item-content>
                                            <v-list-item-title>Fitness levels <span class="filter-span">{{
            filter.fitnessLevels.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.fitnessLevel">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.fitnessLevel">
                                            <v-list-item :ripple="false" v-for="fitnessLevel in fitnessLevels"
                                                :key="fitnessLevel" dense inactive>
                                                <v-checkbox v-model="filter.fitnessLevels" :label="fitnessLevel"
                                                    :value="fitnessLevel" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('fitnessLevels', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Dietary Preference-->
                                    <v-list-item @click="toggleSubmenu('dietaryPreference')">
                                        <v-list-item-content>
                                            <v-list-item-title>Dietary Preference <span class="filter-span">{{
            filter.dietaryPreferences.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.dietaryPreference">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.dietaryPreference">
                                            <v-list-item :ripple="false" v-for="dietaryPreference in dietaryPreferences"
                                                :key="dietaryPreference" dense inactive>
                                                <v-checkbox v-model="filter.dietaryPreferences"
                                                    :label="dietaryPreference" :value="dietaryPreference" dense
                                                    hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('dietaryPreferences', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Health Habit-->
                                    <v-list-item @click="toggleSubmenu('healthHabit')">
                                        <v-list-item-content>
                                            <v-list-item-title>Health Habit <span class="filter-span">{{
            filter.healthHabits.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.healthHabit">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.healthHabit">
                                            <v-list-item :ripple="false" v-for="healthHabit in healthHabits"
                                                :key="healthHabit" dense inactive>
                                                <v-checkbox v-model="filter.healthHabits" :label="healthHabit"
                                                    :value="healthHabit" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('healthHabits', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Exercise Frequency-->
                                    <v-list-item @click="toggleSubmenu('exerciseFrequency')">
                                        <v-list-item-content>
                                            <v-list-item-title>Exercise Frequency <span class="filter-span">{{
            filter.exerciseFrequency.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.exerciseFrequency">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.exerciseFrequency">
                                            <v-list-item :ripple="false" v-for="exerciseFrequency in exerciseFrequency"
                                                :key="exerciseFrequency" dense inactive>
                                                <v-checkbox v-model="filter.exerciseFrequency"
                                                    :label="exerciseFrequency" :value="exerciseFrequency" dense
                                                    hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('exerciseFrequency', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Sleeping Habit-->
                                    <v-list-item @click="toggleSubmenu('sleepingHabit')">
                                        <v-list-item-content>
                                            <v-list-item-title>Sleeping Habits <span class="filter-span">{{
            filter.sleepingHabits.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.sleepingHabit">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.sleepingHabit">
                                            <v-list-item :ripple="false" v-for="sleepingHabits in sleepingHabits"
                                                :key="sleepingHabits" dense inactive>
                                                <v-checkbox v-model="filter.sleepingHabits" :label="sleepingHabits"
                                                    :value="sleepingHabits" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('sleepingHabits', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Food Allergie-->
                                    <v-list-item @click="toggleSubmenu('foodAllergie')">
                                        <v-list-item-content>
                                            <v-list-item-title>Food Allergies <span class="filter-span">{{
            filter.foodAllergies.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.foodAllergie">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.foodAllergie">
                                            <v-list-item :ripple="false" v-for="foodAllergies in foodAllergies"
                                                :key="foodAllergies" dense inactive>
                                                <v-checkbox v-model="filter.foodAllergies" :label="foodAllergies"
                                                    :value="foodAllergies" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('foodAllergies', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Alcohol Consumption-->
                                    <v-list-item @click="toggleSubmenu('alcoholConsumption')">
                                        <v-list-item-content>
                                            <v-list-item-title>Alcohol Consumption <span class="filter-span">{{
            filter.alcoholConsumptions.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.alcoholConsumption">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.alcoholConsumption">
                                            <v-list-item :ripple="false"
                                                v-for="alcoholConsumption in alcoholConsumptions"
                                                :key="alcoholConsumption" dense inactive>
                                                <v-checkbox v-model="filter.alcoholConsumptions"
                                                    :label="alcoholConsumption" :value="alcoholConsumption" dense
                                                    hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('alcoholConsumptions', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Smoking-->
                                    <v-list-item @click="toggleSubmenu('smoking')">
                                        <v-list-item-content>
                                            <v-list-item-title>Smoking <span class="filter-span">{{
            filter.smoking.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.smoking">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.smoking">
                                            <v-list-item :ripple="false" v-for="smoking in smoking" :key="smoking" dense
                                                inactive>
                                                <v-checkbox v-model="filter.smoking" :label="smoking" :value="smoking"
                                                    dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('smoking', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                </v-list-item-group>
                            </v-expand-transition>


                            <v-divider class="pb-3"></v-divider>
                            <!---->
                            <!-- Financial-->
                            <!---->

                            <v-list-item @click="toggleMenu('financial')">
                                <v-list-item-content>
                                    <h3 class="filter-titles">Financial</h3>
                                </v-list-item-content>
                                <v-list-item-action>
                                    <v-icon v-if="mainMenus.financial">mdi-chevron-up</v-icon>
                                    <v-icon v-else>mdi-chevron-down</v-icon>
                                </v-list-item-action>
                            </v-list-item>
                            <v-expand-transition>
                                <v-list-item-group v-if="mainMenus.financial">


                                    <!-- Jobs-->
                                    <v-list-item @click="toggleSubmenu('job')">
                                        <v-list-item-content>
                                            <v-list-item-title>Job sector <span class="filter-span">{{
            filter.jobs.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.job">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.job">
                                            <v-list-item :ripple="false" v-for="job in jobs" :key="job" dense inactive>
                                                <v-checkbox v-model="filter.jobs" :label="job" :value="job" dense
                                                    hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('jobs', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Net worth-->
                                    <v-list-item @click="toggleSubmenu('netWorth')">
                                        <v-list-item-content>
                                            <v-list-item-title>Net worth <span class="filter-span">{{
            formatNumber(filter.minNetWorth) }} - {{
            formatNumber(filter.maxNetWorth) }} €</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.netWorth">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.netWorth" inactive>
                                            <label class="filter-label">Min net worth: {{
            formatNumber(filter.minNetWorth)
        }}{{ filter.minNetWorth === 10000000 ? '+' : '' }} € </label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.minNetWorth" max="10000000+" min="1"
                                                    dense></v-slider>
                                            </v-list-item>

                                            <label class="filter-label">Max net worth: {{
            formatNumber(filter.maxNetWorth)
        }}{{ filter.maxNetWorth === 10000000 ? '+' : '' }} €</label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.maxNetWorth" max="10000000+"
                                                    :min="filter.minNetWorth" dense></v-slider>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetNetWorth()">
                                                    Reset
                                                </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                    <!-- Yearly salary -->
                                    <v-list-item @click="toggleSubmenu('yearlySalary')">
                                        <v-list-item-content>
                                            <v-list-item-title>Yearly Salary <span class="filter-span">{{
            formatNumber(filter.minYearlySalary) }} - {{
            formatNumber(filter.maxYearlySalary) }} €</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.yearlySalary">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.yearlySalary" inactive>
                                            <label class="filter-label">Min yearly salary: {{
            formatNumber(filter.minYearlySalary) }} {{ filter.minYearlySalary ===
            1000000 ? '+' : '' }} €</label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.minYearlySalary" max="1000000" min="1"
                                                    dense></v-slider>
                                            </v-list-item>

                                            <label class="filter-label">Max yearly salary: {{
            formatNumber(filter.maxYearlySalary) }} {{ filter.maxYearlySalary ===
            1000000 ? '+' : '' }} €</label>
                                            <v-list-item :ripple="false" inactive>
                                                <v-slider v-model="filter.maxYearlySalary" max="1000000"
                                                    :min="filter.minYearlySalary" dense></v-slider>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetYearlySalary()">
                                                    Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Main living -->
                                    <v-list-item @click="toggleSubmenu('mainLiving')">
                                        <v-list-item-content>
                                            <v-list-item-title>Main living <span class="filter-span">{{
            filter.mainLiving.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.mainLiving">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.mainLiving" inactive>
                                            <v-list-item :ripple="false" v-for="living in mainLiving" :key="living"
                                                dense inactive>
                                                <v-checkbox v-model="filter.mainLiving" :label="living" :value="living"
                                                    dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('mainLiving', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Financial goals -->
                                    <v-list-item @click="toggleSubmenu('financialGoals')">
                                        <v-list-item-content>
                                            <v-list-item-title>Financial goals <span class="filter-span">{{
            filter.financialGoals.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.financialGoals">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.financialGoals" inactive>
                                            <v-list-item :ripple="false" v-for="goals in financialGoals" :key="goals"
                                                dense inactive>
                                                <v-checkbox v-model="filter.financialGoals" :label="goals"
                                                    :value="goals" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('financialGoals', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Spending habits -->
                                    <v-list-item @click="toggleSubmenu('spendingHabits')">
                                        <v-list-item-content>
                                            <v-list-item-title>Spending habits <span class="filter-span">{{
            filter.spendingHabits.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.spendingHabits">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.spendingHabits" inactive>
                                            <v-list-item :ripple="false" v-for="habits in spendingHabits" :key="habits"
                                                dense inactive>
                                                <v-checkbox v-model="filter.spendingHabits" :label="habits"
                                                    :value="habits" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('spendingHabits', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Financial Independence -->
                                    <v-list-item @click="toggleSubmenu('financialIndependence')">
                                        <v-list-item-content>
                                            <v-list-item-title>Financial independence <span class="filter-span">{{
            filter.financialIndependence.join(', ')
        }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.financialIndependence">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.financialIndependence" inactive>
                                            <v-list-item :ripple="false" v-for="finance in financialIndependence"
                                                :key="finance" dense inactive>
                                                <v-checkbox v-model="filter.financialIndependence" :label="finance"
                                                    :value="finance" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('financialIndependence', 'array')"> Reset
                                                </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                    <!-- In debt -->
                                    <v-list-item @click="toggleSubmenu('inDebt')">
                                        <v-list-item-content>
                                            <v-list-item-title>In debt <span class="filter-span">{{
            filter.inDebt }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.inDebt">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.inDebt" inactive>
                                            <v-list-item :ripple="false" inactive>
                                                <v-radio-group v-model="filter.inDebt" dense>
                                                    <v-radio label="Yes" value="yes"></v-radio>
                                                    <v-radio label="No" value="no"></v-radio>
                                                </v-radio-group>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('inDebt', 'string')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>

                                </v-list-item-group>
                            </v-expand-transition>

                            <v-divider class="pb-3"></v-divider>
                            <!---->
                            <!-- Personal -->
                            <!---->

                            <v-list-item @click="toggleMenu('personal')">
                                <v-list-item-content>
                                    <h3 class="filter-titles">Personal</h3>
                                </v-list-item-content>
                                <v-list-item-action>
                                    <v-icon v-if="mainMenus.personal">mdi-chevron-up</v-icon>
                                    <v-icon v-else>mdi-chevron-down</v-icon>
                                </v-list-item-action>
                            </v-list-item>
                            <v-expand-transition>
                                <v-list-item-group v-if="mainMenus.personal">

                                    <!-- Has kids -->
                                    <v-list-item @click="toggleSubmenu('hasKids')">
                                        <v-list-item-content>
                                            <v-list-item-title>Has kids <span class="filter-span">{{
            filter.hasKids }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.hasKids">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.hasKids" inactive>
                                            <v-list-item :ripple="false" inactive>
                                                <v-radio-group v-model="filter.hasKids" dense>
                                                    <v-radio label="Yes" value="yes"></v-radio>
                                                    <v-radio label="No" value="no"></v-radio>
                                                </v-radio-group>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('hasKids', 'string')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Want kids -->
                                    <v-list-item @click="toggleSubmenu('wantKids')">
                                        <v-list-item-content>
                                            <v-list-item-title>Want kids <span class="filter-span">{{
            filter.wantKids }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.wantKids">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.wantKids" inactive>
                                            <v-list-item :ripple="false" inactive>
                                                <v-radio-group v-model="filter.wantKids" dense>
                                                    <v-radio label="Yes" value="yes"></v-radio>
                                                    <v-radio label="No" value="no"></v-radio>
                                                </v-radio-group>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('wantKids', 'string')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Fetishes -->
                                    <v-list-item @click="toggleSubmenu('fetishes')">
                                        <v-list-item-content>
                                            <v-list-item-title>Fetishes <span class="filter-span">{{
            filter.fetishes.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.fetishes">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.fetishes" inactive>
                                            <v-list-item :ripple="false" v-for="fetish in fetishes" :key="fetish" dense
                                                inactive>
                                                <v-checkbox v-model="filter.fetishes" :label="fetish" :value="fetish"
                                                    dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('fetishes', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Personality -->
                                    <v-list-item @click="toggleSubmenu('personalities')">
                                        <v-list-item-content>
                                            <v-list-item-title>Personalities <span class="filter-span">{{
            filter.personalities.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.personalities">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.personalities" inactive>
                                            <v-list-item :ripple="false" v-for="personality in personalities"
                                                :key="personality" dense inactive>
                                                <v-checkbox v-model="filter.personalities" :label="personality"
                                                    :value="personality" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('personalities', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Hobbies and activities -->
                                    <v-list-item @click="toggleSubmenu('hobbiesAndActivities')">
                                        <v-list-item-content>
                                            <v-list-item-title>Hobbies and activies <span class="filter-span">{{
            filter.hobbiesAndActivities.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.hobbiesAndActivities">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.hobbiesAndActivities" inactive>
                                            <v-list-item :ripple="false" v-for="hobby in hobbiesAndActivities"
                                                :key="hobby" dense inactive>
                                                <v-checkbox v-model="filter.hobbiesAndActivities" :label="hobby"
                                                    :value="hobby" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('hobbiesAndActivities', 'array')"> Reset
                                                </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                    <!-- Movie genres -->
                                    <v-list-item @click="toggleSubmenu('movieGenres')">
                                        <v-list-item-content>
                                            <v-list-item-title>Movie genres <span class="filter-span">{{
            filter.movieGenres.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.movieGenres">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.movieGenres" inactive>
                                            <v-list-item :ripple="false" v-for="movies in movieGenres" :key="movies"
                                                dense inactive>
                                                <v-checkbox v-model="filter.movieGenres" :label="movies" :value="movies"
                                                    dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('movieGenres', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                    <!-- Book genres -->
                                    <v-list-item @click="toggleSubmenu('bookGenres')">
                                        <v-list-item-content>
                                            <v-list-item-title>Book genres <span class="filter-span">{{
            filter.bookGenres.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.bookGenres">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.bookGenres" inactive>
                                            <v-list-item :ripple="false" v-for="books in bookGenres" :key="books" dense
                                                inactive>
                                                <v-checkbox v-model="filter.bookGenres" :label="books" :value="books"
                                                    dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('bookGenres', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>




                                    <!-- Highest graduation -->
                                    <v-list-item @click="toggleSubmenu('highestGraduation')">
                                        <v-list-item-content>
                                            <v-list-item-title>Highest graduation <span class="filter-span">{{
            filter.highestGraduation.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.highestGraduation">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.highestGraduation" inactive>
                                            <v-list-item :ripple="false" v-for="grad in highestGraduation" :key="grad"
                                                dense inactive>
                                                <v-checkbox v-model="filter.highestGraduation" :label="grad"
                                                    :value="grad" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('highestGraduation', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                    <!-- Education -->
                                    <v-list-item @click="toggleSubmenu('education')">
                                        <v-list-item-content>
                                            <v-list-item-title>Education <span class="filter-span">{{
            filter.education.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.education">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.education" inactive>
                                            <v-list-item :ripple="false" v-for="edu in education" :key="edu" dense
                                                inactive>
                                                <v-checkbox v-model="filter.education" :label="edu" :value="edu" dense
                                                    hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('education', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                    <!-- Travel preferences -->
                                    <v-list-item @click="toggleSubmenu('travelPreferences')">
                                        <v-list-item-content>
                                            <v-list-item-title>Travel preferences <span class="filter-span">{{
            filter.travelPreferences.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.travelPreferences">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.travelPreferences" inactive>
                                            <v-list-item :ripple="false" v-for="travel in travelPreferences"
                                                :key="travel" dense inactive>
                                                <v-checkbox v-model="filter.travelPreferences" :label="travel"
                                                    :value="travel" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('travelPreferences', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                    <!-- religion -->
                                    <v-list-item @click="toggleSubmenu('religion')">
                                        <v-list-item-content>
                                            <v-list-item-title>Religion <span class="filter-span">{{
            filter.religion.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.religion">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.religion" inactive>
                                            <v-list-item :ripple="false" v-for="relig in religion" :key="relig" dense
                                                inactive>
                                                <v-checkbox v-model="filter.religion" :label="relig" :value="relig"
                                                    dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('religion', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>


                                    <!-- Languages -->
                                    <v-list-item @click="toggleSubmenu('languages')">
                                        <v-list-item-content>
                                            <v-list-item-title>Languages <span class="filter-span">{{
            filter.languages.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.languages">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.languages" inactive>
                                            <v-list-item :ripple="false" v-for="lang in languages" :key="lang" dense
                                                inactive>
                                                <v-checkbox v-model="filter.languages" :label="lang" :value="lang" dense
                                                    hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('languages', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                    <!-- Current Situation -->
                                    <v-list-item @click="toggleSubmenu('currentSituation')">
                                        <v-list-item-content>
                                            <v-list-item-title>Current situation <span class="filter-span">{{
            filter.currentSituation.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.currentSituation">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.currentSituation" inactive>
                                            <v-list-item :ripple="false" v-for="currentSit in currentSituation"
                                                :key="currentSit" dense inactive>
                                                <v-checkbox v-model="filter.currentSituation" :label="currentSit"
                                                    :value="currentSit" dense hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('currentSituation', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                    <!-- Pets -->
                                    <v-list-item @click="toggleSubmenu('pets')">
                                        <v-list-item-content>
                                            <v-list-item-title>Pets <span class="filter-span">{{
            filter.pets.join(', ') }}</span></v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon v-if="submenus.pets">mdi-chevron-up</v-icon>
                                            <v-icon v-else>mdi-chevron-down</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>
                                    <v-expand-transition>
                                        <v-list-item-group v-if="submenus.pets" inactive>
                                            <v-list-item :ripple="false" v-for="pet in pets" :key="pet" dense inactive>
                                                <v-checkbox v-model="filter.pets" :label="pet" :value="pet" dense
                                                    hide-details></v-checkbox>
                                            </v-list-item>
                                            <v-row class="resetRow">
                                                <v-btn depressed outlined plain text small color="error"
                                                    @click="unsetFilter('pets', 'array')"> Reset </v-btn>
                                            </v-row>
                                        </v-list-item-group>
                                    </v-expand-transition>



                                </v-list-item-group>
                            </v-expand-transition>
                            <v-divider class="pb-3"></v-divider>

                        </v-list-item-group>


                        <!-- Actions -->
                    </v-list>
                    <div class="list-actions">
                        <v-btn @click="search()" small dense elevation="0" class="me-2 mt-3" color="primary"
                            inline>Search</v-btn>
                        <v-btn small dense elevation="0" color="error" @click="clearFilter()" class="mt-3">Clear filter</v-btn>
                    </div>
                </v-navigation-drawer>

            </v-container>
        </div>


        <!-- Selected user box-->
        <v-row justify="center">
            <v-dialog v-model="profile_dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
                <v-card>
                    <v-toolbar dark color="primary">
                        <v-toolbar-title>{{selectedUser.username}}</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-btn icon dark @click="profile_dialog = false">
                            <v-icon>mdi-close</v-icon>
                        </v-btn>
                    </v-toolbar>
                    <v-container fluid>
                        <v-row>
                            <v-col class="pa-0">
                                <div :style="{ backgroundImage: 'url(' + imageDomain + selectedUser.banner + ')' }" class="banner">
                                </div>
                            </v-col>
                        </v-row>

                        <!-- User Profile -->
                        <v-row justify="center">
                            <v-col cols="12" sm="8" md="6">
                                <v-card class="profile-card">
                                    <!-- Avatar -->
                                    <v-row justify="center">
                                        <v-col cols="auto">
                                            <v-avatar size="130" class="mt-1">
                                                <img :src="imageDomain + selectedUser.avatar">
                                            </v-avatar>
                                        </v-col>
                                    </v-row>

                                    <!-- User Information -->
                                    <v-card-text class="user-info text-center">
                                        <v-row>
                                            <v-col cols="8">
                                                <h2>{{ selectedUser.username }}</h2>
                                                <p>{{ selectedUser.age }} year old {{ selectedUser.sexuality }} {{ selectedUser.gender }}</p>
                                                <p>{{ selectedUser.city }} - {{ selectedUser.country }}</p>
                                            </v-col>
                                            <v-col cols="4" class="d-flex justify-end">
                                                <v-btn small outlined color="primary" @click="messageUser(selectedUser.id)">Message</v-btn>
                                            </v-col>
                                        </v-row>

                                        <h4 class="mt-3">Bio</h4>
                                        <p class="mb-5">{{ selectedUser.bio }}</p>
                                        <v-divider></v-divider>


                                        <v-tabs show-arrows>
                                            <v-tab key="general">General</v-tab>
                                            <v-tab key="body">Body features</v-tab>
                                            <v-tab key="bodyandlifestyle">Body and lifestyle</v-tab>
                                            <v-tab key="financial">Financial</v-tab>
                                            <v-tab key="personal">Personal</v-tab>
                                            <v-tab key="gallery">Gallery</v-tab>

                                            <!-- General Tab Content -->
                                            <v-tab-item key="general">
                                                <v-card-text>
                                                    <ul class="userInfoListClass">
                                                        <li v-if="selectedUser.userData && selectedUser.userData.gender"><h4>Gender:</h4> <p>{{formatOutput(selectedUser.userData.gender)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.dob"><h4>Age:</h4> <p>{{calculateAge(selectedUser.userData.dob)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.sexuality"><h4>Sexuality:</h4> <p>{{formatOutput(selectedUser.userData.sexuality)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.lookingFor"><h4>Looking for:</h4> <p>{{formatOutput(selectedUser.userData.lookingFor)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.country"><h4>Country:</h4> <p>{{formatOutput(selectedUser.userData.country)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.city"><h4>City:</h4> <p>{{formatOutput(selectedUser.userData.city)}}</p></li>

                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Body Tab Content -->
                                            <v-tab-item key="body">
                                                <v-card-text>
                                                    <!-- Your Body tab content goes here -->
                                                    <ul class="userInfoListClass">
                                                        <li v-if="selectedUser.userData && selectedUser.userData.height"><h4>Height:</h4> <p>{{formatOutput(selectedUser.userData.height)}} cm</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.weight"><h4>Weight:</h4><p> {{calculateAge(selectedUser.userData.weight)}} kg</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.hair"><h4>Hair:</h4><p> {{formatOutput(selectedUser.userData.hair)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.hairColor"><h4>Hair color:</h4><p> {{formatOutput(selectedUser.userData.hairColor)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.eyeColor"><h4>Eye color:</h4><p> {{formatOutput(selectedUser.userData.eyeColor)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.facialHair"><h4>Facial hair:</h4><p> {{formatOutput(selectedUser.userData.facialHair)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.pubicHair"><h4>Pubic hair:</h4><p> {{formatOutput(selectedUser.userData.pubicHair)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.bodyHair"><h4>Body hair:</h4><p> {{formatOutput(selectedUser.userData.bodyHair)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.tattoo"><h4>Tattoos:</h4><p> {{formatOutput(selectedUser.userData.tattoo)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.piercing"><h4>Piercings:</h4><p> {{formatOutput(selectedUser.userData.piercing)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.gender && selectedUser.userData.gender == 'male' && selectedUser.userData.penisSize"><h4>Penis size:</h4><p> {{formatOutput(selectedUser.userData.penisSize)}} cm</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.gender && selectedUser.userData.gender == 'female' && selectedUser.userData.penisSize"><h4>Breast size:</h4><p> {{formatOutput(selectedUser.userData.breastSize)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.abs"><h4>Abs:</h4><p> {{formatOutput(selectedUser.userData.abs)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.bottomSizes"><h4>Bottom size:</h4><p> {{formatOutput(selectedUser.userData.bottomSizes)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.bodyTypes"><h4>Body type:</h4><p> {{formatOutput(selectedUser.userData.bodyTypes)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.ethnicities"><h4>Ethnicity:</h4><p> {{formatOutput(selectedUser.userData.ethnicities)}}</p></li>
                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Body and lifestyle Content -->
                                            <v-tab-item key="bodyandlifestyle">
                                                <v-card-text>
                                                    <ul class="userInfoListClass">
                                                        <li v-if="selectedUser.userData && selectedUser.userData.fitnessLevels"><h4>Fitness Level: </h4><p>{{formatOutput(selectedUser.userData.fitnessLevels)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.dietaryPreferences"><h4>Dietary preferences: </h4><p>{{formatOutput(selectedUser.userData.dietaryPreferences)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.healthHabits"><h4>Health habits: </h4><p>{{formatOutput(selectedUser.userData.healthHabits)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.exerciseFrequency"><h4>Exercise frequency: </h4><p>{{formatOutput(selectedUser.userData.exerciseFrequency)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.sleepingHabits"><h4>Sleeping habits: </h4><p>{{formatOutput(selectedUser.userData.sleepingHabits)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.foodAllergies"><h4>Food allergies: </h4><p>{{formatOutput(selectedUser.userData.foodAllergies)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.alcoholConsumptions"><h4>Alcohol consumption: </h4><p>{{formatOutput(selectedUser.userData.alcoholConsumptions)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.smoking"><h4>Smoking: </h4><p>{{formatOutput(selectedUser.userData.smoking)}}</p></li>
                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Financial Tab Content -->
                                            <v-tab-item key="financial">
                                                <v-card-text>
                                                    <ul class="userInfoListClass">
                                                        <li v-if="selectedUser.userData && selectedUser.userData.jobs"><h4>Job sector: </h4><p>{{formatOutput(selectedUser.userData.jobs)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.netWorth"><h4>Net worth: </h4><p>{{thousandSeparator(selectedUser.userData.netWorth)}} €</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.yearlySalary"><h4>Yearly salary: </h4><p>{{thousandSeparator(selectedUser.userData.yearlySalary)}} €</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.mainLiving"><h4>Main living: </h4><p>{{formatOutput(selectedUser.userData.mainLiving)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.financialGoals"><h4>Financial goals: </h4><p>{{formatOutput(selectedUser.userData.financialGoals)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.spendingHabits"><h4>Spending habits: </h4><p>{{formatOutput(selectedUser.userData.spendingHabits)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.financialIndependence"><h4>Financial independence: </h4><p>{{formatOutput(selectedUser.userData.financialIndependence)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.inDebt"><h4>In debt: </h4><p>{{formatOutput(selectedUser.userData.inDebt)}}</p></li>
                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Personal Tab Content -->
                                            <v-tab-item key="personal">
                                                <v-card-text>
                                                    <ul class="userInfoListClass">
                                                        <li v-if="selectedUser.userData && selectedUser.userData.hasKids"><h4>Has kids: </h4><p>{{formatOutput(selectedUser.userData.hasKids)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.wantKids"><h4>Want kids: </h4><p>{{formatOutput(selectedUser.userData.wantKids)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.fetishes"><h4>Fetishes: </h4><p>{{formatOutput(selectedUser.userData.fetishes)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.personalities"><h4>Personality: </h4><p>{{formatOutput(selectedUser.userData.personalities)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.hobbiesAndActivities"><h4>Hobbies and activities: </h4><p>{{formatOutput((selectedUser.userData.hobbiesAndActivities))}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.movieGenres"><h4>Movie genres: </h4><p>{{formatOutput(selectedUser.userData.movieGenres)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.bookGenres"><h4>Book genres: </h4><p>{{formatOutput(selectedUser.userData.bookGenres)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.highestGraduation"><h4>Highest graduation: </h4><p>{{formatOutput(selectedUser.userData.highestGraduation)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.education"><h4>Education: </h4><p>{{formatOutput(selectedUser.userData.education)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.travelPreferences"><h4>Travel preferences: </h4><p>{{formatOutput(selectedUser.userData.travelPreferences)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.religion"><h4>Religion: </h4><p>{{formatOutput(selectedUser.userData.religion)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.languages"><h4>Languages: </h4><p>{{formatOutput(selectedUser.userData.languages)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.currentSituation"><h4>Current situation: </h4><p>{{formatOutput(selectedUser.userData.currentSituation)}}</p></li>
                                                        <li v-if="selectedUser.userData && selectedUser.userData.pets"><h4>Pets: </h4><p>{{formatOutput(selectedUser.userData.pets)}}</p></li>
                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Personal Tab Content -->
                                            <v-tab-item key="gallery">
                                                <v-card-text>
                                                <v-divider class="pb-5"></v-divider>
                                                <v-row>
                                                    <v-col v-for="(image, index) in selectedUser.userGallery" :key="index" cols="6" md="3" lg="3">
                                                        <v-card class="" @click="openSelectedUserLightbox(index)">
                                                        <v-img :src="imageDomain + image" aspect-ratio="1.5"></v-img>
                                                        </v-card>
                                                    </v-col>
                                                </v-row>
                                                <v-dialog v-model="selectedUserLightbox" max-width="800">
                                                    <v-card>
                                                        <v-img :src="imageDomain + selectedUser.userGallery[selectedUserGalleryIndex]" aspect-ratio="1.5" contain></v-img>
                                                        <v-btn class="lightbox-arrow left" @click="prevSelectedUserImage()"><v-icon>mdi-chevron-left</v-icon></v-btn>
                                                        <v-btn class="lightbox-arrow right" @click="nextSelectedUserImage()"><v-icon>mdi-chevron-right</v-icon></v-btn>
                                                    </v-card>
                                                </v-dialog>
                                                </v-card-text>
                                            </v-tab-item>

                                        </v-tabs>

                                    </v-card-text>
                                </v-card>
                            </v-col>
                        </v-row>

                    </v-container>
                </v-card>
            </v-dialog>
        </v-row>


        <!-- My profile box-->
        <v-row justify="center">
            <v-dialog v-model="myProfileDialog" fullscreen hide-overlay transition="dialog-bottom-transition">
                <v-card>
                    <v-toolbar dark color="primary">
                        <v-toolbar-title>Profile</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-btn icon dark @click="myProfileDialog = false">
                            <v-icon>mdi-close</v-icon>
                        </v-btn>
                    </v-toolbar>
                    <v-container fluid>
                        <v-row>
                            <v-col class="pa-0">
                                <div :style="{ backgroundImage: 'url(' + imageDomain + user.banner + ')' }" class="banner">
                                </div>
                            </v-col>
                        </v-row>

                        <!-- User Profile -->
                        <v-row justify="center">
                            <v-col cols="12" sm="8" md="6">
                                <v-card class="profile-card">
                                    <!-- Avatar -->
                                    <v-row justify="center">
                                        <v-col cols="auto">
                                            <v-avatar size="130" class="mt-1">
                                                <img :src="imageDomain + user.avatar">
                                            </v-avatar>
                                        </v-col>
                                    </v-row>

                                    <!-- User Information -->
                                    <v-card-text class="user-info text-center">
                                        <v-row>
                                            <v-col cols="8">
                                                <h2>{{ user.username }}</h2>
                                                <p>{{ user.age }} year old {{ user.sexuality }} {{ user.gender }}</p>
                                                <p>{{ user.city }} - {{ user.country }}</p>
                                            </v-col>
                                            <v-col cols="4" class="d-flex justify-end">
                                                <v-btn small outlined color="primary" @click="editProfile">Edit</v-btn>
                                            </v-col>
                                        </v-row>

                                        <h4 class="mt-3">Bio</h4>
                                        <p class="mb-5">{{ user.bio }}</p>
                                        <v-divider></v-divider>


                                        <v-tabs show-arrows>
                                            <v-tab key="general">General</v-tab>
                                            <v-tab key="body">Body features</v-tab>
                                            <v-tab key="bodyandlifestyle">Body and lifestyle</v-tab>
                                            <v-tab key="financial">Financial</v-tab>
                                            <v-tab key="personal">Personal</v-tab>
                                            <v-tab key="gallery">Gallery</v-tab>

                                            <!-- General Tab Content -->
                                            <v-tab-item key="general">
                                                <v-card-text>
                                                    <ul class="userInfoListClass">
                                                        <li v-if="user.userData && user.userData.gender"><h4>Gender:</h4> <p>{{formatOutput(user.userData.gender)}}</p></li>
                                                        <li v-if="user.userData && user.userData.dob"><h4>Age:</h4> <p>{{calculateAge(user.userData.dob)}}</p></li>
                                                        <li v-if="user.userData && user.userData.sexuality"><h4>Sexuality:</h4> <p>{{formatOutput(user.userData.sexuality)}}</p></li>
                                                        <li v-if="user.userData && user.userData.lookingFor"><h4>Looking for:</h4> <p>{{formatOutput(user.userData.lookingFor)}}</p></li>
                                                        <li v-if="user.userData && user.userData.country"><h4>Country:</h4> <p>{{formatOutput(user.userData.country)}}</p></li>
                                                        <li v-if="user.userData && user.userData.city"><h4>City:</h4> <p>{{formatOutput(user.userData.city)}}</p></li>

                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Body Tab Content -->
                                            <v-tab-item key="body">
                                                <v-card-text>
                                                    <!-- Your Body tab content goes here -->
                                                    <ul class="userInfoListClass">
                                                        <li v-if="user.userData && user.userData.height"><h4>Height:</h4> <p>{{formatOutput(user.userData.height)}} cm</p></li>
                                                        <li v-if="user.userData && user.userData.weight"><h4>Weight:</h4><p> {{calculateAge(user.userData.weight)}} kg</p></li>
                                                        <li v-if="user.userData && user.userData.hair"><h4>Hair:</h4><p> {{formatOutput(user.userData.hair)}}</p></li>
                                                        <li v-if="user.userData && user.userData.hairColor"><h4>Hair color:</h4><p> {{formatOutput(user.userData.hairColor)}}</p></li>
                                                        <li v-if="user.userData && user.userData.eyeColor"><h4>Eye color:</h4><p> {{formatOutput(user.userData.eyeColor)}}</p></li>
                                                        <li v-if="user.userData && user.userData.facialHair"><h4>Facial hair:</h4><p> {{formatOutput(user.userData.facialHair)}}</p></li>
                                                        <li v-if="user.userData && user.userData.pubicHair"><h4>Pubic hair:</h4><p> {{formatOutput(user.userData.pubicHair)}}</p></li>
                                                        <li v-if="user.userData && user.userData.bodyHair"><h4>Body hair:</h4><p> {{formatOutput(user.userData.bodyHair)}}</p></li>
                                                        <li v-if="user.userData && user.userData.tattoo"><h4>Tattoos:</h4><p> {{formatOutput(user.userData.tattoo)}}</p></li>
                                                        <li v-if="user.userData && user.userData.piercing"><h4>Piercings:</h4><p> {{formatOutput(user.userData.piercing)}}</p></li>
                                                        <li v-if="user.userData && user.userData.gender && user.userData.gender == 'male' && user.userData.penisSize"><h4>Penis size:</h4><p> {{formatOutput(user.userData.penisSize)}} cm</p></li>
                                                        <li v-if="user.userData && user.userData.gender && user.userData.gender == 'female' && user.userData.penisSize"><h4>Breast size:</h4><p> {{formatOutput(user.userData.breastSize)}}</p></li>
                                                        <li v-if="user.userData && user.userData.abs"><h4>Abs:</h4><p> {{formatOutput(user.userData.abs)}}</p></li>
                                                        <li v-if="user.userData && user.userData.bottomSizes"><h4>Bottom size:</h4><p> {{formatOutput(user.userData.bottomSizes)}}</p></li>
                                                        <li v-if="user.userData && user.userData.bodyTypes"><h4>Body type:</h4><p> {{formatOutput(user.userData.bodyTypes)}}</p></li>
                                                        <li v-if="user.userData && user.userData.ethnicities"><h4>Ethnicity:</h4><p> {{formatOutput(user.userData.ethnicities)}}</p></li>
                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Body and lifestyle Content -->
                                            <v-tab-item key="bodyandlifestyle">
                                                <v-card-text>
                                                    <ul class="userInfoListClass">
                                                        <li v-if="user.userData && user.userData.fitnessLevels"><h4>Fitness Level: </h4><p>{{formatOutput(user.userData.fitnessLevels)}}</p></li>
                                                        <li v-if="user.userData && user.userData.dietaryPreferences"><h4>Dietary preferences: </h4><p>{{formatOutput(user.userData.dietaryPreferences)}}</p></li>
                                                        <li v-if="user.userData && user.userData.healthHabits"><h4>Health habits: </h4><p>{{formatOutput(user.userData.healthHabits)}}</p></li>
                                                        <li v-if="user.userData && user.userData.exerciseFrequency"><h4>Exercise frequency: </h4><p>{{formatOutput(user.userData.exerciseFrequency)}}</p></li>
                                                        <li v-if="user.userData && user.userData.sleepingHabits"><h4>Sleeping habits: </h4><p>{{formatOutput(user.userData.sleepingHabits)}}</p></li>
                                                        <li v-if="user.userData && user.userData.foodAllergies"><h4>Food allergies: </h4><p>{{formatOutput(user.userData.foodAllergies)}}</p></li>
                                                        <li v-if="user.userData && user.userData.alcoholConsumptions"><h4>Alcohol consumption: </h4><p>{{formatOutput(user.userData.alcoholConsumptions)}}</p></li>
                                                        <li v-if="user.userData && user.userData.smoking"><h4>Smoking: </h4><p>{{formatOutput(user.userData.smoking)}}</p></li>
                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Financial Tab Content -->
                                            <v-tab-item key="financial">
                                                <v-card-text>
                                                    <ul class="userInfoListClass">
                                                        <li v-if="user.userData && user.userData.jobs"><h4>Job sector: </h4><p>{{formatOutput(user.userData.jobs)}}</p></li>
                                                        <li v-if="user.userData && user.userData.netWorth"><h4>Net worth: </h4><p>{{thousandSeparator(user.userData.netWorth)}} €</p></li>
                                                        <li v-if="user.userData && user.userData.yearlySalary"><h4>Yearly salary: </h4><p>{{thousandSeparator(user.userData.yearlySalary)}} €</p></li>
                                                        <li v-if="user.userData && user.userData.mainLiving"><h4>Main living: </h4><p>{{formatOutput(user.userData.mainLiving)}}</p></li>
                                                        <li v-if="user.userData && user.userData.financialGoals"><h4>Financial goals: </h4><p>{{formatOutput(user.userData.financialGoals)}}</p></li>
                                                        <li v-if="user.userData && user.userData.spendingHabits"><h4>Spending habits: </h4><p>{{formatOutput(user.userData.spendingHabits)}}</p></li>
                                                        <li v-if="user.userData && user.userData.financialIndependence"><h4>Financial independence: </h4><p>{{formatOutput(user.userData.financialIndependence)}}</p></li>
                                                        <li v-if="user.userData && user.userData.inDebt"><h4>In debt: </h4><p>{{formatOutput(user.userData.inDebt)}}</p></li>
                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Personal Tab Content -->
                                            <v-tab-item key="personal">
                                                <v-card-text>
                                                    <ul class="userInfoListClass">
                                                        <li v-if="user.userData && user.userData.hasKids"><h4>Has kids: </h4><p>{{formatOutput(user.userData.hasKids)}}</p></li>
                                                        <li v-if="user.userData && user.userData.wantKids"><h4>Want kids: </h4><p>{{formatOutput(user.userData.wantKids)}}</p></li>
                                                        <li v-if="user.userData && user.userData.fetishes"><h4>Fetishes: </h4><p>{{formatOutput(user.userData.fetishes)}}</p></li>
                                                        <li v-if="user.userData && user.userData.personalities"><h4>Personality: </h4><p>{{formatOutput(user.userData.personalities)}}</p></li>
                                                        <li v-if="user.userData && user.userData.hobbiesAndActivities"><h4>Hobbies and activities: </h4><p>{{formatOutput((user.userData.hobbiesAndActivities))}}</p></li>
                                                        <li v-if="user.userData && user.userData.movieGenres"><h4>Movie genres: </h4><p>{{formatOutput(user.userData.movieGenres)}}</p></li>
                                                        <li v-if="user.userData && user.userData.bookGenres"><h4>Book genres: </h4><p>{{formatOutput(user.userData.bookGenres)}}</p></li>
                                                        <li v-if="user.userData && user.userData.highestGraduation"><h4>Highest graduation: </h4><p>{{formatOutput(user.userData.highestGraduation)}}</p></li>
                                                        <li v-if="user.userData && user.userData.education"><h4>Education: </h4><p>{{formatOutput(user.userData.education)}}</p></li>
                                                        <li v-if="user.userData && user.userData.travelPreferences"><h4>Travel preferences: </h4><p>{{formatOutput(user.userData.travelPreferences)}}</p></li>
                                                        <li v-if="user.userData && user.userData.religion"><h4>Religion: </h4><p>{{formatOutput(user.userData.religion)}}</p></li>
                                                        <li v-if="user.userData && user.userData.languages"><h4>Languages: </h4><p>{{formatOutput(user.userData.languages)}}</p></li>
                                                        <li v-if="user.userData && user.userData.currentSituation"><h4>Current situation: </h4><p>{{formatOutput(user.userData.currentSituation)}}</p></li>
                                                        <li v-if="user.userData && user.userData.pets"><h4>Pets: </h4><p>{{formatOutput(user.userData.pets)}}</p></li>
                                                    </ul>
                                                </v-card-text>
                                            </v-tab-item>

                                            <!-- Personal Tab Content -->
                                            <v-tab-item key="gallery">
                                                <v-card-text>
                                                    <v-row>
                                                        <v-col cols="6" md="3">
                                                            <v-file-input
                                                                label="Choose image"
                                                                clearable
                                                                dense
                                                                flat
                                                                outlined
                                                                color="primary"
                                                                small
                                                                prepend-inner-icon="mdi-camera"
                                                                prepend-icon=""
                                                                @change="uploadGalleryImage"
                                                                ref="galleryImageInput"
                                                            ></v-file-input>
                                                            
                                                        </v-col>
                                                        <v-col>
                                                            <v-btn v-if="newGalleryImage" small outlined color="primary" @click="uploadImage()">Upload</v-btn>
                                                        </v-col>
                                                    </v-row>
                                                    <span><i>Only jpg and png is allowed</i></span>
                                                <v-divider class="pb-5"></v-divider>
                                                <v-row>
                                                    <v-col v-for="(image, index) in user.userGallery" :key="index" cols="6" md="3" lg="3">
                                                        <v-card class="" @click="openUserLightbox(index)">
                                                        <v-img :src="imageDomain + image" aspect-ratio="1.5"></v-img>
                                                        <v-btn class="removeImage" @click.stop="dialogRemoveImage(image)"><v-icon x-small>mdi-close</v-icon></v-btn>
                                                        </v-card>
                                                    </v-col>
                                                </v-row>
                                                <v-dialog v-model="userLightbox" max-width="800">
                                                    <v-card>
                                                        <v-img :src="imageDomain + user.userGallery[userGalleryIndex]" aspect-ratio="1.5" contain></v-img>
                                                        <v-btn class="removeImage2" @click.stop="dialogRemoveImage(user.userGallery[userGalleryIndex])"><v-icon>mdi-close</v-icon></v-btn>
                                                        <v-btn class="lightbox-arrow left" @click="prevUserImage()"><v-icon>mdi-chevron-left</v-icon></v-btn>
                                                        <v-btn class="lightbox-arrow right" @click="nextUserImage()"><v-icon>mdi-chevron-right</v-icon></v-btn>
                                                    </v-card>
                                                </v-dialog>

                                                <v-dialog
                                                    v-model="removeImageDialogPrompt"
                                                    persistent
                                                    max-width="290"
                                                    >
                                                    <v-card>
                                                        <v-card-title class="text-h5">
                                                        Remove image?
                                                        </v-card-title>
                                                        <v-card-text>You can't undo this change</v-card-text>
                                                        <v-card-actions>
                                                        <v-spacer></v-spacer>
                                                        <v-btn color="blue darken-1" text @click="closeRemoveImage()">No</v-btn>
                                                        <v-btn color="blue darken-1" text @click="deleteImage()">Yes</v-btn>
                                                        </v-card-actions>
                                                    </v-card>
                                                    </v-dialog>
                                                </v-card-text>
                                            </v-tab-item>

                                        </v-tabs>

                                    </v-card-text>
                                </v-card>
                            </v-col>
                        </v-row>

                    </v-container>
                </v-card>
            </v-dialog>
        </v-row>


        <!--Settings-->
        <v-row justify="center">
            <v-dialog v-model="settingsDialog" fullscreen hide-overlay transition="dialog-bottom-transition">
                <v-card>
                    <v-toolbar dark color="primary">
                        <v-toolbar-title>Settings</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-btn icon dark @click="settingsDialog = false">
                            <v-icon>mdi-close</v-icon>
                        </v-btn>
                    </v-toolbar>
                    <v-list three-line subheader>
                        <v-subheader>Password</v-subheader>
                        <v-list-item>
                            <v-list-item-content>
                                <v-list-item-title>Change password</v-list-item-title>
                                <div class="d-flex flex-column">
                                    <v-col cols="12" md="3" class="pa-0 ma-0">
                                        <v-text-field type="password" label="Current password" v-model="passwords.current_password"></v-text-field>
                                    </v-col>
                                    <v-col cols="12" md="3" class="pa-0 ma-0">
                                        <v-text-field type="password" label="New password" v-model="passwords.newPassword"></v-text-field>
                                    </v-col>
                                    <v-col cols="12" md="3" class="pa-0 ma-0">
                                        <v-text-field type="password" label="Confirm new password" v-model="passwords.confirmPassword"></v-text-field>
                                    </v-col>
                                    <v-col cols="12" md="3" class="pa-0 ma-0">
                                        <v-btn small color="primary" @click="updatePassword()">Save</v-btn>
                                        <v-progress-circular v-if="passwords.saving" indeterminate color="primary" size="18" class="ml-3"></v-progress-circular>
                                    </v-col>
                                    <v-col cols="12" md="3" class="pa-0 ma-0 mb-3 mt-2" v-if="passwords.error">
                                        <v-alert color="red" dense outlined type="warning">{{passwords.error}}</v-alert>
                                    </v-col>
                                    <v-col cols="12" md="3" class="pa-0 ma-0 mb-3 mt-2" v-if="passwords.success">
                                        <v-alert color="blue" dense outlined type="success">Updated</v-alert>
                                    </v-col>
                                </div>
                                <v-divider class="pa-5 mt-3"></v-divider>
                                <v-col cols="8" md="3" class="pa-0">
                                    <a href="https://billing.stripe.com/p/login/7sI3ct4zoceDcec8ww" target="_blank">
                                        <v-btn color="primary">Manage Subscription</v-btn>
                                    </a>
                                </v-col>
                            </v-list-item-content>
                        </v-list-item>
                    </v-list>
                </v-card>
            </v-dialog>
        </v-row>


<!-- Conversations dialog-->
<v-row justify="center">
    <v-dialog v-model="conversationsDialog" fullscreen hide-overlay transition="dialog-bottom-transition">
        <v-card>
            <v-toolbar dark color="primary">
                <v-toolbar-title>Conversations</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-btn icon dark @click="conversationsDialog = false">
                    <v-icon>mdi-close</v-icon>
                </v-btn>
            </v-toolbar>
            <v-container>
                <div class="conversation-box" v-for="(conversation, conversation_index) in conversations" :key="conversation_index">
                    <v-row  class="conversation-row" @click="messageUser(conversation.user_id)">
                        <!-- Avatar column -->
                        <v-col cols="2" lg="1">
                            <v-avatar size="50">
                                <img :src="imageDomain + conversation.avatar" alt="Avatar">
                            </v-avatar>
                        </v-col>
                        <!-- Username, message, and time columns -->
                        <v-col cols="10">
                            <div><p class="conversationUsername">{{ conversation.username }}</p> <span class="conversationTime">{{ conversation.time }}</span></div>
                            <div>{{ conversation.message }}</div>
                        </v-col>
                    </v-row>
                </div>
            </v-container>
        </v-card>
    </v-dialog>
</v-row>


        <!--User Settings-->
        <v-row justify="center">
            <v-dialog v-model="profileSettings" fullscreen hide-overlay transition="dialog-bottom-transition">
                <v-card>
                    <v-toolbar dark color="primary">
                        <v-toolbar-title>Edit profile</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-toolbar-items>
                            <v-btn icon dark @click="profileSettings = false">
                                <v-icon>mdi-close</v-icon>
                            </v-btn>
                        </v-toolbar-items>
                    </v-toolbar>

                    <v-col cols="12" md="4" elevation="1">
                        <v-list three-line subheader>
                            <v-subheader>Update profile</v-subheader>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-col cols="12">
                                        <v-text-field label="Username" disabled hint="You can't edit your username" :value="user.username" persistent-hint></v-text-field>
                                    </v-col>
                                </v-list-item-content>
                            </v-list-item>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-col cols="12">
                                        <v-file-input
                                            label="Avatar"
                                            clearable
                                            dense
                                            flat
                                            outlined
                                            prepend-inner-icon="mdi-camera"
                                            prepend-icon=""
                                            @change="uploadAvatar"
                                        ></v-file-input>
                                    </v-col>
                                </v-list-item-content>
                            </v-list-item>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-col cols="12">
                                        <v-file-input
                                            label="Background"
                                            clearable
                                            dense
                                            flat
                                            outlined
                                            prepend-inner-icon="mdi-camera"
                                            prepend-icon=""
                                            @change="uploadBanner"
                                        ></v-file-input>
                                    </v-col>
                                </v-list-item-content>
                            </v-list-item>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item-title>Bio</v-list-item-title>
                                    <v-col cols="12">
                                        <v-textarea outlined dense label="Bio" v-model="publicProfileSettings.bio"></v-textarea>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-btn color="primary" @click="updateProfileSettings">Save</v-btn>
                                    </v-col>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list>
                    </v-col>
                    <v-divider></v-divider>

                    <v-col cols="12" md="4" elevation="1">
                        <v-list three-line subheader>
                            <v-subheader>Update user info</v-subheader>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item-title>General</v-list-item-title>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.gender" :items="genders" item-text="text"
                                            item-value="value" label="Gender"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-menu ref="dob" v-model="dobSelector" :close-on-content-click="false"
                                            transition="scale-transition" offset-y min-width="auto">
                                            <template v-slot:activator="{ on, attrs }">
                                                <v-text-field v-model="userSettings.dob" label="Birthday date"
                                                    append-icon="mdi-calendar" readonly v-bind="attrs"
                                                    v-on="on"></v-text-field>
                                            </template>
                                            <v-date-picker v-model="userSettings.dob"
                                                :active-picker.sync="activeDobSelector"
                                                :max="minDate"
                                                min="1950-01-01"></v-date-picker>
                                        </v-menu>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.sexuality" :items="sexualities"
                                            label="Sexuality"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.sexualActivity" :items="sexualActivity"
                                            label="Sexual Activity"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.lookingFor" :items="lookingFor"
                                            label="Looking for"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.country" :items="countries"
                                            label="Country"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.city" :items="cities" label="City"></v-select>
                                    </v-col>
                                </v-list-item-content>
                            </v-list-item>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item-title>Body features</v-list-item-title>
                                    <v-col cols="12">
                                        <v-text-field v-model="userSettings.height"
                                            label="Height (in  cm)"></v-text-field>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-text-field v-model="userSettings.weight"
                                            label="Weight (in kg)"></v-text-field>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.hair" :items="hairs" label="Hair"></v-select>
                                    </v-col>
                                    <v-col cols="12" v-if="userSettings.gender == 'male'">
                                        <v-select v-model="userSettings.facialHair" :items="facialHairs"
                                            label="Facial hair"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.pubicHair" :items="pubicHairs"
                                            label="Pubic hair"></v-select>
                                    </v-col>
                                    <v-col cols="12" v-if="userSettings.gender == 'male'">
                                        <v-select v-model="userSettings.bodyHair" :items="bodyHairs"
                                            label="Body hair"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.hairColor" :items="hairColors"
                                            label="Hair color"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.tattoo" multiple :items="tattoos"
                                            label="Tattoos"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.piercing" multiple :items="piercings"
                                            label="Piercings"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.eyeColor" :items="eyeColors"
                                            label="Eye color"></v-select>
                                    </v-col>
                                    <v-col cols="12" v-if="userSettings.gender == 'female'">
                                        <v-select v-model="userSettings.breastSize" :items="breastSizes"
                                            label="Breast size"></v-select>
                                    </v-col>
                                    <v-col cols="12" v-if="userSettings.gender == 'male'">
                                        <v-text-field v-model="userSettings.penisSize"
                                            label="Penis size (in cm)"></v-text-field>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.abs" :items="abs" label="Abs"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.bottomSizes" :items="bottomSizes"
                                            label="Bottom size"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.bodyTypes" :items="bodyTypes"
                                            label="Body type"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.ethnicities" :items="ethnicities"
                                            label="Ethnicity"></v-select>
                                    </v-col>
                                </v-list-item-content>
                            </v-list-item>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item-title>Body and lifestyle</v-list-item-title>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.fitnessLevels" :items="fitnessLevels"
                                            label="Fitness level"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.dietaryPreferences" :items="dietaryPreferences" multiple
                                            label="Dietary preferences"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.healthHabits" :items="healthHabits" multiple
                                            label="Health habits"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.exerciseFrequency" :items="exerciseFrequency"
                                            label="Exercise frequency"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.sleepingHabits" :items="sleepingHabits"
                                            label="Sleeping habits"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.foodAllergies" :items="foodAllergies" multiple
                                            label="Food allergies"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.alcoholConsumptions"
                                            :items="alcoholConsumptions" label="Alcohol consumption"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.smoking" :items="smoking"
                                            label="Smoking"></v-select>
                                    </v-col>
                                </v-list-item-content>
                            </v-list-item>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item-title>Financial</v-list-item-title>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.jobs" :items="jobs" label="Job"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-text-field v-model="userSettings.netWorth" label="Net worth (in euros)"></v-text-field>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-text-field v-model="userSettings.yearlySalary"
                                            label="Yearly salary (in euros)"></v-text-field>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.mainLiving" :items="mainLiving"
                                            label="Main living"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.financialGoals" :items="financialGoals"
                                            label="Financial goals"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.spendingHabits" :items="spendingHabits"
                                            label="Spending habits"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.financialIndependence"
                                            :items="financialIndependence" label="Financial Independence"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.inDebt" :items="yesNo"
                                            label="In debt"></v-select>
                                    </v-col>
                                </v-list-item-content>
                            </v-list-item>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item-title>Personal</v-list-item-title>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.hasKids" :items="yesNo"
                                            label="Has kid(s)"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.wantKids" :items="yesNo"
                                            label="Want kid(s)"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.fetishes" :items="fetishes" multiple
                                            label="Fetishes"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.personalities" :items="personalities" multiple
                                            label="Personality"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.hobbiesAndActivities"
                                            :items="hobbiesAndActivities" multiple
                                            label="Hobbies and activities"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.movieGenres" :items="movieGenres" multiple
                                            label="Movie genres"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.bookGenres" :items="bookGenres" multiple
                                            label="Book genres"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.highestGraduation" :items="highestGraduation"
                                            label="Highest education"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.education" :items="education" multiple
                                            label="Education"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.travelPreferences" :items="travelPreferences"
                                            multiple label="Travel preferences"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.religion" :items="religion"
                                            label="Religion"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.languages" :items="languages" multiple
                                            label="Languages"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.currentSituation" :items="currentSituation"
                                            label="Current situation"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-select v-model="userSettings.pets" :items="pets" multiple
                                            label="Pets"></v-select>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-btn color="primary" @click="updateUserSettings">Save</v-btn>
                                    </v-col>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list>
                    </v-col>
                </v-card>
            </v-dialog>
        </v-row>


        <!-- Chat dialog-->
        <v-dialog v-model="chatDialog" fullscreen transition="dialog-bottom-transition">
    <v-card ref="chatContainer" class="chat-container">
      <v-toolbar dark color="primary" class="fixedToolbar">
        <v-toolbar-title>Chat</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon dark @click="chatDialog = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-toolbar>

      <v-card-text>
        <div class="chat-messages">
          <div v-for="(message, index) in messages" :key="index" class="chat-message" :class="{ 'outgoing': message.sender === 'me', 'incoming': message.sender !== 'me' }">
            <div class="message-header">
              <img :src="imageDomain + message.avatar" class="avatar" alt="Avatar">
              <div class="username" @click="openProfile(message.uid)">{{ message.username }}</div>
            </div>
            <div class="message-content">{{ message.content }}</div>
          </div>
        </div>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions class="chat-actions">
        <v-row>
          <v-col cols="8" md="10">
            <v-textarea hide-details v-model="newMessage" dense rows="2" label="Type your message" outlined></v-textarea>
          </v-col>
          <v-col cols="4" md="2" class="sendButton">
            <v-btn color="primary" @click="sendMessage()">Send</v-btn>
          </v-col>
        </v-row>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog v-model="noSubscription" persistent v-if="!paidStatus" max-width="380">
    <v-card>
        <v-card-title class="text-h5">
          No active subscription
        </v-card-title>
        <v-card-text>You do not have an active subscription. Add a subscription and click on check payment to check your subscription.</v-card-text>
        <div v-if="!newPayment">
            <v-col><p class="text-center pa-0">Waiting for payment</p></v-col>
            <v-col class="d-flex d-flex pt-0 justify-center"><v-progress-circular indeterminate size="20" color="blue lighten-1" class="center"></v-progress-circular></v-col>
        </div>
            <v-divider></v-divider>
        <v-card-actions>
            <v-btn text small color="red darken-1" @click="logout()">Logout</v-btn>
            <v-spacer></v-spacer>
            <a href="https://buy.stripe.com/00g00Z3XY2hFckU146?locale=en" target="_blank">
                <v-btn text small color="green darken-1">Add subscription</v-btn>
            </a>
        </v-card-actions>
    </v-card>
  </v-dialog>


    </div>
</template>

<script>
import axios from 'axios';
import loginHeader from '@/components/loginHeader.vue'
import router from '@/router';
export default {
    metaInfo: {
    title: 'Stella Amor | Home',
    meta: [
      // Basic meta tags
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
    ],
    link: [
      // Link tags
      { rel: 'canonical', href: 'https://stellaamor.com/home' },
      { rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }
    ]
  },
    name: 'appHome',
    components: {
        loginHeader,
    },
    data() {
        return {
            unreadMessages: false,
            originalData: null,
            imageDomain: '',
            profile_dialog: false,
            settingsDialog: false,
            myProfileDialog: false,
            profileSettings: false,
            APIEndPoint: '',
            filterDrawer: false,
            sexualActivity: [],
            sexualities: [],
            lookingFor: [],
            hairs: [],
            hairColors: [],
            facialHairs: [],
            pubicHairs: [],
            bodyHairs: [],
            tattoos: [],
            piercings: [],
            eyeColors: [],
            breastSizes: [],
            abs: [],
            bottomSizes: [],
            bodyTypes: [],
            ethnicities: [],
            fitnessLevels: [],
            dietaryPreferences: [],
            healthHabits: [],
            exerciseFrequency: [],
            sleepingHabits: [],
            foodAllergies: [],
            alcoholConsumptions: [],
            smoking: [],
            jobs: [],
            mainLiving: [],
            financialGoals: [],
            spendingHabits: [],
            financialIndependence: [],
            fetishes: [],
            personalities: [],
            hobbiesAndActivities: [],
            movieGenres: [],
            bookGenres: [],
            highestGraduation: [],
            education: [],
            travelPreferences: [],
            communicationPreferences: [],
            religion: [],
            languages: [],
            currentSituation: [],
            pets: [],
            countries: [],
            cities: [],
            searching: false,
            countryList: null,
            mainMenus: {
                general: false,
                body: false,
                lifestyle: false,
                financial: false,
                personal: false,
            },
            submenus: {
                gender: false,
                height: false,
                country: false,
                age: false,
                lookingFor: false,
                city: false,
                weight: false,
                sexuality: false,
                hair: false,
                facialHair: false,
                pubicHair: false,
                bodyHair: false,
                hairColor: false,
                tattoo: false,
                piercing: false,
                eyeColor: false,
                breastSize: false,
                penisSize: false,
                abs: false,
                bottomSize: false,
                bodyType: false,
                ethnicitie: false,
                fitnessLevel: false,
                dietaryPreference: false,
                healthHabit: false,
                exerciseFrequency: false,
                sleepingHabit: false,
                foodAllergie: false,
                alcoholConsumption: false,
                smoking: false,
                job: false,
                netWorth: false,
                yearlySalary: false,
                mainLiving: false,
                financialGoals: false,
                spendingHabits: false,
                financialIndependence: false,
                inDebt: false,
                hasKids: false,
                wantKids: false,
                fetishes: false,
                personalities: false,
                hobbiesAndActivities: false,
                movieGenres: false,
                bookGenres: false,
                highestGraduation: false,
                education: false,
                travelPreferences: false,
                communicationPreferences: false,
                religion: false,
                languages: false,
                currentSituation: false,
                pets: false,
                sexualActivity: false,
            },
            filter: {
                gender: null,
                sexualActivity: [],
                minAge: 18,
                maxAge: 99,
                sexuality: [],
                lookingFor: [],
                country: null,
                city: null,
                minHeight: null,
                maxHeight: null,
                minWeight: null,
                maxWeight: null,
                hair: [],
                facialHair: [],
                pubicHair: [],
                bodyHair: [],
                hairColor: [],
                tattoo: [],
                piercing: [],
                eyeColor: [],
                breastSize: [],
                minPenisSize: null,
                maxPenisSize: null,
                abs: [],
                bottomSizes: [],
                bodyTypes: [],
                ethnicities: [],
                fitnessLevels: [],
                dietaryPreferences: [],
                healthHabits: [],
                exerciseFrequency: [],
                sleepingHabits: [],
                foodAllergies: [],
                alcoholConsumptions: [],
                smoking: [],
                jobs: [],
                minNetWorth: null,
                maxNetWorth: null,
                minYearlySalary: null,
                maxYearlySalary: null,
                mainLiving: [],
                financialGoals: [],
                spendingHabits: [],
                financialIndependence: [],
                inDebt: null,
                hasKids: null,
                wantKids: null,
                fetishes: [],
                personalities: [],
                hobbiesAndActivities: [],
                movieGenres: [],
                bookGenres: [],
                highestGraduation: [],
                education: [],
                travelPreferences: [],
                religion: [],
                languages: [],
                currentSituation: [],
                pets: [],
            },
            user: {
                username: '',
                avatar: '',
                age: '',
                bio: '',
                banner: '',
                gender: '',
                country: '',
                city: '',
                sexuality: '',
                userData: null,
                userGallery: [],
            },
            selectedUser: {
                username: '',
                avatar: '',
                age: '',
                bio: '',
                banner: '',
                gender: '',
                country: '',
                city: '',
                sexuality: '',
                userData: null,
                userGallery: [],
            },
            userSettings: {
                gender: null,
                dob: null,
                sexuality: null,
                sexualActivity: null,
                lookingFor: null,
                country: null,
                city: null,
                height: null,
                weight: null,
                hair: null,
                facialHair: null,
                pubicHair: null,
                bodyHair: null,
                hairColor: null,
                tattoo: [],
                piercing: [],
                eyeColor: null,
                breastSize: null,
                penisSize: null,
                abs: null,
                bottomSizes: null,
                bodyTypes: null,
                ethnicities: null,
                fitnessLevels: null,
                dietaryPreferences: [],
                healthHabits: [],
                exerciseFrequency: null,
                sleepingHabits: null,
                foodAllergies: [],
                alcoholConsumptions: null,
                smoking: null,
                jobs: null,
                netWorth: null,
                yearlySalary: null,
                mainLiving: null,
                financialGoals: null,
                spendingHabits: null,
                financialIndependence: null,
                inDebt: null,
                hasKids: null,
                wantKids: null,
                fetishes: [],
                personalities: [],
                hobbiesAndActivities: [],
                movieGenres: [],
                bookGenres: [],
                highestGraduation: null,
                education: null,
                travelPreferences: [],
                religion: null,
                languages: [],
                currentSituation: null,
                pets: [],
            },
            genders: [
                { text: 'Male', value: 'male' },
                { text: 'Female', value: 'female' },
                { text: 'Other', value: 'other' },
            ],
            yesNo: [
                { text: 'Yes', value: 'yes' },
                { text: 'No', value: 'no' }
            ],
            dobSelector: false,
            activeDobSelector: null,
            filterUsers: [],
            publicProfileSettings: {
                avatar: null,
                banner: null,
                bio: '',
                username: '',
            },
            newGalleryImage: null,
            selectedUserLightbox: false,
            selectedUserGalleryIndex: 0,
            userLightbox: false,
            userGalleryIndex: 0,
            removeImageDialogPrompt: false,
            imageForRemoval: null,
            chatDialog: false,
            messages: [],
            newMessage: "",
            messager: null,
            conversationsDialog: false,
            conversations: [],
            passwords: {
                current_password: '',
                newPassword: '',
                confirmPassword: '',
                error: null,
                saving: false,
                success: false,
            },
            adminMessage: null,
            paidStatus: false,
            noSubscription: false,
            newPayment: false,
        }
    },
    methods: {
        async logout() {
            const response = await axios.get(this.APIEndPoint + 'users.php?logout=true', { withCredentials: true });
            localStorage.clear();
            sessionStorage.clear();
            window.location = 'https://stellaamor.com/signin';
            window.location.reload();
        },
        isPaid() {
            let postData = {
                action: 'isPaid'
            };

            axios.post(this.APIEndPoint + 'users.php', postData, {withCredentials: true}).then(response => {
                let message = response.data;
                this.paidStatus = message.status;
                if (this.paidStatus === false) {
                    this.noSubscription = true;
                    this.checkPaidStatusInterval = setInterval(this.checkPaidStatus.bind(this), 10000);
                }
            });
        },

        checkPaidStatus() {
            let postData = {
                action: 'isPaid'
            };

            axios.post(this.APIEndPoint + 'users.php', postData, {withCredentials: true}).then(response => {
                let message = response.data;
                if (message.status !== this.paidStatus) {
                    clearInterval(this.checkPaidStatusInterval);
                    this.paidStatus = message.status;
                    if (this.paidStatus === true) {
                        this.newPayment = true;
                        this.initSearch();
                        setTimeout(() => {
                            this.noSubscription = false;
                        }, 2000);
                    } else {
                        this.checkPaidStatusInterval = setInterval(this.checkPaidStatus.bind(this), 10000);
                    }
                }
            });
        },
        getAdminMessage(){
            let postData = {
                action: 'getAdminMessage'
            };

            axios.post(this.APIEndPoint + 'core.php', postData, {withCredentials: true}).then(response =>{
                let message = response.data;
                // console.log(response.data);
                if(message && message.length){
                    this.adminMessage = message;
                }else{
                    this.adminMessage = null;
                }
            })
            
        },
        updatePassword(){
            if(this.passwords.newPassword && this.passwords.newPassword.length < 5){
                this.passwords.error = 'Too short password'
            }
            else if(!this.passwords.newPassword.length){
                this.passwords.error = 'Too short password'
            }else if(!this.passwords.current_password.length){
                this.passwords.error = 'Too short password'
            }
            else if(this.passwords.newPassword != this.passwords.confirmPassword){
                this.passwords.error = 'Passwords does not match'
            }else{
                this.passwords.error = null;
            }

            if(!this.passwords.error){
                this.passwords.saving = true;
            }

            let _this = this;
                let postData = {
                    action: 'updatePassword',
                    currPass: this.passwords.current_password,
                    newPass: this.passwords.newPassword,
                    confPass: this.passwords.confirmPassword
                };
                axios.post(this.APIEndPoint + 'users.php', postData, { withCredentials: true })
                    .then(response => {
                        let resp = response.data;
                        if(resp && resp.status && resp.status == 'error'){
                            _this.passwords.error = resp.message;
                            _this.passwords.saving = false;
                        }else{
                            _this.passwords.current_password = '';
                            _this.passwords.newPassword = '';
                            _this.passwords.confirmPassword = '';
                            _this.passwords.error = null;
                            _this.passwords.saving = false;
                            _this.passwords.success = true;

                            setTimeout(()=>{
                                _this.passwords.success = false;
                            }, 2000);
                        }
                    });
        },
        initSearch(){
            let _this = this
            if(_this.user && _this.user.userData && _this.user.userData.gender && _this.user.userData.gender == 'male'){
                _this.filter.gender = 'female';
            }else if(_this.user && _this.user.userData && _this.user.userData.gender && _this.user.userData.gender == 'female'){
                _this.filter.gender = 'male';
            }else{
                _this.filter.gender = null;
            }
            // if(_this.user && _this.user.userData &&  _this.user.userData.country){
            //     _this.filter.country = _this.user.userData.country
            // }
            this.search();
        },
        openConversations(){
            let _this = this;
                this.conversations = [];
                let postData = {
                    action: 'getConversations',
                };
                axios.post(this.APIEndPoint + 'users.php', postData, { withCredentials: true })
                    .then(response => {
                        let conversations = response.data;
                        // console.log(conversations);
                        if(conversations && conversations.length){
                            _this.conversations = conversations;
                        }
                    });
            this.conversationsDialog =  true;
        },
        clearFilter(){
            let filter = {
                gender: null,
                sexualActivity: [],
                minAge: 18,
                maxAge: 99,
                sexuality: [],
                lookingFor: [],
                country: null,
                city: null,
                minHeight: null,
                maxHeight: null,
                minWeight: null,
                maxWeight: null,
                hair: [],
                facialHair: [],
                pubicHair: [],
                bodyHair: [],
                hairColor: [],
                tattoo: [],
                piercing: [],
                eyeColor: [],
                breastSize: [],
                minPenisSize: null,
                maxPenisSize: null,
                abs: [],
                bottomSizes: [],
                bodyTypes: [],
                ethnicities: [],
                fitnessLevels: [],
                dietaryPreferences: [],
                healthHabits: [],
                exerciseFrequency: [],
                sleepingHabits: [],
                foodAllergies: [],
                alcoholConsumptions: [],
                smoking: [],
                jobs: [],
                minNetWorth: null,
                maxNetWorth: null,
                minYearlySalary: null,
                maxYearlySalary: null,
                mainLiving: [],
                financialGoals: [],
                spendingHabits: [],
                financialIndependence: [],
                inDebt: null,
                hasKids: null,
                wantKids: null,
                fetishes: [],
                personalities: [],
                hobbiesAndActivities: [],
                movieGenres: [],
                bookGenres: [],
                highestGraduation: [],
                education: [],
                travelPreferences: [],
                religion: [],
                languages: [],
                currentSituation: [],
                pets: [],            };
            this.filter = filter;
        },
        closeChat(){
            this.chatDialog = false;
            this.messages = [];
            this.newMessage = "";
            this.messager = null;
        },
        sendMessage(){
            let _this = this;
            let postData = {
                action: 'sendMessage',
                user_id: this.messager,
                newMessage: this.newMessage
            };
            axios.post(this.APIEndPoint + 'users.php', postData, { withCredentials: true })
                .then(response => {
                    let msg = response.data;
                    if(msg && msg.length){
                        _this.messages = msg;
                    }
                });
            this.$nextTick(() => {
                this.scrollToBottom();
            });
            _this.newMessage = '';
        },
        messageUser(selUsr){
           let _this = this;
           this.messager = selUsr;
           this.conversationsDialog = false;
            this.messages = [];
            let postData = {
                action: 'getMessages',
                user_id: selUsr
            };
            axios.post(this.APIEndPoint + 'users.php', postData, { withCredentials: true })
                .then(response => {
                    let msg = response.data;
                    if(msg && msg.length){
                        _this.messages = msg;
                    }
                });
            this.chatDialog = true;
            this.$nextTick(() => {
                this.scrollToBottom();
            });
            this.checkUnread();
        },
        scrollToBottom() {
            this.$nextTick(() => {
                setTimeout(() => {
                    const chatContainer = this.$refs.chatContainer.$el;
                    if (chatContainer) {
                        const textarea = chatContainer.querySelector('textarea');
                        if (textarea) {
                            textarea.scrollIntoView({ behavior: 'auto', block: 'start' });
                        }
                    }
                }, 100); // Adjust the delay as needed
            });
        },

        dialogRemoveImage(name){
            this.imageForRemoval = name;
            this.removeImageDialogPrompt = true;
        },
        deleteImage(name){
            var postData = {
                image: this.imageForRemoval,
                action: 'deleteImage'
            }
            axios.post(this.APIEndPoint + 'users.php', postData, { withCredentials: true })
                .then(response => {
                });
            this.imageForRemoval = null;
            this.removeImageDialogPrompt = false;
            this.userLightbox = false;
            this.initUser();
        },
        closeRemoveImage(){
            this.imageForRemoval = null;
            this.removeImageDialogPrompt = false;
        },
        prevUserImage() {
            if (this.user.userGallery.length === 0) return;

            if (this.userGalleryIndex === 0) {
                this.userGalleryIndex = this.user.userGallery.length - 1;
            } else {
                this.userGalleryIndex--;
            }
        },
        nextUserImage() {
            if (this.user.userGallery.length === 0) return;

            if (this.userGalleryIndex === this.user.userGallery.length - 1) {
                this.userGalleryIndex = 0;
            } else {
                this.userGalleryIndex++;
            }
        },
        prevSelectedUserImage() {
            if (this.selectedUser.userGallery.length === 0) return;

            if (this.selectedUserGalleryIndex === 0) {
                this.selectedUserGalleryIndex = this.selectedUser.userGallery.length - 1;
            } else {
                this.selectedUserGalleryIndex--;
            }
        },
        nextSelectedUserImage() {
            if (this.selectedUser.userGallery.length === 0) return;

            if (this.selectedUserGalleryIndex === this.selectedUser.userGallery.length - 1) {
                this.selectedUserGalleryIndex = 0;
            } else {
                this.selectedUserGalleryIndex++;
            }
        },
        getTotalImages() {
            return this.user.userGallery.length;
        },
        openUserLightbox(index){
            this.userGalleryIndex = index;
            this.userLightbox = true;
        },
        openSelectedUserLightbox(index){
            this.selectedUserGalleryIndex = index;
            this.selectedUserLightbox = true;
        },
        formatOutput(usrStr){
            if (!usrStr) return '';
            const formattedStr = usrStr.split(',')
            .map(word => word.trim().charAt(0).toUpperCase() + word.trim().slice(1))
            .join(', ');
      
            return formattedStr;
        },
        thousandSeparator(usrNum) {
            if (isNaN(usrNum)) return '';
            return usrNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
        },
        async initUser(){
            var _this = this;
                    _this.user.username = '';
                    _this.user.bio = '';
                    _this.user.avatar = '';
                    _this.user.banner = '';
                    _this.user.country = '';
                    _this.user.gender = '';
                    _this.user.age = '';
                    _this.user.sexuality = '';
                    _this.user.city = '';
                    _this.user.userData = [];
                    _this.user.userGallery = [];
                    _this.publicProfileSettings.bio = '';
            try {
                var postData = {
                action: 'userInit'
                }
                const response = await axios.post(this.APIEndPoint + 'users.php', postData, {withCredentials: true});
                var userData = response.data;
                if(userData.status == "Success"){
                    _this.user.username = userData.username;
                    _this.user.bio = userData.bio;
                    _this.user.avatar = userData.avatar;
                    _this.user.banner = userData.banner;
                    _this.user.country = userData.country;
                    _this.user.gender = userData.gender;
                    _this.user.age = userData.age;
                    _this.user.sexuality = userData.sexuality;
                    _this.user.city = userData.city;
                    _this.user.userData = userData.userData;
                    _this.user.userGallery = userData.userGallery;
                    _this.publicProfileSettings.bio = userData.bio;
                }

            }catch(error){
                console.log('An error occured');
            }
        },
        calculateAge: function (dob) {
            const dobDate = new Date(dob);
            const now = new Date();
            let age = now.getFullYear() - dobDate.getFullYear();
                        const monthDiff = now.getMonth() - dobDate.getMonth();
            if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dobDate.getDate())) {
                age--;
            }
            
            return age;
        },

        async updateProfileSettings() {
            try {
                const postData = new FormData();
                postData.append('avatar', this.publicProfileSettings.avatar);
                postData.append('banner', this.publicProfileSettings.banner);
                postData.append('bio', this.publicProfileSettings.bio);
                postData.append('action', 'updatePublicProfile');
                const response = await axios.post(this.APIEndPoint + 'users.php', postData, {withCredentials: true});
                this.profileSettings = false;
                this.myProfileDialog = true;

                this.initUser();
            } catch (error) {
                console.log('Error');
            }
        },
        async uploadImage() {
            try {
                const postData = new FormData();
                postData.append('image', this.newGalleryImage);
                postData.append('action', 'uploadGalleryImage');
                const response = await axios.post(this.APIEndPoint + 'users.php', postData, {withCredentials: true});
                this.user.userGallery = [];
                this.newGalleryImage = null;
                this.$refs.galleryImageInput.reset();
                this.initUser();
            } catch (error) {
                console.log('Error with upload image');
            }
        },
        uploadAvatar(event) {
            this.publicProfileSettings.avatar = event;
        },
        uploadBanner(event) {
            this.publicProfileSettings.banner = event;
        },
        uploadGalleryImage(event) {
            this.newGalleryImage = event;
        },
        updateUserSettings() {
            var postData = {
                settings: this.userSettings,
                action: 'updateUserSettings'
            }
            axios.post(this.APIEndPoint + 'users.php', postData, { withCredentials: true })
                .then(response => {
                    // console.log(response);
                });
            this.searching = false;
            this.profileSettings = false;
            this.myProfileDialog = true;
            this.initUser();
        },
        editProfile() {
            this.profileSettings = !this.profileSettings;
            this.myProfileDialog = false;
        },
        openMyProfile() {
            this.myProfileDialog = !this.myProfileDialoag;
        },
        openUserSettings() {
            this.settingsDialog = !this.settingsDialog;
        },
        async openProfile(index) {
            var _this = this;
            try {
                var postData = {
                    userId: index,
                    action: 'getUser'
                }
                const response = await axios.post(this.APIEndPoint + 'users.php', postData, {withCredentials: true});
                var userData = response.data;
                if(userData.status == "Success"){
                    _this.selectedUser.id = userData.id;
                    _this.selectedUser.username = userData.username;
                    _this.selectedUser.bio = userData.bio;
                    _this.selectedUser.avatar = userData.avatar;
                    _this.selectedUser.banner = userData.banner;
                    _this.selectedUser.country = userData.country;
                    _this.selectedUser.gender = userData.gender;
                    _this.selectedUser.age = userData.age;
                    _this.selectedUser.sexuality = userData.sexuality;
                    _this.selectedUser.city = userData.city;
                    _this.selectedUser.userData = userData.userData;
                    _this.selectedUser.userGallery = userData.userGallery;
                    _this.publicProfileSettings.bio = userData.bio;
                }

            }catch(error){
                console.log('An error occured');
            }
            this.closeChat();
            this.profile_dialog = true;
        },
        unsetFilter(item, filterType) {
            var val;
            if (filterType === 'array') {
                val = []
            } else {
                val = null
            }

            this.filter[item] = val;
        },
        unsetDualFilter(item, item2, filterType) {
            var val;
            if (filterType === 'array') {
                val = []
            } else {
                val = null
            }

            this.filter[item] = val;
            this.filter[item2] = val;
        },
        unsetHeight(){
            this.submenus.height = false;
            this.$set(this.filter, 'minHeight', null);
            this.$set(this.filter, 'maxHeight', null);
        },
        unsetWeight(){
            this.submenus.weight = false;
            this.$set(this.filter, 'minWeight', null);
            this.$set(this.filter, 'maxWeight', null);
        },
        unsetPenisSize(){
            this.submenus.penisSize = false;
            this.$set(this.filter, 'minPenisSize', null);
            this.$set(this.filter, 'maxPenisSize', null);
        },
        unsetNetWorth(){
            this.submenus.netWorth = false;
            this.$set(this.filter, 'minNetWorth', null);
            this.$set(this.filter, 'maxNetWorth', null);
        },
        unsetYearlySalary(){
            this.submenus.yearlySalary = false;
            this.$set(this.filter, 'minYearlySalary', null);
            this.$set(this.filter, 'maxYearlySalary', null);
        },
        search() {
            this.filterDrawer = false;
            var _this = this;
            this.searching = true;
            var searchData = {
                filter: this.filter,
                action: 'search'
            };

            axios.post(this.APIEndPoint + 'filter.php', searchData, { withCredentials: true })
                .then(response => {
                    _this.filterUsers = [];
                    let users = response.data;
                    if (Array.isArray(users)) {
                        users.forEach((user) =>{
                            let filterUser = {
                                id: user.id,
                                username: user.username,
                                bio: user.bio,
                                avatar: user.avatar,
                                age: user.age,
                                country: user.country,
                                gender: user.gender,
                                sexuality: user.sexuality
                            };
                            _this.filterUsers.push(filterUser);
                        });
                    } else {
                        console.error('Invalid response');
                    }
                    // console.log(this.filterUsers);
                    this.searching = false;
                })
                .catch(error => {
                    console.error('Error fetching users:', error);
                    this.searching = false;
                });
        },
        checkUnread(){
            let _this = this;
            let postData = {
                action: 'unread'
            }
            axios.post(this.APIEndPoint + 'users.php', postData, {withCredentials: true})
            .then(response =>{
                _this.unreadMessages = response.data.status;
            })
            .catch(error =>{
                console.log('Something went wrong');
            })
        },
        formatNumber(number) {
            if(number){
                return number.toLocaleString();
            }
        },
        toggleSubmenu(item) {
            this.submenus[item] = !this.submenus[item];
        },
        toggleMenu(item) {
            this.mainMenus[item] = !this.mainMenus[item];
        },
        async loadCountriesAndCities() {
            try {
                const response = await axios.get(this.APIEndPoint + 'filter.php?countries=true');
                this.countryList = response.data;
                const countryNames = Object.keys(response.data);
                this.countries = countryNames;
            } catch (error) {
                // console.error('Error loading countries and cities:');
            }
        },
        async loadFilterItems() {
            try {
                const response = await axios.get(this.APIEndPoint + 'filter.php?allowedFilter=true');
                var filter = response.data;
                this.sexualities = filter.sexualities;
                this.sexualActivity = filter.sexualActivity;
                this.lookingFor = filter.lookingFor;
                this.hairs = filter.hairs;
                this.hairColors = filter.hairColors;
                this.facialHairs = filter.facialHairs;
                this.pubicHairs = filter.pubicHairs;
                this.bodyHairs = filter.bodyHairs;
                this.tattoos = filter.tattoos;
                this.piercings = filter.piercings;
                this.eyeColors = filter.eyeColors;
                this.breastSizes = filter.breastSizes;
                this.abs = filter.abs;
                this.bottomSizes = filter.bottomSizes;
                this.bodyTypes = filter.bodyTypes;
                this.ethnicities = filter.ethnicities;
                this.fitnessLevels = filter.fitnessLevels;
                this.dietaryPreferences = filter.dietaryPreferences;
                this.healthHabits = filter.healthHabits;
                this.exerciseFrequency = filter.exerciseFrequency;
                this.sleepingHabits = filter.sleepingHabits;
                this.foodAllergies = filter.foodAllergies;
                this.alcoholConsumptions = filter.alcoholConsumptions;
                this.smoking = filter.smoking;
                this.jobs = filter.jobs;
                this.mainLiving = filter.mainLiving;
                this.financialGoals = filter.financialGoals;
                this.spendingHabits = filter.spendingHabits;
                this.financialIndependence = filter.financialIndependence;
                this.fetishes = filter.fetishes;
                this.personalities = filter.personalities;
                this.hobbiesAndActivities = filter.hobbiesAndActivities;
                this.movieGenres = filter.movieGenres;
                this.bookGenres = filter.bookGenres;
                this.highestGraduation = filter.highestGraduation;
                this.education = filter.education;
                this.travelPreferences = filter.travelPreferences;
                this.communicationPreferences = filter.communicationPreferences;
                this.religion = filter.religion;
                this.languages = filter.languages;
                this.currentSituation = filter.currentSituation;
                this.pets = filter.pets;
            } catch (error) {
                console.log('Error');
            }
        },
        async loadUserSettings() {
                try {
                    const response = await axios.get(this.APIEndPoint + 'users.php?getUserSettings=true', { withCredentials: true });
                    const apiSettings = response.data;
                    for (const key in apiSettings) {
                        if (Object.hasOwnProperty.call(apiSettings, key) && apiSettings[key] !== null && apiSettings[key] !== undefined) {
                            if (Array.isArray(this.userSettings[key])) {
                                const values = apiSettings[key].split(',').map(value => value.trim());
                                this.userSettings[key].push(...values);
                            } else {
                                this.$set(this.userSettings, key, apiSettings[key]);
                            }
                        }
                    }
                    this.updateCities(this.userSettings.country);
                } catch (error) {
                    console.error('Error fetching user settings:', error);
                }
            },

        async isAuth() {
            const response = await axios.get(this.APIEndPoint + 'users.php?isAuth=true', { withCredentials: true });
            let status = response.data.status;

            if(status === false){
                window.location = 'https://stellaamor.com/signin'
            }else{
                this.authenthicated = true;
            }
        },

        updateCities(newCountry) {
            if(this.countryList){
                if (this.countryList[newCountry]) {
                this.cities = this.countryList[newCountry];
                } else {
                this.cities = [];
                }
            }
        },
        resetData() {
            Object.assign(this.$data, JSON.parse(JSON.stringify(this.originalData)));
        },
        async initComponent() {
            await this.isAuth();
            await this.isPaid();
            this.originalData = JSON.parse(JSON.stringify(this.$data));
            this.resetData();
            await this.loadCountriesAndCities();
            await this.loadFilterItems();
            await this.initUser();
            this.loadUserSettings();
            this.checkUnread();
            this.getAdminMessage();

            // Clear existing intervals to prevent duplicates
            clearInterval(this.isAuthInterval);
            clearInterval(this.checkUnreadInterval);

            // Set intervals
            this.isAuthInterval = setInterval(() => {
                this.isAuth();
            }, 5 * 60 * 1000);

            this.checkUnreadInterval = setInterval(() => {
                this.checkUnread();
            }, 5 * 60 * 1000);

            this.initSearch();
        },
    },
    computed: {
        minDate() {
            const today = new Date();
            const minDate = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate());
            return minDate.toISOString().substring(0, 10);
        },
        displayMinHeight() {
            const centimeters = this.filter.minHeight;
            const feet = Math.floor(centimeters / 30.48);
            const inches = Math.round((centimeters % 30.48) / 2.54);
            return `${feet}'${inches}"`;
        },
        displayMaxHeight() {
            const centimeters = this.filter.maxHeight;
            const feet = Math.floor(centimeters / 30.48);
            const inches = Math.round((centimeters % 30.48) / 2.54);
            return `${feet}'${inches}"`;
        },
        displayMinWeight() {
            const kg = this.filter.minWeight;
            const pounds = Math.round(kg * 2.20462);
            return `${pounds} lbs`;
        },
        displayMaxWeight() {
            const kg = this.filter.maxWeight;
            const pounds = Math.round(kg * 2.20462);
            return `${pounds} lbs`;
        },
        displayMinPenisSize() {
            const centimeters = this.filter.minPenisSize;
            const inches = Math.round(centimeters / 2.54);
            return `${inches}"`;
        },
        displayMaxPenisSize() {
            const centimeters = this.filter.maxPenisSize;
            const inches = Math.round(centimeters / 2.54);
            return `${inches}"`;
        },
    },
    async mounted() {
        await this.initComponent();
    },
    created() {
        this.APIEndPoint = this.$hostname;
        this.imageDomain = this.$imageDomain;

    },
    watch: {
        'filter.country': function (newCountry) {
            if (this.countryList[newCountry]) {
                this.cities = this.countryList[newCountry];
            } else {
                this.cities = [];
            }
        },
        '$route'() {
            this.initComponent();
        },
        'userSettings.country': function (newCountry) {
            if (this.countryList[newCountry]) {
                this.cities = this.countryList[newCountry];
            } else {
                this.cities = [];
            }
        },
    },
}
</script>

<style>
.loadingScreen{
    position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffffc9;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:9;
}
.resetRow {
    justify-content: flex-end;
    padding: 8px;
}

.filterDrawer {
    background-color: #fff;
    z-index: 9;
    height: calc(100% - 60px);
    padding-top: 50px;
}

.filter-header {
    font-size: 18px;
    font-weight: 300;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-top: 20px;
}

.filter-label {
    font-size: 12px;
    padding-left: 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    display: block;

}

.filter-span {
    color: rgb(116, 116, 116);
    display: block;
    text-wrap: wrap;
}

.filter-titles {
    font-size: 14px;
    color: #6d6b6b;
    font-weight: 400;
    padding-bottom: 5px;
}

.list-actions {
    position: fixed;
    height: 60px;
    bottom: 0;
    width: 100%;
    padding: 0px 15px;
    background: #fff;
}

.filter {
    padding-bottom: 70px;
}

.v-input--selection-controls .v-input__slot>.v-label {
    font-size: 12px;
}

.v-list-item--dense,
.v-list--dense .v-l {
    min-height: 30px;
}

.user-age {
    padding-left: 5px;
    font-size: 14px;
    color: #999;
}

.user-info {
    color: #666;
}

.user-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.banner {
    background-size: cover;
    background-position: center;
    height: 350px;
    background-color:#f7f7f7;
}

.profile-card {
    margin-top: -100px;
    /* Adjust as needed */
}

.avatar {}

.user-info {
    text-align: center;
    padding: 20px;
}

.user-info h2 {
    margin-bottom: 10px;
}

.user-info p {
    margin: 0;
}
.lightbox-arrow {
  position: absolute;
  top: 50%;
  width:36px!important;
  height:36px!important;
  transform: translateY(-50%);
  color: white!important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-radius: 50%!important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)!important;
  min-width: unset !important;
}
.lightbox-arrow.left {
  left: 10px;
}
.lightbox-arrow.right {
  right: 10px;
}

.removeImage{
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 5px !important;
    width: 18px !important;
    height: 18px !important;
    color: #e5e5e5 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    min-width: unset !important;
}
.removeImage2{
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px !important;
    width: 30px !important;
    height: 30px !important;
    color: #e5e5e5 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    min-width: unset !important;
}

.unreadMessages{
    color:#1976d2 !important;
}
.equal-height-row {
    display: flex;
    flex-wrap: wrap;
}

.equal-height-card {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
</style>

<style lang="scss">
.userInfoListClass {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  li {
    width: calc(50% - 20px);
    margin: 10px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: #f0f0f0;
    }

    h4 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #979797;
    }

    p {
        margin-bottom: 5px;
        font-size: 12px;
        color: #919191;
        line-height: 1.4;
    }
  }

  @media (max-width: 768px) {
    li {
      width: calc(100% - 20px);
    }
  }
}

</style>

<!-- Chat styling-->
<style scoped>
.fixedToolbar {
  position: fixed;
  top: 0;
  width: 100%;
}

.chat-messages {
  padding-top: 65px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-message {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  width:80%;
}

.message-header {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-weight: bold;
  margin-right: 10px;
  cursor:pointer;
}

.message-content {
  word-wrap: break-word;
}

.outgoing {
  align-self: flex-end;
  background-color: #2196f3;
  color: #fff;

}

.incoming {
  align-self: flex-start;
  background-color: #f5f5f5;
}

.sendButton {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.chat-container{
    display:flex;
    flex-direction:column;
    min-height:100%;
    justify-content:space-between;
}
.conversation-row {
    background-color: #6492f938;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 12px;
    cursor:pointer;
}
.conversationTime{
    font-size: 12px;
    color: #a3a3a3;
    right: 5px;
    position: absolute;
}
.conversationUsername{
    display:inline;
    font-weight:500;
    padding-bottom:5px;
}
.conversation-box{
    position:relative;
}
</style>