{% extends "_layouts/cp" %}

{% set title = glossary.id ? 'Edit glossary' : 'New glossary' %}
{% set selectedSubnavItem = 'glossaries' %}

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

{% set supportedLanguages = [
    {value: '', label: '- select language -'},
    {value: 'ar', label: 'Arabic (AR)'},
    {value: 'bg', label: 'Bulgarian (BG)'},
    {value: 'cs', label: 'Czech (CS)'},
    {value: 'da', label: 'Danish (DA)'},
    {value: 'de', label: 'German (DE)'},
    {value: 'el', label: 'Greek (EL)'},
    {value: 'en', label: 'English (EN)'},
    {value: 'es', label: 'Spanish (ES)'},
    {value: 'et', label: 'Estonian (ET)'},
    {value: 'fi', label: 'Finnish (FI)'},
    {value: 'fr', label: 'French (FR)'},
    {value: 'he', label: 'Hebrew (HE)'},
    {value: 'hu', label: 'Hungarian (HU)'},
    {value: 'id', label: 'Indonesian (ID)'},
    {value: 'it', label: 'Italian (IT)'},
    {value: 'ja', label: 'Japanese (JA)'},
    {value: 'ko', label: 'Korean (KO)'},
    {value: 'lt', label: 'Lithuanian (LT)'},
    {value: 'lv', label: 'Latvian (LV)'},
    {value: 'nb', label: 'Norwegian Bokmål (NB)'},
    {value: 'nl', label: 'Dutch (NL)'},
    {value: 'pl', label: 'Polish (PL)'},
    {value: 'pt', label: 'Portuguese (PT)'},
    {value: 'ro', label: 'Romanian (RO)'},
    {value: 'ru', label: 'Russian (RU)'},
    {value: 'sk', label: 'Slovak (SK)'},
    {value: 'sl', label: 'Slovenian (SL)'},
    {value: 'sv', label: 'Swedish (SV)'},
    {value: 'th', label: 'Thai (TH)'},
    {value: 'tr', label: 'Turkish (TR)'},
    {value: 'uk', label: 'Ukrainian (UK)'},
    {value: 'vi', label: 'Vietnamese (VI)'},
    {value: 'zh', label: 'Chinese (ZH)'}
] %}

{% import '_includes/forms.twig' as forms %}

{% block content %}
    <div class="main">
        <form method="post">
            {{ actionInput('multi-translator/glossaries/save') }}
            {{ csrfInput() }}
            {{ hiddenInput('id', glossary.id) }}

            <fieldset>
                {{ forms.textfield({
                    label: 'Name',
                    name: 'name',
                    value: glossary.name,
                    errors: glossary.getErrors('name')
                }) }}
                {{ forms.selectfield({
                    label: 'Source Language',
                    name: 'sourceLanguage',
                    value: glossary.sourceLanguage,
                    options: supportedLanguages,
                    disabled: (glossary.id is not empty),
                    errors: glossary.getErrors('sourceLanguage')
                }) }}
                {{ forms.selectfield({
                    label: 'Target Language',
                    name: 'targetLanguage',
                    value: glossary.targetLanguage,
                    options: supportedLanguages,
                    disabled: (glossary.id is not empty),
                    errors: glossary.getErrors('targetLanguage')
                }) }}
                {% if glossary.id is not empty %}
                    {{ hiddenInput('sourceLanguage', glossary.sourceLanguage) }}
                    {{ hiddenInput('targetLanguage', glossary.targetLanguage) }}
                {% endif %}
            </fieldset>

            <fieldset>
                {{ forms.editableTableField({
                    label: "Content",
                    name: "rows",
                    id: "rows",
                    cols: {
                        'source': {
                            type: 'singleline',
                            heading: "Source Text",
                            rows: 1
                        },
                        'target': {
                            type: 'singleline',
                            heading: "Target Text",
                            rows: 1
                        },
                    },
                    rows: glossary.rows,
                    allowAdd: true,
                    allowDelete: true,
                    allowReorder: true,
                    addRowLabel: 'Add a row',
                    errors: glossary.getErrors('rows')
                })|spaceless }}
            </fieldset>

            <button type="submit" class="btn submit">Save</button>
        </form>
    </div>
{% endblock %}