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

{% block title %}Thema's - CodePress Admin{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-palette"></i> 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> 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> 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">Actief</span>
                {% endif %}
            </div>
            <div class="card-body">
                <p class="text-muted small">Naam: {{ theme.name }}</p>
                {% if theme.default_layout %}
                <p class="text-muted small">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> 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> SCSS compileren
                    </button>
                </form>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> Geen thema's gevonden.
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}