{% extends "admin/base_admin.html" %}
{% set admin_page = "gallery" %}
{% block title %}{{ entry.label }} Preview - Email Gallery - Admin{% endblock %}

{% block admin_head %}
<style>
  .preview-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .preview-toolbar__title { flex: 1; min-width: 0; }
  .lang-toggle { display: flex; gap: 2px; background: #F1F5F9; border-radius: 6px; padding: 2px; }
  .lang-toggle a {
    padding: 4px 12px; font-size: 0.75rem; font-weight: 600;
    border-radius: 4px; text-decoration: none; color: #64748B; transition: all 0.1s;
  }
  .lang-toggle a.active { background: #FFFFFF; color: #1D4ED8; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .preview-iframe {
    width: 100%; height: 700px;
    border: 1px solid #E2E8F0; border-radius: 8px;
    background: #F1F5F9;
  }
</style>
{% endblock %}

{% block admin_content %}
  <header class="mb-4">
    <a href="{{ url_for('admin.email_gallery') }}" class="text-sm text-slate">&larr; Email Gallery</a>
    <h1 class="text-2xl mt-1">{{ entry.label }}</h1>
    <p style="margin-top:0.25rem;font-size:0.875rem;color:#64748B;">{{ entry.description }}</p>
  </header>

  <div class="preview-toolbar">
    <div class="preview-toolbar__title">
      {% if entry.email_type %}
      <a href="{{ url_for('admin.emails') }}?email_type={{ entry.email_type }}"
         style="font-size:0.8125rem;color:#1D4ED8;text-decoration:none;">
        View in sent log &rarr;
      </a>
      {% endif %}
    </div>

    {# Language toggle #}
    <div class="lang-toggle">
      <a href="{{ url_for('admin.email_gallery_preview', slug=slug, lang='en') }}"
         class="{{ 'active' if lang == 'en' else '' }}">EN</a>
      <a href="{{ url_for('admin.email_gallery_preview', slug=slug, lang='de') }}"
         class="{{ 'active' if lang == 'de' else '' }}">DE</a>
    </div>
  </div>

  <iframe
    class="preview-iframe"
    srcdoc="{{ rendered_html | e }}"
    sandbox="allow-same-origin"
    title="{{ entry.label }} email preview"
  ></iframe>
{% endblock %}
