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

{% block content %}
    <div class="card">
        <div class="card-body">
            <h3 class="card-title">{{ 'Client area themes'|trans }}</h3>
        </div>
        <table class="table card-table table-vcenter table-striped text-nowrap table-hover">
            <thead>
            <tr>
                <th>{{ 'Name'|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 i, theme in themes.list %}
            <tr>
                <td>
                    {{ theme.code|capitalize }}
                </td>
                <td>
                    {% if theme.hasSettings %}
                        <a class="btn btn-outline-primary" href="{{ 'theme'|alink }}/{{ theme.code }}">
                            <svg class="icon">
                                <use xlink:href="#cog"/>
                            </svg>
                            {{ 'Settings'|trans }}
                        </a>
                    {% else %}
                        <a class="btn btn-outline-primary disabled" href="#" aria-disabled="true">
                            <svg class="icon">
                                <use xlink:href="#cog"/>
                            </svg>
                            {{ 'Settings'|trans }}
                        </a>
                    {% endif %}
                </td>
                <td>
                    {% if guest.extension_theme(true).code != theme.code %}
                        <a class="btn btn-primary api-link" data-api-redirect="{{ 'extension/settings/theme'|alink }}"
                           href="{{ 'api/admin/theme/select'|link({ 'code': theme.code, 'CSRFToken': CSRFToken }) }}">
                            <svg class="icon">
                                <use xlink:href="#check"/>
                            </svg>
                            {{ 'Set as default'|trans }}
                        </a>
                    {% else %}
                        <a class="btn btn-primary api-link disabled" data-api-redirect="{{ 'extension/settings/theme'|alink }}"
                            href="{{ 'api/admin/theme/select'|link({ 'code': theme.code, 'CSRFToken': CSRFToken }) }}" aria-disabled="true">
                            <svg class="icon">
                            <use xlink:href="#check"/>
                        </svg>
                        {{ 'Set as default'|trans }}
                        </a>
                    {% endif %}
                </td>
            </tr>
            </tbody>
            {% else %}
                <tbody>
                <tr>
                    <td class="text-muted" colspan="5">{{ 'The list is empty'|trans }}</td>
                </tr>
                </tbody>
            {% endfor %}
        </table>
    </div>

    <div class="card mt-3">
        <div class="card-body">
            <h3 class="card-title">{{ 'Admin area themes'|trans }}</h3>
        </div>
        <table class="table card-table table-vcenter table-striped text-nowrap table-hover">
            <thead>
            <tr>
                <th>{{ 'Name'|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 i, theme in themes.list %}
            <tr>
                <td>
                    {{ theme.code|replace({ 'admin_': '' })|capitalize }}
                </td>
                <td>
                    {% if theme.hasSettings %}
                        <a class="btn btn-outline-primary" href="{{ 'theme'|alink }}/{{ theme.code }}">
                            <svg class="icon">
                                <use xlink:href="#cog"/>
                            </svg>
                            {{ 'Settings'|trans }}
                        </a>
                    {% else %}
                        <a class="btn btn-outline-primary disabled" href="#" aria-disabled="true">
                            <svg class="icon">
                                <use xlink:href="#cog"/>
                            </svg>
                            {{ 'Settings'|trans }}
                        </a>
                    {% endif %}
                </td>
                <td>
                    {% if guest.extension_theme(false).code != theme.code %}
                        <a class="btn btn-primary api-link" data-api-redirect="{{ 'extension/settings/theme'|alink }}"
                            href="{{ 'api/admin/theme/select'|link({'code' : theme.code, 'CSRFToken': CSRFToken}) }}">
                            <svg class="icon">
                                <use xlink:href="#check"/>
                            </svg>
                            {{ 'Set as default'|trans }}
                        </a>
                    {% else %}
                        <a class="btn btn-primary api-link disabled" data-api-redirect="{{ 'extension/settings/theme'|alink }}"
                            href="{{ 'api/admin/theme/select'|link({'code' : theme.code, 'CSRFToken': CSRFToken}) }}" aria-disabled="true">
                            <svg class="icon">
                                <use xlink:href="#check"/>
                            </svg>
                            {{ 'Set as default'|trans }}
                        </a>
                    {% endif %}
                </td>
            </tr>
            </tbody>
            {% else %}
            <tbody>
            <tr>
                <td class="text-muted" colspan="5">{{ 'The list is empty'|trans }}</td>
            </tr>
            </tbody>
            {% endfor %}
        </table>
    </div>
{% endblock %}
