{% extends "base.html" %}

{% block title %}Themes{% endblock %}

{% block extra_head %}
{% if preview_css_url %}<link rel="stylesheet" href="{{ preview_css_url }}">{% endif %}
<style>
.themes-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 1rem 0;
}
.themes-toolbar a {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    text-decoration: none;
}
.themes-toolbar a.is-active { font-weight: 700; outline: 2px solid currentColor; }
.themes-toolbar .spacer { flex: 1; }
.theme-preview-frame {
    width: 100%;
    height: 70vh;
    min-height: 460px;
    border: 1px solid currentColor;
    /* Square frame so it doesn't fight terminal-style themes; the previewed
       page supplies its own corner treatment. */
    border-radius: 0;
    background: #fff;
}
.themes-hint { opacity: 0.75; font-size: 0.9rem; margin: 0.25rem 0 1rem; }
</style>
{% endblock %}

{% block content %}
<h1>Themes</h1>

<p class="themes-hint">
    Preview a theme to see it applied to a real table (with facets and SQL) in the
    frame below — nothing is saved until you choose <strong>Use this theme</strong>.
    Your choice is remembered in a cookie in this browser.
</p>

<div class="themes-toolbar">
    {% for theme in themes %}
    <a href="{{ urls.path('/-/themes') }}?_theme_preview={{ theme.id }}"
       class="{% if theme.id == active %}is-active{% endif %}">
        {{ theme.label }}{% if theme.id == current %} ✓{% endif %}
    </a>
    {% endfor %}
    <span class="spacer"></span>
    {% if active %}
    <a href="{{ urls.path('/-/themes/set') }}?theme={{ active }}&amp;next={{ urls.path('/-/themes') }}?_theme_preview={{ active }}">
        Use “{{ active }}”
    </a>
    {% endif %}
    <a href="{{ urls.path('/-/themes/set') }}?theme=__default__&amp;next={{ urls.path('/-/themes') }}">
        Reset to default
    </a>
</div>

{% if demo_url %}
<iframe class="theme-preview-frame" src="{{ demo_url }}" title="Live theme preview"></iframe>
{% else %}
<p class="themes-hint">
    Attach a database to Datasette to see a live table preview here. Previewing
    still restyles this page so you can judge the overall look.
</p>
{% endif %}
{% endblock %}