{% extends "layout_default.phtml" %}
{% block meta_title %}Client area themes{% endblock %}
{% set active_menu = 'extensions' %}

{% block content %}
<div class="widget simpleTabs nomargin">

    <ul class="tabs">
        <li><a href="#tab-index">{% trans 'Client area themes' %}</a></li>
        <li><a href="#tab-admin-themes">{% trans 'Admin area themes' %}</a></li>
        <li><a href="#tab-new">{% trans 'New theme' %}</a></li>
    </ul>

    <div class="tabs_container">
        <div class="fix"></div>
        <div class="tab_content nopadding" id="tab-index">
            <table class="tableStatic wide">
            <thead>
                <tr>
                    <td colspan="2">{% trans 'Name' %}</td>
                    <td>{% trans 'Version' %}</td>
                    <td>{% trans 'Author' %}</td>
                    <td style="width: 5%">&nbsp;</td>
                </tr>
            </thead>

            <tbody>
            {% set themes = admin.extension_theme_get_list({"per_page":100}) %}
            {% for i, theme in themes.list %}

            <tr>
                <td style="width: 5%"><img src="{{ theme.url~theme.icon }}" alt="{{ theme.name }}" style="max-width: 200px"/></td>
                <td>{{ theme.name }} - {{ theme.description }}</td>
                <td>{{ theme.version }}</td>
                <td><a href="{{ theme.author_url }}" target="_blank">{{ theme.author }}</a></td>
                <td class="actions">
                    {% if admin.system_param({"key":"theme"}) != theme.code %}
                    <a class="bb-button btn14 api-link" data-api-redirect="extension/themes" href="admin/extension/theme_select?code={{theme.code}}"><img src="images/icons/dark/star.png" alt=""></a>
                    {% endif %}
                </td>
            </tr>
            </tbody>

            {% else %}
            <tbody>
                <tr>
                    <td colspan="5">
                        {% trans 'The list is empty' %}
                    </td>
                </tr>
            </tbody>
            {% endfor %}
        </table>
        </div>
        
        <div class="tab_content nopadding" id="tab-admin-themes">
            <table class="tableStatic wide">
            <thead>
                <tr>
                    <td colspan="2">{% trans 'Name' %}</td>
                    <td>{% trans 'Version' %}</td>
                    <td>{% trans 'Author' %}</td>
                    <td style="width: 5%">&nbsp;</td>
                </tr>
            </thead>

            <tbody>
            {% set themes = admin.extension_theme_admin_get_list({"per_page":100}) %}
            {% for i, theme in themes.list %}

            <tr>
                <td style="width: 5%"><img src="{{ theme.url~theme.icon }}" alt="{{ theme.name }}" style="max-width: 200px"/></td>
                <td>{{ theme.name }} - {{ theme.description }}</td>
                <td>{{ theme.version }}</td>
                <td><a href="{{ theme.author_url }}" target="_blank">{{ theme.author }}</a></td>
                <td class="actions">
                    {% if admin.system_param({"key":"admin_theme"}) != theme.code %}
                    <a class="bb-button btn14 api-link" data-api-redirect="extension/themes" href="admin/extension/theme_admin_select?code={{theme.code}}"><img src="images/icons/dark/star.png" alt=""></a>
                    {% endif %}
                </td>
            </tr>
            </tbody>

            {% else %}
            <tbody>
                <tr>
                    <td colspan="5">
                        {% trans 'The list is empty' %}
                    </td>
                </tr>
            </tbody>
            {% endfor %}
        </table>
        </div>

        <div class="tab_content nopadding" id="tab-new">
            {% include "partial_extensions.phtml" with {'type': 'theme', 'header':"List of themes on extensions site"} only %}
            <div class="body">
                <h1 class="pt10">{% trans 'Adding new client area theme' %}</h1>
                <p>{% trans %}Follow these instructions to install new client area theme.{% endtrans %}</p>
                <div class="pt20 list arrowGrey">
                    <ul>
                        <li>{% trans %}Check for client area themes at{% endtrans %} <a href="http://extensions.boxbilling.com/" target="_blank">{% trans %}BoxBilling extensions site{% endtrans %}</a></li>
                        <li>{% trans %}Upload new theme files to{% endtrans %} <strong>{{ constant('BB_PATH_THEMES') }}</strong> {% trans %}and reload this page{% endtrans %}</li>
                        <li>{% trans %}Client area theme will appear in &quot;Client area themes&quot; tab. And you can select it as default{% endtrans %}</li>
                        <li>{% trans %}For theme designers. Read{% endtrans %} <a href="http://www.boxbilling.com/docs/search.html?q=theme" target="_blank">{% trans %}BoxBilling documentation{% endtrans %}</a> {% trans %}to learn how to create your own theme{% endtrans %}</li>
                    </ul>
                </div>
                <h1 class="pt10">{% trans 'Adding new admin area theme' %}</h1>
                <p>{% trans %}Admin area follows same logic as client area themes with one additional rule: admin theme directory must be prefixed with &quot;admin_&quot;.{% endtrans %}</p>
            </div>
        </div>
    </div>
    
</div>
{% endblock %}
