{% extends "base.html.j2" %}
{% block content %}
    <form action="{{ url_for(".guilds") }}" method="get">
        <div id="box">
            <div id="avatars">
                <img src="{{ client.user.display_avatar }}"
                     alt="{{ _('Bot Logo') }}"
                     width="80"
                     height="80"/>
                <span id="dots">…</span>
                <img src="{{ cdn_avatar_url(user.id, user.avatar) }}"
                     alt="{{ _('User Avatar') }}"
                     width="80"
                     height="80"/>
            </div>
            <h1>
                <a href="{{ url_for(".index") }}">{{ client.user.display_name }}</a>
            </h1>
            <h3>{{ _('Choose a server:') }}</h3>
            <select name="guild" class="black_input">
                <option>
                    &nbsp;
                </option>
                {% for guild in common_guilds %}
                    <option value="{{ guild.vanity_url_code|default(guild.id, True) }}">
                        {{ guild.name }}
                    </option>
                {% endfor %}
            </select>
            <div class="hr-sect">{{ _("OR") }}</div>
            <a class="button"
               target="_blank"
               href="https://discord.com/api/oauth2/authorize?client_id={{ client.user.id }}&permissions=8589934592&scope=bot">
                {{ _("Add the bot on your server") }}
            </a>
            <ul>
                <li>
                    {{ _("You must have") }}
                    <strong>{{ _("Manage Server") }}</strong>
                    {{ _("permission on this server to perform this action") }}
                </li>
                <li>
                    {{ _("After adding the bot,") }}
                    <a href="{{ url_for(".guilds") }}">
                        <i class="fa fa-refresh"></i>
                        <strong>{{ _("reload the page") }}</strong>
                    </a>
                </li>
            </ul>
        </div>
        <div id="buttons">
            <input type="submit" class="button" value="{{ _("Let's go!") }}"/>
        </div>
    </form>
{% endblock content %}