<div id="organization-profile" data-name="organization-profile" class="settings-section">
    <form class="form-horizontal admin-realm-form org-profile-form">
        <div class="alert" id="admin-realm-deactivation-status"></div>

        <div id="org-org-profile" class="org-subsection-parent">
            <div class="subsection-header">
                <h3>{{t "Organization profile" }}
                    <a href="/help/create-your-organization-profile" target="_blank">
                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                    </a>
                </h3>
                {{> settings_save_discard_widget section_name="org-profile" }}
            </div>

            <div class="organization-settings-parent">
                <div class="input-group admin-realm">
                    <label for="id_realm_name">{{t "Organization name" }}</label>
                    <input type="text" id="id_realm_name" name="realm_name" class="admin-realm-name setting-widget prop-element"
                      autocomplete="off" data-setting-widget-type="text"
                      value="{{ realm_name }}" maxlength="40" />
                </div>
                <div class="input-group admin-realm">
                    <label for="realm_description">{{t "Organization description" }}</label>
                    <textarea id="id_realm_description" name="realm_description" class="admin-realm-description setting-widget prop-element"
                      maxlength="1000" data-setting-widget-type="text">{{ realm_description }}</textarea>
                </div>
            </div>
        </div>

        <div>{{t "Organization profile picture" }}</div>
        <div class="realm-icon-section">
            <div class="inline-block">
                <img id="realm-settings-icon" src="{{ realm_icon_url }}"/>
                <input type="file" name="realm_icon_file_input" class="notvisible"
                  id="realm_icon_file_input" value="{{t 'Upload profile picture' }}"/>
            </div>
            {{#if is_admin}}
            <div class="inline-block avatar-controls">
                <div id="realm_icon_file_input_error" class="alert text-error"></div>
                <button class="button rounded sea-green w-200 block input-size"
                  id="realm_icon_upload_button">
                    <span id="upload_icon_button_text">{{t 'Upload new profile picture' }}</span>
                    <span id="upload_icon_spinner"></span>
                </button>
                <button class="button rounded btn-danger w-200 m-t-10 block input-size"
                  id="realm_icon_delete_button">{{t 'Delete profile picture' }}</button>
            </div>
            {{/if}}
        </div>
        <a href="/login/?preview=true" target="_blank" class="button rounded sea-green w-200 block" id="id_org_profile_preview">
            {{t 'Preview organization profile' }}
            <i class="fa fa-external-link" aria-hidden="true" title="{{t 'Preview organization profile' }}"></i>
        </a>

        <div class="subsection-header">
            <h3>{{t "Organization logo" }}
                <a href="/help/create-your-organization-profile#add-a-wide-logo" target="_blank">
                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                </a>
            </h3>
            <div>
                {{#unless plan_includes_wide_organization_logo}}
                <a href="/upgrade" class="upgrade-tip" target="_blank">
                    {{upgrade_text_for_wide_organization_logo}}
                </a>
                {{/unless}}
            </div>
        </div>

        <p>{{t "A wide image for the upper left corner of the app." }}</p>
        {{> realm-logo-widget
          theme_mode="day"
          logo_url=realm_logo_url}}

        {{> realm-logo-widget
          theme_mode="night"
          logo_url=realm_night_logo_url}}

        <h3 class="light">{{t "Deactivate organization" }}</h3>
        <div class="deactivate-realm-section">
            <div class="input-group">
                <button class="button rounded btn-danger" id="deactivate_realm_button">
                    {{t 'Deactivate organization' }}
                </button>
            </div>
            {{> deactivate_realm_modal}}
        </div>
    </form>
</div>
