{# ============================================================================
   Admin Bar — displayed on public pages for logged-in admin/editor users.
   
   Shows: username, role badge, Edit/Builder links, Dashboard link.
   Designed to be minimal and respect the active theme.
   
   Include in public/base.html:
     {% if current_user is defined and current_user.is_authenticated %}
       {% include 'components/admin-bar.html' %}
     {% endif %}
   ============================================================================ #}

{% if current_user is defined and current_user.is_authenticated %}
<div class="ap-admin-bar" id="apAdminBar">
  <div class="ap-admin-bar__inner">
    
    {# Left: Logo + Dashboard link #}
    <div class="ap-admin-bar__left">
      <a href="{{ url_for('admin_dashboard') }}" class="ap-admin-bar__logo" title="{{ t('admin_bar.dashboard') }}">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2L2 7l10 5 10-5-10-5z"/>
          <path d="M2 17l10 5 10-5"/>
          <path d="M2 12l10 5 10-5"/>
        </svg>
        <span>AliothPress</span>
      </a>
    </div>
    
    {# Center: Edit actions (context-sensitive) #}
    <div class="ap-admin-bar__center">
      {% if page is defined and page.id %}
        {# Viewing a page #}
        <a href="{{ url_for('admin_pages_edit', page_id=page.id) }}" class="ap-admin-bar__btn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
          </svg>
          {{ t('admin_bar.edit_page') }}
        </a>
        
        <a href="{{ url_for('admin_page_builder', page_id=page.id) }}" class="ap-admin-bar__btn ap-admin-bar__btn--accent">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="7" height="7"/>
            <rect x="14" y="3" width="7" height="7"/>
            <rect x="3" y="14" width="7" height="7"/>
            <rect x="14" y="14" width="7" height="7"/>
          </svg>
          {{ t('admin_bar.page_builder') }}
        </a>
        
        <span class="ap-admin-bar__status ap-admin-bar__status--{{ page.status }}">
          {{ page.status }}
        </span>
      {% elif post is defined and post.id %}
        {# Viewing a post #}
        <a href="{{ url_for('admin_posts_edit', post_id=post.id) }}" class="ap-admin-bar__btn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
          </svg>
          {{ t('admin_bar.edit_post') }}
        </a>
      {% endif %}
    </div>
    
    {# Right: User info #}
    <div class="ap-admin-bar__right">
      <span class="ap-admin-bar__role">{{ current_user.role }}</span>
      <span class="ap-admin-bar__user">{{ current_user.get_display_name() }}</span>
    </div>
    
  </div>
</div>

<style>
/* ============================================================================
   Admin Bar Styles — Uses theme CSS variables for seamless integration
   ============================================================================ */

.ap-admin-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  height: 36px;
  background: var(--ap-color-surface, #1a1a2e);
  border-bottom: 1px solid var(--ap-color-border, rgba(255,255,255,0.08));
  font-family: var(--ap-font-body, system-ui, sans-serif);
  font-size: 13px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ap-admin-bar__inner {
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 16px;
}

/* Left — Logo */
.ap-admin-bar__left {
  display: flex;
  align-items: center;
}

.ap-admin-bar__logo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ap-color-text-secondary, #94a3b8);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: color 0.2s;
}

.ap-admin-bar__logo:hover {
  color: var(--ap-color-primary, #818cf8);
}

.ap-admin-bar__logo span {
  display: none;
}

@media (min-width: 640px) {
  .ap-admin-bar__logo span {
    display: inline;
  }
}

/* Center — Actions */
.ap-admin-bar__center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-admin-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--ap-color-text-secondary, #94a3b8);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.ap-admin-bar__btn:hover {
  background: var(--ap-color-primary-light, rgba(129, 140, 248, 0.15));
  color: var(--ap-color-primary, #818cf8);
}

.ap-admin-bar__btn--accent {
  background: var(--ap-color-primary-light, rgba(129, 140, 248, 0.12));
  color: var(--ap-color-primary, #818cf8);
}

.ap-admin-bar__btn--accent:hover {
  background: var(--ap-color-primary, #818cf8);
  color: var(--ap-color-text-inverse, #0a0b10);
}

.ap-admin-bar__status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
}

.ap-admin-bar__status--published {
  color: var(--ap-color-success, #34d399);
  background: rgba(52, 211, 153, 0.12);
}

.ap-admin-bar__status--draft {
  color: var(--ap-color-warning, #fbbf24);
  background: rgba(251, 191, 36, 0.12);
}

/* Right — User */
.ap-admin-bar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-admin-bar__role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ap-color-primary, #818cf8);
  background: var(--ap-color-primary-light, rgba(129, 140, 248, 0.12));
  padding: 2px 6px;
  border-radius: 3px;
}

.ap-admin-bar__user {
  color: var(--ap-color-text-secondary, #94a3b8);
  font-weight: 500;
  display: none;
}

@media (min-width: 640px) {
  .ap-admin-bar__user {
    display: inline;
  }
}

/* Push page content down when admin bar is visible */
html:has(.ap-admin-bar) body {
  padding-top: 36px;
}

/* Also handle the fixed header if present */
html:has(.ap-admin-bar) .ap-header {
  top: 36px;
}
</style>
{% endif %}