<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"
            action="/json/invites" method="POST">{{ csrf_input }}
            <div class="modal-body">
                <div class="control-group">
                    <div id="invite-result"></div>
                    <label class="control-label" for="invitee_emails">{{ _('Emails (one on each line or comma-separated)') }}</label>
                    <div class="controls">
                        <textarea rows="2" id="invitee_emails" name="invitee_emails" placeholder="{{ _('One or more email addresses...') }}"></textarea>
                    </div>
                    {% if is_admin %}
                    <label class="control-label" id="invite_as_admin" for"invite_as_admin">{{ _('User(s) join as') }}</label>
                    <div class="controls">
                        <label class="radio">
                            <input type="radio" name="invite_as_admin" value="false" checked/>{{ _('Regular users') }}
                        </label>
                        <label class="radio">
                            <input type="radio" name="invite_as_admin" value="true"/>{{ _('Organization administrators') }}
                        </label>
                    </div>
                    {% endif %}
                </div>
                <div class="alert" id="invite_status"></div>
                {% if development_environment %}
                <div class="alert" id="dev_env_msg"></div>
                {% endif %}
                <div class="control-group">
                    <label class="control-label" for="streams_to_add">{{ _('Streams they should join') }}</label>
                    <div class="controls" 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"
                data-loading-text="{{ _('Inviting...') }}" type="submit">{{ _('Invite') }}</button>
            </div>
        </form>
    </div>
</div>
