<div id="{{ dialog.id }}"
     class="{{ dialog.class }}"
     title="{{ dialog.strings.title }}"
     style="display:none"
     data-previous-text="{{ dialog.strings.previous_text }}"
     data-cancel-text="{{ dialog.strings.cancel_text }}">

    <div class="js-select-user"
         data-set-languages-text="{{ dialog.strings.set_languages_text }}"
         data-nonce="{{ dialog.nonce }}"
         style="width: 600px">

        <label class="add-new-translation-role-label" for="translator-existing-user"><input type="radio" id="translator-existing-user" name="user" value="existing"/> {{ dialog.strings.existing_user }}</label>

        <div class="js-existing-user-section add-new-translation-role-form" style="display: none">
            <input type="text" class="js-translation-user-select" placeholder=""/>
        </div>

        <label class="add-new-translation-role-label" for="translator-new-user"> <input type="radio" id="translator-new-user" name="user" value="new"/> {{ dialog.strings.new_user }}</label>

        <div class="js-new-user-section add-new-translation-role-form" style="display: none">
            {% include 'new-user-inputs.twig' %}
        </div>
    </div>

    <div class="js-select-languages-section add-new-translator-languages"
         data-save-translator-text="{{ dialog.strings.save_translator_text }}"
         style="width: 600px;display: none">

        <h4 data-text="{{ dialog.strings.set_lang }}"></h4>
        <div class="js-error notice notice-error otgs-notice-icon" style="display: none"></div>

        {% include 'language-pairs.twig' %}

    </div>
</div>