{% extends "zerver/portico_signup.html" %}
{% set entrypoint = "slack-import" %}

{% block title %}
<title>{{ _("Import from Slack") }} | Zulip</title>
{% endblock %}

{% block portico_content %}
<div class="app register-page">
    <div class="app-main register-page-container new-style flex full-page center">
        <div class="register-form left" id="realm-creation-form-slack-import">
            <div class="lead">
                <h1 class="get-started">{{ _("Import from Slack") }}</h1>
            </div>
            <div class="white-box">
                {% if poll_for_import_completion %}
                {% if import_poll_error_message %}
                <p class="text-error">{{ import_poll_error_message }}</p>
                {% endif %}
                <input type='hidden' name='key' value='{{ key }}' id="auth_key_for_polling" />
                <div class="input-box">
                    <label for="uploaded-file-info">{{ _("Import progress") }}</label>
                    <div id="slack-import-poll-status" class="not-editable-realm-field">
                        {{ _("Checking import status…") }}
                    </div>
                    <div id="slack-import-unexpected-failure" class="not-editable-realm-field hidden">
                        <p class="text-error">
                            {% trans %}
                            An unexpected error occurred during the import process. Please follow the instructions for the
                            <a href="https://zulip.com/help/import-from-slack#import-your-data-into-zulip">
                                Zulip Cloud (via support) import process
                            </a> to complete your import.
                            {% endtrans %}
                        </p>
                    </div>
                </div>
                {% else %}
                {% if slack_import_error %}
                <div class="input-box">
                    <p id="slack-import-error" class="help-inline text-error">{{ slack_import_error }}</p>
                </div>
                <div class="input-box">
                    <button type="button" id="slack-import-start-over" class="register-button">
                        {{ _("Start over") }}
                    </button>
                </div>
                {% else %}
                <form method="post" class="form-inline" action="{{ url('import_realm_from_slack') }}">
                    {{ csrf_input }}
                    <div class="input-box no-validation">
                        <input type='hidden' name='key' value='{{ key }}' id="auth_key_for_file_upload"/>
                    </div>
                    <div class="input-box slack-import-extra-info">
                        <div class="not-editable-realm-field">
                            {% trans %}
                            Follow <a href="https://zulip.com/help//import-from-slack#export-your-slack-data:~:text=Export%20user%20data%20and%20custom%20emoji" rel="noopener noreferrer" target="_blank">these instructions</a> to obtain a <strong>Bot User OAuth Token</strong>.
                            {% endtrans %}
                        </div>
                    </div>
                    <div class="input-box">
                        <label for="slack_access_token" class="inline-block label-title">{{ _('Slack bot user OAuth token') }}</label>
                        <textarea id="slack-access-token"
                          placeholder="xoxb-…"
                          rows="3"
                          maxlength="100" name="slack_access_token">
                            {%- if slack_access_token -%}
                                {{ slack_access_token }}
                            {%- endif -%}
                        </textarea>
                        {% if slack_access_token_validation_error %}
                        <p id="slack-access-token-validation-error" class="help-inline text-error">{{ slack_access_token_validation_error }}</p>
                        {% endif %}
                    </div>
                    <div class="input-box">
                        <button type="submit" class="register-button" {% if slack_access_token %} id="update-slack-access-token"{% endif %}>
                            {% if slack_access_token %}
                            {{ _("Update") }}
                            {% else %}
                            {{ _("Submit") }}
                            {% endif %}
                        </button>
                    </div>
                </form>
                {% if slack_access_token %}
                <div class="input-box{% if uploaded_import_file_name %} hidden{% else %}{% endif %}" id="slack-import-dashboard-wrapper">
                    <label for="slack-import-dashboard" class="inline-block label-title">{{ _('Upload your Slack export file') }}</label>
                    <div class="not-editable-realm-field">
                        {% trans %}
                        Follow <a href="https://zulip.com/help/import-from-slack#export-your-slack-data" target="_blank" rel="noopener noreferrer">these instructions</a> to obtain your Slack message history export.
                        {% endtrans %}
                        {% include "zerver/slack_import_file_upload_instruction.html" %}
                    </div>
                    <button class="slack-import-upload-file full-width">{{ _('Start upload') }}</button>
                </div>
                <form id="slack-import-start-upload-wrapper" method="post" class="form-inline {% if uploaded_import_file_name %}{% else %}hidden{% endif %}" action="{{ url('import_realm_from_slack') }}">
                    {{ csrf_input }}
                    <div class="input-box no-validation">
                        <input type='hidden' name='key' value='{{ key }}' />
                        <input type='hidden' name='start_slack_import' value="true" />
                    </div>
                    <div class="input-box">
                        <label for="uploaded-file-info">{{ _("Uploaded export file") }}</label>
                        <div class="not-editable-realm-field">
                            <span id="slack-import-uploaded-file-name">{{ uploaded_import_file_name }}</span>
                            &nbsp;<a href="#" type="button" class="slack-import-upload-file">Upload a different file</a>
                        </div>
                        <p id="slack-import-file-upload-error" class="help-inline text-error">{{ invalid_file_error_message }}</p>
                    </div>
                    <div class="input-group input-box" id="email-address-visibility-select-wrapper">
                        <label for="email-address-visibility-select">
                            {{ _("Who will be allowed to see other users' email addresses?") }}
                            <br />
                            <span id="email-address-visibility-help-text">
                                {% trans %}
                                Users can <a href="https://zulip.com/help/configure-email-visibility" target="_blank">change</a> their email visibility configuration when they log in.
                                {% endtrans %}
                            </span>
                        </label>
                        <select id="email-address-visibility-select" name="email_address_visibility" class="required">
                            {% for value, label in email_address_visibility_options %}
                            <option value="{{ value }}" {% if value == email_address_visibility_default %}selected{% endif %}>{{ _(label) }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="input-box">
                        <button type="submit" class="register-button"{% if invalid_file_error_message %} disabled{% endif %}>
                            {{ _("Start import") }}
                        </button>
                    </div>
                </form>
                {% endif %}
                {% endif %}
                {% endif %}
            </div>
            {% if poll_for_import_completion %}
            <div id="bottom-hint-slack-import-page">
                <span class="bottom-text">
                    {% trans %}
                    Feel free to step away. You can always come back to this page
                    <br />
                    by clicking the <b>Complete registration</b> button in your email.
                    {% endtrans %}
                </span>
            </div>
            {% elif not slack_import_error %}
            <form method="post" class="hidden" id="cancel-slack-import-form" action="{{ url('import_realm_from_slack') }}">
                {{ csrf_input }}
                <input type='hidden' name='key' value="{{ key }}" />
                <input type='hidden' name='cancel_import' value='true'/>
            </form>
            <div class="bottom-text">
                {% trans %}
                Or <span id="cancel-slack-import" tabindex="0">create organization</span> without importing data.
                {% endtrans %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
<!-- We don't want our CSS to override styles provided by uppy, hence we keep it outside
the `.app` tree. -->
<div id="slack-import-dashboard" data-max-file-size="{{max_file_size}}"></div>
{% endblock %}