<script setup lang="ts">

</script>

<template>

<v-sheet class="pa-4 d-flex" :elevation="lgAndUp ? 0 : 2" color="black">

<div :class="{ 'px-2': mdAndDown }">

<v-toolbar-title>

<div class="d-flex pt-2" style="width: 260px">

<v-select

variant="outlined"

density="compact"

color="primary"

:disabled="owners.length === 0"

placeholder="Phone Numbers"

:class="{ 'mb-n5': !phonesStore.owner }"

:items="owners"

:model-value="phonesStore.owner"

@update:model-value="onOwnerChanged"

/>

<div style="width: 50px">

<v-progress-circular

v-if="appStore.polling"

indeterminate

:size="20"

:width="1"

class="mt-3 ml-2"

color="success"

/>

</div>

</div>

</v-toolbar-title>

<div v-if="phonesStore.owner" class="d-flex mt-n2">

<p class="text-medium-emphasis mb-n1 mt-0">

{{ phoneCountry(phonesStore.owner) }}

</p>

<v-tooltip v-if="phonesStore.heartbeat" location="end">

<template #activator="{ props: tooltipProps }">

<v-btn

v-bind="tooltipProps"

size="small"

density="compact"

:to="{

color="success"

class="ml-2 mb-0 mt-1"

icon

variant="text"

>

<v-icon

v-if="phonesStore.heartbeat.charging"

size="small"

class="mt-n1"

:icon="mdiBatteryChargingHigh"

/>

<v-icon v-else size="x-small" color="success" :icon="mdiCircle" />

</v-btn>

</template>

<h4 class="font-weight-bold mt-0 mb-0">Last Heartbeat</h4>

{{ humanizeTime(phonesStore.heartbeat.timestamp) }} ago

</v-tooltip>

</div>

</div>

<v-spacer />

<v-menu>

<template #activator="{ props: menuProps }">

<v-btn v-bind="menuProps" icon variant="text" class="mt-2 mr-n3">

<v-icon :icon="mdiDotsVertical" />

</v-btn>

</template>

<v-list

class="pa-0"

:density="mdAndDown ? 'compact' : 'default'"

prepend-gap="20"

>

<v-list-item @click.prevent="toggleArchive">

<template #prepend>

<v-icon

v-if="!threadsStore.archivedThreads"

:icon="mdiPackageDown"

/>

<v-icon v-else :icon="mdiPackageUp" />

</template>

<v-list-item-title>

{{ threadsStore.archivedThreads ? 'Unarchived' : 'Archived' }}

</v-list-item-title>

</v-list-item>

<v-list-item v-if="phonesStore.owner" :to="{ name: 'messages' }">

<template #prepend><v-icon :icon="mdiPlus" /></template>

<v-list-item-title>New Message</v-list-item-title>

</v-list-item>

<v-list-item v-if="phonesStore.owner" :to="{ name: 'bulk-messages' }">

<template #prepend

><v-icon :icon="mdiCommentTextMultipleOutline"

/></template>

<v-list-item-title>Bulk Messages</v-list-item-title>

</v-list-item>

<v-list-item v-if="phonesStore.owner" :to="{ name: 'search-messages' }">

<template #prepend><v-icon :icon="mdiMagnify" /></template>

<v-list-item-title>Search Messages</v-list-item-title>

</v-list-item>

<v-list-item :to="{ name: 'settings' }">

<template #prepend><v-icon :icon="mdiAccountCog" /></template>

<v-list-item-title>Settings</v-list-item-title>

</v-list-item>

<v-list-item :to="{ name: 'phone-api-keys' }">

<template #prepend><v-icon :icon="mdiCellphoneKey" /></template>

<v-list-item-title :class="{ 'pr-16': lgAndUp }"

>Phone API Keys</v-list-item-title

>

</v-list-item>

<v-list-item

v-if="phonesStore.owner"

:href="appStore.appData.appDownloadUrl"

>

<template #prepend><v-icon :icon="mdiDownload" /></template>

<v-list-item-title>Download App</v-list-item-title>

</v-list-item>

<v-list-item :to="{ name: 'billing' }">

<template #prepend><v-icon :icon="mdiFinance" /></template>

<v-list-item-title>Usage & Billing</v-list-item-title>

</v-list-item>

<v-list-item @click.prevent="logout">

<template #prepend><v-icon :icon="mdiLogout" /></template>

<v-list-item-title>Logout</v-list-item-title>

</v-list-item>

</v-list>

</v-menu>

</v-sheet>

</template>