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

{% block portico_content %}
<div class="register-account flex full-page new-style" id="choose_email">
    <div class="lead">
        {% trans %}
        <h1 class="get-started">Select account</h1>
        {% endtrans %}
    </div>

    <div class="white-box">
        <form method="post" class="form-horizontal" action="/complete/{{ backend }}/">
            <div class="choose-email-box">
                <input type="hidden" name="email" value="{{ primary_email }}" />
                {% if avatar_urls[primary_email] %}
                <img src="{{ avatar_urls[primary_email] }}" alt=""/>
                {% else %}
                <i class="fa fa-plus" aria-hidden="true"></i>
                {% endif %}
                <div>
                    <p class="email">
                        {{ primary_email }}
                    </p>
                    <p>
                        GitHub primary
                        {% if avatar_urls[primary_email] %}
                        - Log in
                        {% else %}
                        - Create new account
                        {% endif %}
                    </p>
                </div>
            </div>
        </form>
        {% for email in verified_non_primary_emails %}
        <form method="post" class="form-horizontal" action="/complete/{{ backend }}/">
            <div class="choose-email-box">
                <input type="hidden" name="email" value="{{ email }}" />
                {% if avatar_urls[email] %}
                <img src="{{ avatar_urls[email] }}" alt="" class="no-drag"/>
                {% else %}
                <i class="fa fa-plus" aria-hidden="true"></i>
                {% endif %}
                <div>
                    <p class="email">
                        {{ email }}
                    </p>
                    <p>
                        {% if avatar_urls[email] %}
                        Log in
                        {% else %}
                        Create new account
                        {% endif %}
                    </p>
                </div>
            </div>
        </form>
        {% endfor %}
    </div>
    <p class="bottom-text">
        Only verified GitHub email addresses are listed.
    </p>
</div>
{% endblock %}