<script setup>

const props = defineProps(['profile', 'subscription']);

</script>

<template>
  <div class="headerbar">
    <div style="flex-grow: 1;"></div>
    <div v-show="profile.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
      <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
        {{ $t(subscription.plan.id === 'free' ? 'settings.appstoreAccount.subscriptionSetupAction' : 'settings.appstoreAccount.subscriptionReactivateAction') }}
      </span>
    </div>
    <div v-show="!profile.isAtLeastOwner && subscription.plan.id === 'expired'">
      <span class="badge badge-danger">Subscription Expired</span>
    </div>
    <a v-show="profile.isAtLeastAdmin" href="#/notifications">
      <i class="fas fa-bell" v-if="notificationCount"></i>
      <i class="far fa-bell" v-else></i>
      <span v-show="notificationCount">{{ notificationCount === 100 ? '100+' : notificationCount }}</span>
    </a>
    <a v-show="profile.isAtLeastAdmin" href="#/support">
      <i class="fa fa-question fa-fw"></i>
    </a>
    <a href="#/profile">
      <img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}
    </a>
  </div>
</template>

<style scoped>

.headerbar {
  display: flex;
  padding: 10px;
  align-items: center;
  gap: 15px;
}

.headerbar a {
  display: flex;
  align-items: center;
  padding: 6px 15px;
  border-radius: var(--pankow-border-radius);
  color: var(--pankow-text-color);
}

.headerbar a:focus,
.headerbar a:active,
.headerbar a:hover {
  text-decoration: none;
  background-color: var(--pankow-color-background-hover);
}

.headerbar-avatar {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: var(--pankow-border-radius);
}

</style>
