{% extends "madga/studio/base.html" %}
{% load i18n madga_studio_tags %}

{% block breadcrumbs %}<span class="crumb">{% trans "Site" %}</span><span class="sep">/</span><span class="crumb is-current">{% trans "Theme gallery" %}</span>{% endblock %}

{% block content %}
<div class="madga-page">
  <div class="madga-page-header">
    <div class="madga-page-title-block">
      <h1 class="madga-page-title">{% trans "Theme gallery" %}</h1>
      <p class="madga-page-subtitle">{% trans "Registered themes (including pip-installed ones). Click Activate to apply one to the site, or Activate with palette to overwrite colors and fonts with the ones the theme suggests." %}</p>
    </div>
    <div class="madga-page-actions">
      <a href="{% url 'madga_studio:theme' %}" class="madga-btn madga-btn--sm madga-btn--ghost">{% studio_icon "theme" size=12 stroke=2 %} {% trans "Edit tokens" %}</a>
    </div>
  </div>

  <div class="madga-theme-cards">
    {% for theme in themes %}
      <div class="madga-theme-card-item {% if site.theme == theme.key %}is-active{% endif %}">
        <div class="madga-theme-card-preview" style="background: linear-gradient(135deg, {{ theme.accent_color|default:'#6C63FF' }}, {{ theme.accent_color|default:'#6C63FF' }}80);">
          {% if site.theme == theme.key %}<span class="madga-theme-card-badge">{% trans "Active" %}</span>{% endif %}
          <div class="madga-theme-card-mock">
            <div class="madga-theme-card-mock-h" style="font-family: '{{ theme.heading_font|default:'Geist' }}', sans-serif; color: {{ theme.accent_color|default:'#6C63FF' }};">{{ theme.label }}</div>
            <div class="madga-theme-card-mock-line"></div>
            <div class="madga-theme-card-mock-line" style="width: 70%;"></div>
            <div class="madga-theme-card-mock-line" style="width: 85%;"></div>
            <span class="madga-theme-card-mock-cta" style="background: {{ theme.accent_color|default:'#6C63FF' }};">CTA</span>
          </div>
        </div>
        <div class="madga-theme-card-meta">
          <div class="madga-theme-card-name">
            {{ theme.label }}
            <span class="madga-theme-card-key">{{ theme.key }}</span>
          </div>
          {% if theme.description %}<p class="madga-theme-card-desc">{{ theme.description }}</p>{% endif %}
          <div class="madga-theme-card-author">{% if theme.author %}{% blocktrans with author=theme.author %}by {{ author }}{% endblocktrans %}{% endif %}</div>
          <div class="madga-theme-card-actions">
            {% if site.theme == theme.key %}
              <span class="madga-btn madga-btn--sm" style="opacity:.5; cursor:not-allowed;">{% studio_icon "check" size=12 stroke=2.5 %} {% trans "In use" %}</span>
            {% else %}
              <form method="post" style="margin:0; display:inline;">
                {% csrf_token %}
                <input type="hidden" name="action" value="activate">
                <input type="hidden" name="theme" value="{{ theme.key }}">
                <button type="submit" class="madga-btn madga-btn--sm madga-btn--primary">{% trans "Activate" %}</button>
              </form>
              {% if theme.accent_color or theme.heading_font %}
                <form method="post" style="margin:0; display:inline;">
                  {% csrf_token %}
                  <input type="hidden" name="action" value="activate_with_palette">
                  <input type="hidden" name="theme" value="{{ theme.key }}">
                  <button type="submit" class="madga-btn madga-btn--sm" data-madga-confirm="{% trans 'Overwrite your accent color and fonts with the theme defaults. Continue?' %}">+ {% trans "palette" %}</button>
                </form>
              {% endif %}
            {% endif %}
          </div>
        </div>
      </div>
    {% empty %}
      {% studio_empty title=_("No themes") message=_("No themes are registered. Install one via pip or register one from code.") %}
    {% endfor %}
  </div>
</div>
{% endblock %}