{% extends "zerver/portico_signup.html" %}

{% set PAGE_TITLE = "Contact support | Zulip" %}

{% block portico_content %}
<div class="register-account flex full-page">
    <div class="center-block new-style">
        <div class="pitch">
            <h1>{{ _('Contact support') }}</h1>
        </div>

        <form method="post" class="white-box" id="registration">
            {{ csrf_input }}

            <fieldset class="support-request">
                <div class="input-box no-validation support-form-field">
                    <label for="support_from" class="inline-block label-title">{{ _('From') }}</label>
                    <div id="support_from">{{ email }}</div>
                </div>
                <div class="input-box no-validation support-form-field">
                    <label for="support_realm" class="inline-block label-title">{{ _('Organization') }}</label>
                    <div id="support_realm">{{ realm_name }}</div>
                </div>
                <div class="input-box support-form-field">
                    <label for="request_subject" class="inline-block label-title">{{ _('Subject') }}</label>
                    <input id="request_subject" class="required" type="text" name="request_subject" maxlength="{{ MAX_SUBJECT_LENGTH }}" required />
                </div>
                <div class="input-box support-form-field">
                    <label for="request_message" class="inline-block label-title">{{ _('Message') }}</label>
                    <textarea id="request_message" name="request_message" cols="100" rows="5" required></textarea>
                </div>

                <div class="register-button-box">
                    <button class="register-button support-submit-button" type="submit">
                        <span>{{ _('Submit') }}</span>
                        <object class="loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
                    </button>
                </div>
            </fieldset>
        </form>
    </div>
</div>

{% endblock %}