{#
  Version Banner Component

  Displays a warning banner for older documentation versions.
  Automatically shows when viewing non-latest versioned content.

  Available context:
    - versioning_enabled: bool - Whether versioning is enabled
    - current_version: dict|None - Current page's version info
    - is_latest_version: bool - Whether current page is latest version
    - site.latest_version: dict - The latest version info

  Usage in templates:
    {% include "partials/version-banner.html" %}

  Customization:
    Override this partial in your theme to customize the banner.
    You can also style it using CSS class: .version-banner
#}

{% if versioning_enabled and current_version and not is_latest_version %}
<div class="version-banner version-banner--{{ current_version.deprecated and 'danger' or 'warning' }}" role="alert">
  <div class="version-banner__content">
    {# Icon - uses Bengal icon() helper #}
    {% if current_version.deprecated %}
    {{ icon('danger', size=20, css_class='version-banner__icon') }}
    {% else %}
    {{ icon('warning', size=20, css_class='version-banner__icon') }}
    {% end %}

    {# Message #}
    <div class="version-banner__message">
      <strong>
        {% if current_version.deprecated %}
          {{ t('version.deprecated', {'label': current_version.label}, default='This version ({label}) is deprecated.') }}
        {% else %}
          {{ t('version.viewing', {'label': current_version.label}, default="You're viewing docs for {label}.") }}
        {% end %}
      </strong>
      {% if site.latest_version %}
      <span class="version-banner__link-text">
        {{ t('version.see_latest', default='For the latest documentation, see') }}
        <a href="{{ site.latest_version.url_prefix or '/' }}" class="version-banner__link">
          {{ t('version.version_label', {'label': site.latest_version.label}, default='version {label}') }}
        </a>.
      </span>
      {% end %}
    </div>
  </div>

  {# Dismiss button (optional) #}
  <button
    type="button"
    class="version-banner__dismiss"
    onclick="this.parentElement.style.display='none'"
    aria-label="{{ t('version.dismiss', default='Dismiss version notice') }}"
  >
    {{ icon('x', size=16) }}
  </button>
</div>

{# Styles for version banner #}
<style>
.version-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.version-banner--warning {
  background: var(--warning-bg, #fef3c7);
  color: var(--warning-text, #92400e);
  border: 1px solid var(--warning-border, #fcd34d);
}

.version-banner--danger {
  background: var(--danger-bg, #fee2e2);
  color: var(--danger-text, #991b1b);
  border: 1px solid var(--danger-border, #fca5a5);
}

.version-banner__content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.version-banner__icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.version-banner__message {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.version-banner__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.version-banner__link:hover {
  text-decoration-thickness: 2px;
}

.version-banner__dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.15s;
}

.version-banner__dismiss:hover {
  opacity: 1;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .version-banner--warning {
    background: var(--warning-bg-dark, #78350f);
    color: var(--warning-text-dark, #fde68a);
    border-color: var(--warning-border-dark, #b45309);
  }

  .version-banner--danger {
    background: var(--danger-bg-dark, #7f1d1d);
    color: var(--danger-text-dark, #fecaca);
    border-color: var(--danger-border-dark, #dc2626);
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .version-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .version-banner__dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }

  .version-banner {
    position: relative;
    padding-right: 2.5rem;
  }
}
</style>
{% end %}
