<template>
  <header class="app-header" role="banner" aria-label="Main navigation">
    <div class="header-content">
      <div class="header-left">
        <h1 class="header-title">
          <i class="fas fa-cloud mr-2" aria-hidden="true"></i>
          <span>Multi-Cloud Orchestration Portal</span>
        </h1>
      </div>
      
      <div class="header-center">
        <div class="header-search">
          <label for="header-search-input" class="sr-only">Search</label>
          <i class="fas fa-search" aria-hidden="true"></i>
          <input
            id="header-search-input"
            type="search"
            placeholder="Search..."
            class="search-input"
            v-model="searchQuery"
            aria-label="Search the portal"
            autocomplete="off"
            spellcheck="false"
          />
        </div>
      </div>
      
      <div class="header-right">
        <button 
          class="header-btn" 
          title="Notifications" 
          aria-label="Notifications"
          :aria-describedby="notificationCount > 0 ? 'notification-count' : undefined"
          type="button"
        >
          <span class="sr-only">Notifications</span>
          <i class="fas fa-bell" aria-hidden="true"></i>
          <span 
            v-if="notificationCount > 0" 
            id="notification-count"
            class="badge" 
            :aria-label="`${notificationCount} unread notifications`"
            aria-live="polite"
          >
            {{ notificationCount }}
          </span>
        </button>
        
        <button 
          class="header-btn" 
          title="Settings" 
          aria-label="Open settings menu" 
          type="button"
        >
          <span class="sr-only">Settings</span>
          <i class="fas fa-cog" aria-hidden="true"></i>
        </button>
        
        <button 
          class="header-user" 
          type="button"
          title="User menu"
          aria-label="User menu"
        >
          <div class="user-avatar" aria-hidden="true">
            <i class="fas fa-user"></i>
          </div>
          <div class="user-info">
            <div class="user-name">Admin User</div>
            <div class="user-role">Administrator</div>
          </div>
        </button>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const searchQuery = ref('');
const notificationCount = ref(3);
</script>

<style scoped>
/* Header styles are in panels.css for consistency */

/* Screen reader only - Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>
