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

{% import 'macro_functions.html.twig' as mf %}

{% block meta_title %}{{ 'Extensions'|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">{{ 'Extensions'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-store" data-bs-toggle="tab">{{ 'Extension Directory'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-about" data-bs-toggle="tab">{{ 'Information'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-hooks" data-bs-toggle="tab">{{ 'Hooks'|trans }}</a>
            </li>
        </ul>

        <div class="card">
            <div class="tab-content">

                <div class="tab-pane fade active show" id="tab-index" role="tabpanel">
                    <div class="card-header">
                        <div>
                            <h3 class="card-title">{{ 'FOSSBilling extensions'|trans }}</h3>
                            <p class="card-subtitle">{{ 'Activate or deactivate extensions'|trans }}</p>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table card-table table-vcenter table-striped sortable">
                            <thead>
                                <tr>
                                    <th class="no-sort"></th>
                                    <th>{{ 'Extension'|trans }}</th>
                                    <th>{{ 'Description'|trans }}</th>
                                    <th class="w-1"></th>
                                    <th class="w-1"></th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for ext in admin.extension_get_list %}
                                <tr>
                                    <td>
                                        {% set icon_filename = ext.icon_url|split('/')|last %}
                                        {% if (icon_filename != 'cog.svg') and (icon_filename|split('.')|last == 'svg' and ext.icon_path) %}
                                            <div class="text-primary" style="width:24px;height:24px;">
                                                {{ source (ext.icon_path, ignore_missing = true) }}
                                            </div>
                                        {% else %}
                                            <img src="{{ ext.icon_url|default('assets/icons/cog.svg') }}" alt="{{ ext.name }}" style="width:32px;height:32px;">
                                        {% endif %}
                                    </td>
                                    <td>
                                        <strong>{{ ext.name }}</strong> {{ ext.version }}<br>
                                        <span>by <a href="{{ ext.author_url }}" target="_blank">{{ ext.author }}</a></span>
                                    </td>
                                    <td>
                                        {{ ext.description }}<br>
                                        <a href="{{ ext.project_url }}" target="_blank" data-bs-toggle="tooltip" data-bs-title="Project details">{{ 'Learn more'|trans }}</a>
                                    </td>
                                    <td>
                                        {% if ext.type == 'mod' %}
                                            {% if ext.status == 'installed' %}
                                                <a class="btn btn-icon api-link"
                                                   href="{{ 'api/admin/extension/deactivate'|link({ 'type': ext.type, 'id': ext.id, 'CSRFToken': CSRFToken }) }}"
                                                   data-api-type="danger"
                                                   data-api-confirm-btn="Deactivate"
                                                   data-api-confirm="{{ 'Are you sure?'|trans }}"
                                                   data-api-reload="Module was deactivated"
                                                   data-bs-toggle="tooltip" data-bs-title="{{ 'Deactivate'|trans }}">
                                                    <svg class="icon">
                                                        <use xlink:href="#close" />
                                                    </svg>
                                                </a>
                                            {% else %}
                                                <a class="btn btn-icon api-link"
                                                   href="{{ 'api/admin/extension/activate'|link({ 'type': ext.type, 'id': ext.id, 'CSRFToken': CSRFToken }) }}"
                                                   data-api-confirm="{{ 'Are you sure?'|trans }}"
                                                   data-api-confirm-btn="Activate"
                                                   data-api-jsonp="onAfterModuleActivated"
                                                   data-bs-toggle="tooltip" data-bs-title="{{ 'Activate'|trans }}">
                                                    <svg class="icon">
                                                        <use xlink:href="#play" />
                                                    </svg>
                                                </a>
                                            {% endif %}
                                        {% else %}
                                            &nbsp;
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if ext.has_settings %}
                                            <a class="btn btn-icon" href="{{ 'extension/settings'|alink }}/{{ ext.id }}"
                                               data-bs-toggle="tooltip" data-bs-title="{{ 'Settings'|trans }}">
                                                <svg class="icon">
                                                    <use xlink:href="#cog" />
                                                </svg>
                                            </a>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td class="text-muted" colspan="4">{{ 'The list is empty'|trans }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-store" role="tabpanel">
                    <div class="card-header">
                        <div>
                            <h3 class="card-title">{{ 'Modules on the extension directory'|trans }}</h3>
                            <p class="card-subtitle">{{ 'These are all modules available for installation from the <a href="https://extensions.fossbilling.org/">extension directory</a> at the click of a button.'|trans|raw }}</p>
                        </div>
                    </div>
                    {{ include('partial_extensions.html.twig') }}
                </div>

                <div class="tab-pane fade" id="tab-about" role="tabpanel">
                    <div class="card-header">
                        <div>
                            <h3 class="card-title">{{ 'Extending FOSSBilling'|trans }}</h3>
                            <p class="card-subtitle">{{ 'FOSSBilling gives developers all the capabilities to customize, integrate & extend the core system into your own website & applications.'|trans }}</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3>{{ 'More extensions'|trans }}</h3>
                        <p>{{ 'If you cannot find the extensions you are looking for in the admin area, please visit the extension directory at <a href="https://extensions.fossbilling.org" target="_blank">https://extensions.fossbilling.org</a>.'|trans|raw }}</p>

                        <h3>{{ 'How to create a new extension'|trans }}</h3>
                        <ul>
                            <li>{{ 'Create a <a href="https://github.com/signup/free" target="_blank">GitHub</a> account for free.'|trans|raw }}</li>
                            <li>{{ 'Create a new public repository dedicated to the extension only.'|trans }}</li>
                            <li>{{ 'The repository must have a valid manifest file for your extension in the JSON format. For more information, please refer <a href="https://github.com/FOSSBilling/example-extension" target="_blank">to our example extension</a>.'|trans|raw }}</li> {# @TODO: Replace with some actual form of documentation #}
                            <li>{{ 'Create a pull request <a href="https://github.com/FOSSBilling/extension-directory">here</a>.'|trans|raw }}</li>
                            <li>{{ 'The FOSSBilling team will review your extension and contact you if there are any issues.'|trans }}</li>
                            <li>{{ 'Registered extensions will then appear on the extension directory.'|trans }}</li>
                        </ul>

                        <h3>{{ 'Supported extension types'|trans }}</h3>
                        <ul>
                            <li>{{ 'Payment gateways'|trans }}</li>
                            <li>{{ 'Server managers'|trans }}</li>
                            <li>{{ 'Domain registrars'|trans }}</li>
                            <li>{{ 'Client area themes'|trans }}</li>
                            <li>{{ 'Admin area themes'|trans }}</li>
                            <li>{{ 'Translations for client and admin areas'|trans }}</li>
                            <li>{{ 'Event hooks - Hooks can be injected into the process, change its behaviour, stop executing actions'|trans }}</li>
                            <li>{{ 'API module - External program which uses FOSSBilling API'|trans }}</li>
                        </ul>

                        <h3>{{ 'Extension support'|trans }}</h3>
                        <p>{{ 'Contact extensions developers directly for support. You can find issue tracker on the extension directory.'|trans }}</p>
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-hooks" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table card-table table-vcenter table-striped text-nowrap">
                            <thead>
                            <tr>
                                <th>{{ 'Extension'|trans }}</th>
                                <th>{{ 'Hook'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for hook in admin.hook_get_list({ 'per_page': 90 }).list %}
                                <tr>
                                    <td>
                                        {{ hook.rel_id|capitalize}}
                                    </td>
                                    <td>
                                        <code>{{ hook.event }}</code>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        function onAfterUpdate(result) {}
        function onAfterModuleActivated(result) {
            if(result.redirect && result.type === 'mod') {
                bb.redirect("{{ ''|alink }}/" + result.id);
            } else if (result.has_settings) {
                bb.redirect("{{ 'extension/settings'|alink }}/" + result.id);
            } else {
                bb.reload();
            }
        }
    </script>
{% endblock %}
