<div id="panels">
    <div data-process="notifications" class="alert alert-info">
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}">&times;</span>
        <div data-step="1">
            {% trans %}Zulip needs your permission to
            <a class="request-desktop-notifications alert-link">enable desktop notifications.</a>
            {% endtrans %}
        </div>
        <div data-step="2" style="display: none">
            {{ _('We strongly recommend enabling desktop notifications. They help Zulip keep your team connected.') }}
            <span class="buttons">
                <a class="alert-link request-desktop-notifications">{{ _('Enable notifications') }}</a>
                &bull;
                <a class="alert-link exit">{{ _('Ask me later') }}</a>
                &bull;
                <a class="alert-link reject-notifications">{{ _('Never ask on this computer') }}</a>
            </span>
        </div>
    </div>
    <div data-process="email-server" class="alert alert-info red">
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}">&times;</span>
        <div data-step="1">
            {% trans %}Zulip needs to send email to confirm users' addresses and send notifications.{% endtrans %}
            <a class="alert-link" href="https://zulip.readthedocs.io/en/latest/production/email.html" target="_blank">
                {% trans %}See how to configure email.{% endtrans %}
            </a>
        </div>
    </div>
    <div data-process="profile-incomplete" class="alert alert-info">
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}">&times;</span>
        <div data-step="2">
            {% trans %}
            Complete the
            <a class="alert-link" href="#organization/organization-profile">
                organization profile
            </a> to brand and explain the purpose of this Zulip organization.
            {% endtrans %}
        </div>
    </div>
    <div data-process="insecure-desktop-app" class="alert alert-info red">
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}">&times;</span>
        <div data-step="1">
            {% trans %}
            You are using an old version of the Zulip desktop app with known security bugs.
            <a class="alert-link" href="https://zulipchat.com/apps" target="_blank">
                Download the latest version.
            </a>
            {% endtrans %}
        </div>
    </div>
    <div data-process="bankruptcy" class="alert alert-info brankruptcy">
        <span class="close" data-dismiss="alert" aria-label="{{ _('Close') }}">&times;</span>
        <div data-step="1">
            {% trans count=page_params.unread_msgs.count %}
            Welcome back!  You have <span class="bankruptcy_unread_count">{{ count }}</span> unread messages.  Do you want to mark them all as read?
            <span class="buttons">
                <a class="alert-link accept-bankruptcy">Yes, please!</a>
                &bull;
                <a class="alert-link exit">No, I'll catch up.</a>
            </span>
            {% endtrans %}
        </div>
    </div>
    <div class="alert alert-info bankruptcy-loader" style="display: none;">
        {% trans %}
        Marking all messages as read…
        {% endtrans %}
    </div>
</div>
