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

{% block admin_head %}
<style>
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  @media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 720px)  { .gallery-grid { grid-template-columns: 1fr; } }

  .gallery-card {
    display: block;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 1.25rem 1.25rem 1rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    position: relative;
    overflow: hidden;
  }
  .gallery-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #1D4ED8;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.2s ease;
  }
  .gallery-card:hover {
    border-color: #BFDBFE;
    box-shadow: 0 4px 16px rgba(29,78,216,0.08);
    transform: translateY(-1px);
  }
  .gallery-card:hover::before { transform: scaleY(1); }

  .gallery-card__icon {
    width: 36px; height: 36px;
    background: #EFF6FF;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.875rem;
    flex-shrink: 0;
  }
  .gallery-card__icon svg { width: 18px; height: 18px; color: #1D4ED8; }
  .gallery-card__label { font-size: 0.9375rem; font-weight: 600; color: #0F172A; margin-bottom: 0.25rem; }
  .gallery-card__desc { font-size: 0.8125rem; color: #64748B; line-height: 1.5; margin-bottom: 0.875rem; }
  .gallery-card__cta { font-size: 0.8125rem; font-weight: 500; color: #1D4ED8; }
</style>
{% endblock %}

{% block admin_content %}
  <header class="mb-6">
    <div style="display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;">
      <h1 class="text-2xl">Email Gallery</h1>
      <span style="font-size:0.8125rem;color:#94A3B8;">{{ registry | length }} template{{ 's' if registry | length != 1 else '' }}</span>
    </div>
    <p style="margin-top:0.25rem;font-size:0.875rem;color:#64748B;">Rendered previews of all transactional email templates with sample data.</p>
  </header>

  <div class="gallery-grid">
    {% for slug, entry in registry.items() %}
    <a class="gallery-card" href="{{ url_for('admin.email_gallery_preview', slug=slug) }}">
      <div class="gallery-card__icon">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/>
        </svg>
      </div>
      <div class="gallery-card__label">{{ entry.label }}</div>
      <div class="gallery-card__desc">{{ entry.description }}</div>
      <div class="gallery-card__cta">Preview &rarr;</div>
    </a>
    {% endfor %}
  </div>
{% endblock %}
