{% 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>
    <div>
        <form method="POST" action="/admin/theme" class="d-inline">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <button type="submit" name="activate_default" class="btn btn-primary btn-sm">
                <i class="bi bi-check-lg"></i> {{ ta.activate_default|default('Activeer Default') }}
            </button>
        </form>
        <a href="/admin/theme-new" class="btn btn-outline-primary btn-sm ms-2">
            <i class="bi bi-plus-lg"></i> {{ ta.new_theme|default('Nieuw thema') }}
        </a>
    </div>
</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">{{ theme.title|default(theme.name) }}</span>
                {% if theme.active %}
                <span class="badge bg-success">{{ ta.active|default('Actief') }}</span>
                {% endif %}
            </div>
            <div class="card-body">
                <p class="text-muted small">{{ ta.name_label|default('Naam: ') }}{{ theme.name }}</p>
                {% if theme.default_layout %}
                <p class="text-muted small">{{ ta.default_layout_label|default('Default layout: ') }}{{ theme.default_layout }}</p>
                {% endif %}
            </div>
            <div class="card-footer bg-white">
                {% if not theme.active %}
                <form method="POST" action="/admin/theme" class="d-inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" name="activate" value="{{ theme.name }}">
                    <button type="submit" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-check-lg"></i> {{ ta.activate|default('Activeren') }}
                    </button>
                </form>
                {% endif %}
                <form method="POST" action="/admin/theme" class="d-inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" name="compile_scss" value="1">
                    <input type="hidden" name="theme" value="{{ theme.name }}">
                    <button type="submit" class="btn btn-sm btn-outline-success">
                        <i class="bi bi-palette"></i> {{ ta.compile_scss|default('SCSS compileren') }}
                    </button>
                </form>
            </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 %}