{% extends "layouts/admin.twig" %}

{% block title %}{{ ta.themes|default('Thema\'s') }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-palette"></i> {{ ta.themes|default('Thema\'s') }}</h2>
    <a href="/admin/theme-new" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg"></i> {{ ta.new_theme|default('Nieuw thema') }}
    </a>
</div>

<div class="row g-4">
    {% for theme in themes %}
    <div class="col-md-6 col-lg-4">
        <div class="card shadow-sm h-100 {{ theme.active ? 'border-primary border-2' : '' }}">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-bold">
                    {% if theme.protected %}<i class="bi bi-shield-check text-primary" title="{{ ta.theme_default_protected|default('Default thema - kan niet verwijderd worden') }}"></i>{% endif %}
                    {{ theme.title|default(theme.name) }}
                </span>
                <div class="d-flex gap-1 flex-wrap">
                    {% if theme.active %}
                        <span class="badge bg-success">{{ ta.active|default('Actief') }}</span>
                    {% endif %}
                    {% if theme.has_scss %}
                        {% if theme.scss_compiled %}
                            <span class="badge bg-success" title="{{ ta.scss_compiled_ok|default('SCSS is gecompileerd en up-to-date') }}">{{ ta.scss_ok|default('SCSS ok') }}</span>
                        {% else %}
                            <span class="badge bg-warning text-dark" title="{{ ta.scss_needs_compile|default('SCSS source nieuwer dan gecompileerde CSS') }}">{{ ta.scss_stale|default('SCSS verouderd') }}</span>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-1">{{ ta.name_label|default('Naam: ') }}<code>{{ theme.name }}</code></p>
                {% if theme.config.default_template %}
                <p class="text-muted small mb-1">{{ ta.default_layout_label|default('Default layout: ') }}{{ theme.config.default_template }}</p>
                {% endif %}
                {% if theme.scss_mtime %}
                <p class="text-muted small mb-1"><i class="bi bi-clock"></i> SCSS: {{ theme.scss_mtime }}{% if theme.css_mtime %} &rarr; CSS: {{ theme.css_mtime }}{% endif %}</p>
                {% endif %}
                {% if theme.template %}
                <p class="text-muted small mb-0">{{ ta.theme_layouts|default('Layouts: ') }}{{ theme.template|keys|join(', ') }}</p>
                {% endif %}
            </div>
            <div class="card-footer bg-white">
                <div class="btn-group w-100" role="group" aria-label="{{ ta.theme_actions|default('Thema acties') }}">
                    <a href="/admin/theme-edit?theme={{ theme.name|url_encode }}" class="btn btn-sm btn-outline-primary" title="{{ ta.edit|default('Bewerken') }}" aria-label="{{ ta.edit|default('Bewerken') }}">
                        <i class="bi bi-pencil"></i>
                    </a>
                    {% if theme.has_scss %}
                    <form method="POST" action="/admin/theme-scss" class="d-inline" onsubmit="return confirm('{{ ta.compile_scss_confirm|default('SCSS compileren? Dit overschrijft assets/css_compiled/theme.css.') }}')">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <input type="hidden" name="theme" value="{{ theme.name }}">
                        <button type="submit" class="btn btn-sm btn-outline-success" title="{{ ta.compile_scss|default('SCSS compileren') }}" aria-label="{{ ta.compile_scss|default('SCSS compileren') }}">
                            <i class="bi bi-palette"></i>
                        </button>
                    </form>
                    {% endif %}
                    {% if not theme.active %}
                    <form method="POST" action="/admin/theme-activate" class="d-inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <input type="hidden" name="theme" value="{{ theme.name }}">
                        <button type="submit" class="btn btn-sm btn-outline-primary" title="{{ ta.activate|default('Activeren') }}" aria-label="{{ ta.activate|default('Activeren') }}">
                            <i class="bi bi-check-lg"></i>
                        </button>
                    </form>
                    {% endif %}
                    {% if not theme.protected and not theme.active %}
                    <form method="POST" action="/admin/theme-delete" class="d-inline" onsubmit="return confirm('{{ ta.confirm_delete_theme|default('Weet je zeker dat je dit thema wilt verwijderen? Alle bestanden in het thema gaan verloren.') }}')">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <input type="hidden" name="theme" value="{{ theme.name }}">
                        <button type="submit" class="btn btn-sm btn-outline-danger" title="{{ ta.delete|default('Verwijderen') }}" aria-label="{{ ta.delete|default('Verwijderen') }}">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> {{ ta.no_themes|default('Geen thema\'s gevonden.') }}
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}