{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% block meta_title %}{{ 'Themes'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|url }}">
                <svg class="icon">
                    <use xlink:href="#home"/>
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'system'|url }}">{{ 'Settings'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Themes'|trans }}</li>
    </ol>
{% endblock %}

{% block content %}
    {% set current_client_theme = admin.theme_get_current({ 'client': true }) %}
    {% set current_admin_theme = admin.theme_get_current({ 'client': false }) %}
    <div class="card">
        <div class="card-header">
            <div>
                <h3 class="card-title">{{ 'Themes'|trans }}</h3>
                <p class="card-subtitle">{{ 'Choose the active client and admin themes, and open theme-specific settings where available.'|trans }}</p>
            </div>
        </div>
        <div class="card-body p-0">
            <section>
                <div class="card-body border-bottom">
                    <h4 class="card-title mb-2">{{ 'Client Area Themes'|trans }}</h4>
                    <p class="text-secondary mb-0">{{ 'These themes control the client-facing storefront, account area, and other public pages.'|trans }}</p>
                </div>
                <div class="table-responsive">
                    <table class="table card-table table-vcenter table-striped text-nowrap table-hover">
                        <thead>
                        <tr>
                            <th>{{ 'Name'|trans }}</th>
                            <th>{{ 'Code'|trans }}</th>
                            <th class="w-1">{{ 'Settings'|trans }}</th>
                            <th class="w-1">{{ 'Default'|trans }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% set themes = admin.theme_get_list({ 'per_page': 100 }) %}
                        {% for theme in themes.list %}
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span>{{ theme.code|capitalize }}</span>
                                    {% if current_client_theme.code == theme.code %}
                                        <span class="badge text-bg-success">{{ 'Current'|trans }}</span>
                                    {% endif %}
                                </div>
                            </td>
                            <td><code>{{ theme.code }}</code></td>
                            <td>
                                {% if theme.hasSettings %}
                                    <a class="btn btn-outline-primary" href='{{ "theme/#{theme.code}"|url }}'>
                                        <svg class="icon">
                                            <use xlink:href="#cog"/>
                                        </svg>
                                        {{ 'Settings'|trans }}
                                    </a>
                                {% else %}
                                    <span class="text-muted">{{ 'No settings available'|trans }}</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if current_client_theme.code != theme.code %}
                                    <a class="btn btn-primary" href="{{ 'theme/select'|api_url(query: { 'code': theme.code }) }}" {{ fb_api_link({ redirect: 'extension/settings/theme'|url }) }}>
                                        <svg class="icon">
                                            <use xlink:href="#check"/>
                                        </svg>
                                        {{ 'Set as Default'|trans }}
                                    </a>
                                {% else %}
                                    <button class="btn btn-primary" type="button" disabled aria-disabled="true">
                                        <svg class="icon">
                                            <use xlink:href="#check"/>
                                        </svg>
                                        {{ 'Set as Default'|trans }}
                                    </button>
                                {% endif %}
                            </td>
                        </tr>
                        {% else %}
                            <tr>
                                <td class="text-center text-muted py-3" colspan="4">{{ 'The list is empty'|trans }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>

            <section>
                <div class="card-body border-top border-bottom">
                    <h4 class="card-title mb-2">{{ 'Admin Area Themes'|trans }}</h4>
                    <p class="text-secondary mb-0">{{ 'These themes control the administrator interface used by staff.'|trans }}</p>
                </div>
                <div class="table-responsive">
                    <table class="table card-table table-vcenter table-striped text-nowrap table-hover">
                        <thead>
                        <tr>
                            <th>{{ 'Name'|trans }}</th>
                            <th>{{ 'Code'|trans }}</th>
                            <th class="w-1">{{ 'Settings'|trans }}</th>
                            <th class="w-1">{{ 'Default'|trans }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% set themes = admin.theme_get_admin_list({ 'per_page': 100 }) %}
                        {% for theme in themes.list %}
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span>{{ theme.code|replace({ 'admin_': '' })|capitalize }}</span>
                                    {% if current_admin_theme.code == theme.code %}
                                        <span class="badge text-bg-success">{{ 'Current'|trans }}</span>
                                    {% endif %}
                                </div>
                            </td>
                            <td><code>{{ theme.code }}</code></td>
                            <td>
                                {% if theme.hasSettings %}
                                    <a class="btn btn-outline-primary" href='{{ "theme/#{theme.code}"|url }}'>
                                        <svg class="icon">
                                            <use xlink:href="#cog"/>
                                        </svg>
                                        {{ 'Settings'|trans }}
                                    </a>
                                {% else %}
                                    <span class="text-muted">{{ 'No settings available'|trans }}</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if current_admin_theme.code != theme.code %}
                                    <a class="btn btn-primary" href="{{ 'theme/select'|api_url(query: {'code' : theme.code }) }}" {{ fb_api_link({ redirect: 'extension/settings/theme'|url }) }}>
                                        <svg class="icon">
                                            <use xlink:href="#check"/>
                                        </svg>
                                        {{ 'Set as Default'|trans }}
                                    </a>
                                {% else %}
                                    <button class="btn btn-primary" type="button" disabled aria-disabled="true">
                                        <svg class="icon">
                                            <use xlink:href="#check"/>
                                        </svg>
                                        {{ 'Set as Default'|trans }}
                                    </button>
                                {% endif %}
                            </td>
                        </tr>
                        {% else %}
                            <tr>
                                <td class="text-center text-muted py-3" colspan="4">{{ 'The list is empty'|trans }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
{% endblock %}
