{% extends 'layout_default.html.twig' %}

{% block meta_title %}{{ 'Manage translations'|trans }}{% endblock %}

{% set active_menu = 'extensions' %}

{% block content %}
    <div class="card-tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" href="#tab-index" data-bs-toggle="tab">{{ 'Manage translations'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-new" data-bs-toggle="tab">
                    <svg class="icon me-2">
                        <use xlink:href="#plus" />
                    </svg>
                    {{ 'New translations'|trans }}
                </a>
            </li>
        </ul>
        <div class="card">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                    <div class="container">
                        <h2 class="mb-1 mt-1">{{ 'Enabled translations'|trans}}</h2>
                        <table class="table card-table table-vcenter table-striped text-nowrap">
                            <thead>
                            <tr>
                                <th>{{ 'Country'|trans }}</th>
                                <th>{{ 'Language'|trans }}</th>
                                <th>{{ 'Completion'|trans}}</th>
                                <th>{{ 'Code'|trans }}</th>
                                <th>{{ 'Disable'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for lang in admin.extension_languages %}
                            <tr>
                                <td class="w-2">
                                    <span class="flag flag-country-{{ lang.locale|split('_')[1]|lower }}"></span>
                                </td>
                                <td class="w-6">{{ lang.name }}</td>
                                <td>
                                    {% set progress = admin.extension_locale_completion({'locale_id': lang.locale})%}
                                    {% if progress > 75 %}
                                        {% set background = 'success' %}
                                    {% elseif progress > 50 %}
                                        {% set background = 'warning' %}
                                    {% else %}
                                        {% set background = 'danger' %}
                                    {% endif %}
                                    <div class="progress" style="height: 15px;">
                                        <div class="progress-bar bg-{{ background }}" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100">{{ progress }}%</div>
                                    </div>
                                </td>
                                <td class="w-1">{{ lang.locale }}</td>
                                <td class="w-1">
                                    <a class="btn btn-icon api-link"
                                        href="{{ 'api/admin/extension/toggle_language'|link({ 'locale_id': lang.locale }) }}"
                                        data-api-reload="1">
                                        <svg class="icon">
                                            <use xlink:href="#close" />
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                            {% else %}
                                <tbody>
                                <tr>
                                    <td class="text-muted" colspan="2">{{ 'The list is empty'|trans }}
                                    </td>
                                </tr>
                                </tbody>
                            {% endfor %}
                        </table>
                    </div>

                    <hr/>

                    <div class="container">
                        <h2 class="mb-1 mt-1">{{ 'Disabled translations'|trans}}</h2>
                        <table class="table card-table table-vcenter table-striped text-nowrap">
                            <thead>
                            <tr>
                                <th>{{ 'Country'|trans }}</th>
                                <th>{{ 'Language'|trans }}</th>
                                <th>{{ 'Completion'|trans}}</th>
                                <th>{{ 'Code'|trans }}</th>
                                <th>{{ 'Enable'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for lang in admin.extension_languages({'disabled': true}) %}
                                <tr>
                                    <td class="w-2">
                                        <span class="flag flag-country-{{ lang.locale|split('_')[1]|lower }}"></span>
                                    </td>
                                    <td class="w-6">{{ lang.name }}</td>
                                    <td>
                                        {% set progress = admin.extension_locale_completion({'locale_id': lang.locale})%}
                                        {% if progress > 75 %}
                                            {% set background = 'success' %}
                                        {% elseif progress > 50 %}
                                            {% set background = 'warning' %}
                                        {% else %}
                                            {% set background = 'danger' %}
                                        {% endif %}
                                        <div class="progress" style="height: 15px;">
                                            <div class="progress" style="height: 15px;">
                                                <div class="progress-bar bg-{{ background }}" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100">{{ progress }}%</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="w-1">{{ lang.locale }}</td>
                                    <td class="w-1">
                                        <a class="btn btn-icon api-link"
                                            href="{{ 'api/admin/extension/toggle_language'|link({ 'locale_id': lang.locale }) }}"
                                            data-api-reload="1">
                                            <svg class="icon">
                                                <use xlink:href="#check" />
                                            </svg>
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                            {% else %}
                                <tbody>
                                <tr>
                                    <td class="text-muted" colspan="2">{{ 'The list is empty'|trans }}
                                    </td>
                                </tr>
                                </tbody>
                            {% endfor %}
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-new" role="tabpanel">
                    {% include "partial_extensions.html.twig" with { 'type': 'translation', 'header': 'List of translations on the Extension Directory'|trans } only %}
                    <div class="card-body">
                        <h3 class="card-title">{{ 'FOSSBilling in your language'|trans }}</h3>
                        <p class="card-subtitle">{{ 'Although FOSSBilling displays in U.S. English by default, it has the capability to be used in any language. Follow instructions bellow to install new language.'|trans }}</p>
                        <div>
                            <ul>
                                <li>{{ 'Check the FOSSBilling locale repository to see if the language you are looking for is available.'}} <a target="_blank" href="https://github.com/FOSSBilling/locale">({{ 'Locale repository'|trans }})<a></li>
                                <li>{{ 'Follow the instructions on the FOSSBilling documentation to install the new language\'s translation files.'|trans }} <a target="_blank" href="https://fossbilling.org/docs/customizing-fossbilling/localization#installing-a-new-language">({{ 'Installing a new language'|trans }})<a></li>
                            </ul>
                        </div>

                        <h5>{{ 'Changing default language'|trans }}</h5>
                        <p>{{ 'Instructions for changing the default language can be found on the FOSSBilling documentation.'|trans }} <a target="_blank" href="https://fossbilling.org/docs/customizing-fossbilling/localization#changing-the-default-language">({{ 'Changing the default language'|trans }})<a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
