<div id="custom-translation-table">
    [{$translationList}]
</div>

<script>
    (function () {
        const $table = $('custom-translation-table');
        const $newTranslationButton = $('navbar_item_new');
        const $exportButton = $('navbar_item_export');
        const $importButton = $('navbar_item_import');

        if ($newTranslationButton) {
            $newTranslationButton.writeAttribute('onclick', null);

            $newTranslationButton.on('click', function () {
                Modal.openLegacy({
                    popupType: 'custom_translation_new',
                    maxWidth:     590,
                    maxHeight:    250
                });
            });
        }

        if ($exportButton) {
            $exportButton.writeAttribute('onclick', null);

            $exportButton.on('click', function () {
                if ($table.select('[name="id[]"]:checked').length === 0) {
                    idoit.Notify.info('[{isys type="lang" ident="LC__LANGUAGE_EXPORT__SELECT_ONE"}]');
                    return;
                }

                if ($table.select('[name="id[]"]:checked').length !== 1) {
                    idoit.Notify.info('[{isys type="lang" ident="LC__LANGUAGE_EXPORT__SELECT_ONLY_ONE"}]');
                    return;
                }

                const abbr = $table.down('[name="id[]"]:checked').getValue();

                document.location.href = idoit.Router.getRoute('pro.custom-language.export', { abbreviation: abbr });
            });
        }

        if ($importButton) {
            $importButton.writeAttribute('onclick', null);

            $importButton.on('click', function () {
                Modal.openLegacy({
                    popupType:  'custom_translation_import',
                    maxWidth:      700,
                    maxHeight:     300,
                    parameters: { static: { redirectUrl: document.location.href } }
                });
            });
        }
    })();
</script>
