<script setup>
import { useBreadcrumbStore } from '../stores/breadcrumb';
const windowStore = useBreadcrumbStore()
const { __ } = wp.i18n;
</script>

<template>
  <div class="w-full bg-blue-800">
    <div class="  max-w-5xl mx-auto md:py-8 py-5 flex flex-row justify-between items-center">
      <div>
        <h1 class="text-white font-thin  text-xl mb-3">{{__('Respacio Houzez Import', 'respacio-houzez-import')}}</h1>
        <span class="text-white font-medium bg-blue-900 rounded px-2 py-1">{{__('WordPress plugin by Respacio Team', 'respacio-houzez-import')}}</span>
      </div>
      
    </div>
  </div>
  <div class="max-w-5xl mx-auto">
    <div class="py-1   mt-2  rounded  text-lg flex flex-row items-center min-h-[50px]">
    <span class="cursor-pointer" v-on:click="windowStore.activeWindow = 0">{{__('Respacio Houzez Import', 'respacio-houzez-import')}}</span>
    <template v-if="windowStore.activeWindow != 0">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 m-2 inline"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /> </svg>
    </template>
    <template v-if="windowStore.activeWindow == 1"><span class="cursor-pointer font-medium">{{ __('Status', 'respacio-houzez-import') }}</span></template>
    <template v-if="windowStore.activeWindow == 2"><span class="cursor-pointer font-medium">Cron Jobs</span></template>
    <template v-if="windowStore.activeWindow == 3"><span class="cursor-pointer font-medium">{{ __('Export', 'respacio-houzez-import') }}</span></template>
    <template v-if="windowStore.activeWindow == 4"><span class="cursor-pointer font-medium">{{ __('Settings', 'respacio-houzez-import') }}</span></template>
    <template v-if="windowStore.activeWindow == 5"><span class="cursor-pointer font-medium">{{ __('Knowledge Base', 'respacio-houzez-import') }}</span></template>
    
    <template v-if="windowStore.activeWindow == 7"><span class="cursor-pointer font-medium">{{ __('Connect', 'respacio-houzez-import') }}</span></template>
    <template v-if="windowStore.activeWindow == 8"><span class="cursor-pointer font-medium">{{ __('Forms', 'respacio-houzez-import') }}</span></template>
    <template v-if="windowStore.activeWindow == 9"><span class="cursor-pointer font-medium">{{ __('Support', 'respacio-houzez-import') }}</span></template>
    </div>
  </div>
</template>
