<div id="invite-user" class="overlay flex new-style" tabindex="-1" role="dialog" data-overlay="invite"
  aria-labelledby="invite-user-label" aria-hidden="true">
    <div class="overlay-content modal-bg">
        <div class="modal-header">
            <button type="button" class="exit" aria-label="{{ _('Close') }}"><span aria-hidden="true">&times;</span></button>
            <h3 id="invite-user-label">{% trans %}Invite users to Zulip{% endtrans %}</h3>
        </div>
        <form id="invite_user_form" class="form-horizontal">{{ csrf_input }}
            <div class="modal-body" data-simplebar data-simplebar-auto-hide="false">
                <div class="alert" id="invite_status"></div>
                {% if development_environment %}
                <div class="alert" id="dev_env_msg"></div>
                {% endif %}
                <div class="input-group">
                    <label for="invitee_emails">{{ _('Emails (one on each line or comma-separated)') }}</label>
                    <div>
                        <textarea rows="2" id="invitee_emails" name="invitee_emails" placeholder="{{ _('One or more email addresses...') }}"></textarea>
                        {% if is_admin %}
                        <div id="invite-method-choice">
                            {{ _('or') }} <a id="generate_multiuse_invite_button">{{ _('Generate invite link') }}</a>
                        </div>
                        <div id="multiuse_radio_section">
                            <label class="checkbox display-block" for="generate_multiuse_invite_radio">
                                <input type="checkbox" name="generate_multiuse_invite_radio" id="generate_multiuse_invite_radio"/>
                                <span></span>
                                {{ _('Generate invite link') }}
                            </label>
                        </div>
                        {% endif %}
                    </div>
                </div>
                <div class="input-group">
                    <label for="invite_as">{{ _('User(s) join as') }}</label>
                    <div>
                        <select id="invite_as">
                            <option name="invite_as" value="{{ invite_as.MEMBER }}">{{ _('Members') }}</option>
                            {% if is_admin %}
                            <option name="invite_as" value="{{ invite_as.REALM_ADMIN }}">{{ _('Organization administrators') }}</option>
                            {% endif %}
                            <option name="invite_as" value="{{ invite_as.GUEST_USER }}">{{ _('Guests') }}</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label>{{ _('Streams they should join') }}</label>
                    <div id="streams_to_add"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="button exit small rounded" data-dismiss="modal">{{ _('Cancel') }}</button>
                <button id="submit-invitation" class="button small rounded sea-green" type="button"
                  data-loading-text="{{ _('Inviting...') }}">{{ _('Invite') }}</button>
                <div class="alert" id="multiuse_invite_status"></div>
            </div>
        </form>
    </div>
</div>
