<template>
  <div>
    <div
      class="row items-baseline q-mb-md no-wrap"
      style="line-height: 1.4"
    >
      <div style="min-width: 140px">
        <q-breadcrumbs>
          <template #separator>
            <div class="text-primary">/</div>
          </template>

          <q-breadcrumbs-el
            v-for="breadcrumb in $route.meta?.breadcrumbs"
            :key="breadcrumb?.name"
            :label="$t(breadcrumb?.title)"
            :to="{ name: breadcrumb?.name }"
            style="font-size: 12px"
          />
        </q-breadcrumbs>
      </div>

      <span
        v-if="syncExecution.lastSyncExecution"
        class="text-primary text-weight-bold sync-label q-ml-md"
      >
        {{ $t("ui.sync.stays_sync") }}:
        {{ convertDateTime(syncExecution.lastSyncExecution.finished_at) }}
      </span>
    </div>

    <span class="text-h6 text-bold">
      {{ $t($route.meta?.title) }}
    </span>

    <q-separator class="q-my-sm" />
  </div>
</template>

<script setup>
import { convertDateTime } from "src/helpers/utils";
import { syncExecutionStore } from "src/stores/syncExecution";

const syncExecution = syncExecutionStore();
</script>

<style scoped>
.sync-label {
  font-size: 13px;
  white-space: nowrap;
}
</style>
