{% extends "_layouts/cp" %}

{% set title = 'Glossaries' %}
{% set selectedSubnavItem = 'glossaries' %}

{% set crumbs = [
    { label: 'Multi Translator', url: url('multi-translator') },
] %}

{% set settings = craft.multiTranslator.providerSettings %}
{% set provider = craft.multiTranslator.provider %}

{% block actionButton %}
    {% if settings.translationProvider == 'deepl' and provider.isConnected %}
        <a class="btn submit add icon" href="{{ url('multi-translator/glossaries/new') }}">Create new</a>
        <a class="btn submit sync icon" href="{{ url('multi-translator/glossaries/fetch') }}">Fetch from DeepL</a>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="main">
        <h2>Glossaries (DeepL)</h2>

        <p>
            Read more about this feature in
            <a href="https://support.deepl.com/hc/en-us/articles/360021634540-About-glossaries" target="_blank">
                the DeepL documentation
            </a>
        </p>
        <p>
            You can have only one glossary per language pair. So disable the glossaries you don't want to use.
            Disabling a glossary will not affect glossaries in your DeepL account, deleting it will delete it from your DeepL account as well.
        </p>

        {% if settings.translationProvider == 'deepl' and provider.isConnected %}

            {% if craft.multiTranslator.glossaries|length %}
                <table class="table data fullwidth">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Source &rightarrow; Target</th>
                        <th># entries</th>
                        <th>&nbsp;</th>
                    </tr>
                    </thead>
                    <tbody>
                        {% for glossary in craft.multiTranslator.glossaries %}
                            <tr>
                                <td>
                                    <span
                                        class="status {{ glossary.enabled ? 'live' : 'disabled' }}"
                                        role="img"
                                        aria-label="Status: {{ glossary.enabled ? 'live' : 'disabled' }}">
                                    </span>
                                    <a href="{{ url('multi-translator/glossaries/edit/'~glossary.id) }}" title="edit">

                                        {{ glossary.name }}
                                    </a>
                                </td>
                                <td>{{ glossary.sourceLanguage }} &rightarrow; {{ glossary.targetLanguage }}</td>
                                <td>{{ glossary.rows|length }}</td>
                                <td style="text-align: right">
                                    {% if glossary.enabled %}
                                        <a
                                            href="{{ actionUrl('multi-translator/glossaries/disable/', {id: glossary.id}) }}"
                                            class="btn"
                                            title="Disable this glossary"
                                        >disable</a>
                                    {% else %}<a
                                            href="{{ actionUrl('multi-translator/glossaries/enable/', {id: glossary.id}) }}"
                                            class="btn"
                                            title="Enable this glossary"
                                        >enable</a>
                                    {% endif %}
                                    <a
                                        href="{{ actionUrl('multi-translator/glossaries/delete/', {id: glossary.id}) }}"
                                        class="btn"
                                        title="Delete this glossary in your DeepL account"
                                        onclick="return confirm('Are you sure you want to delete this? The glossary will be deleted from your DeepL account as well.')"
                                    >delete</a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p>No glossaries found, create a new</p>
            {% endif %}


        {% else %}
            <p>Only available with active DeepL account</p>
        {% endif %}
    </div>
{% endblock %}