{% 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="{{ avatar.url }}"
                     alt="{{ _("User Avatar") }}"
                     width="80"
                     height="80" />
            </div>
            <h1>
                <a href="{{ url_for(".index") }}">{{ client.user.display_name }}</a>
            </h1>
            <h2>{{ _("The discord scheduled event calendar generator") }}</h2>
            <hr>
            <a class="button" href="{{ url_for(".guilds", guild=user.id) }}">{{ _("For all your servers") }}</a>
            <div class="hr-sect">{{ _("OR") }}</div>
            <select name="guild" class="black_input" onchange="this.form.submit()">
                <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"
               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>
    </form>
{% endblock content %}