{% extends ac_layout %}
{% block content %}
<div class="container mt-5 px-lg-5">
    <div class="card shadow-2 h-100 mb-3">
        <div class="card-body text-start">
            <h5 class="fs-4 fw-normal mb-3">{{ _('linked_accounts') }}</h5>
            <div class="row">
                <div class="col-xl-3 col-md-6 mb-4 mb-lg-0">
                    <div class="bg-image hover-overlay ripple rounded-6 p-4" data-mdb-ripple-init
                         data-mdb-ripple-color="primary">
                        <div class="d-flex align-items-center justify-content-center justify-content-between">
                            <i class="fab fa-google fa-5x"></i>
                            <div>
                                <p class="mb-1 h2 fw-bold"> Google </p>
                                {% if google %}
                                <p class="mb-0"><small class="text-success"> Connected </small></p>
                                {% else %}
                                <p class="mb-0"><small class="text-danger"> Not Connected </small></p>
                                {% endif %}
                            </div>
                        </div>
                        <a href="{% if google %}{% url '__account_google_unauthenticate' %}  {% else %} {% url '__account_google_authenticate' %} {% endif %}">
                            <div class="mask" style="background-color: hsla(209, 62.2%, 45%, 0.08)"></div>
                        </a>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4 mb-lg-0">
                    <div class="bg-image hover-overlay ripple rounded-6 p-4" data-mdb-ripple-init
                         data-mdb-ripple-color="primary">
                        <div class="d-flex align-items-center justify-content-center justify-content-between">
                            <i class="fab fa-steam fa-5x" style="color: #072257"></i>
                            <div>
                                <p class="mb-1 h2 fw-bold"> Steam </p>
                                {% if steam %}
                                <p class="mb-0"><small class="text-success"> Connected </small></p>
                                {% else %}
                                <p class="mb-0"><small class="text-danger"> Not Connected </small></p>
                                {% endif %}
                            </div>
                        </div>
                        <a href="{% if steam %}{% url '__account_steam_unauthenticate' %}  {% else %} {% url '__account_steam_authenticate' %} {% endif %}">
                            <div class="mask" style="background-color: hsla(209, 62.2%, 45%, 0.08)"></div>
                        </a>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4 mb-lg-0">
                    <div class="bg-image hover-overlay ripple rounded-6 p-4" data-mdb-ripple-init
                         data-mdb-ripple-color="primary">
                        <div class="d-flex align-items-center justify-content-center justify-content-between">
                            <i class="fab fa-twitch fa-5x" style="color: #944cff"></i>
                            <div>
                                <p class="mb-1 h2 fw-bold"> Twitch </p>
                                {% if twitch %}
                                <p class="mb-0"><small class="text-success"> Connected </small></p>
                                {% else %}
                                <p class="mb-0"><small class="text-danger"> Not Connected </small></p>
                                {% endif %}
                            </div>
                        </div>
                        <a href="{% if twitch %}{% url '__account_twitch_unauthenticate' %}  {% else %} {% url '__account_twitch_authenticate' %} {% endif %}">
                            <div class="mask" style="background-color: hsla(209, 62.2%, 45%, 0.08)"></div>
                        </a>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4 mb-lg-0">
                    <div class="bg-image hover-overlay ripple rounded-6 p-4" data-mdb-ripple-init
                         data-mdb-ripple-color="primary">
                        <div class="d-flex align-items-center justify-content-center justify-content-between">
                            <i class="fab fa-discord fa-5x" style="color: #5865f2"></i>
                            <div>
                                <p class="mb-1 h2 fw-bold"> Discord </p>
                                {% if discord %}
                                <p class="mb-0"><small class="text-success"> Connected </small></p>
                                {% else %}
                                <p class="mb-0"><small class="text-danger"> Not Connected </small></p>
                                {% endif %}
                            </div>
                        </div>
                        <a href="{% if discord %}{% url '__account_discord_unauthenticate' %}  {% else %} {% url '__account_discord_authenticate' %} {% endif %}">
                            <div class="mask" style="background-color: hsla(209, 62.2%, 45%, 0.08)"></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}