{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}

{% block page_title %}{% translate "Services Management" %}{% endblock page_title %}
{% block extra_css %}{% endblock extra_css %}

{% block header_nav_brand %}{% translate "Available Services" %}{% endblock header_nav_brand %}


{% block content %}
    <div class="d-flex py-2 pt-0 bd-highlight justify-content-center flex-wrap">
        {% for svc in service_ctrls %}
            {{ svc }}
        {% endfor %}
    </div>

    <div class="w-100 text-center">
        <h4>Legend</h4>
        <div class="d-inline-flex bd-highlight justify-content-center flex-wrap">
            <div class="d-inline-flex m-3">
                <a title="Activate" class="btn btn-warning">
                    <span class="fas fa-check fa-fw"></span>
                </a>
                <p class="m-2 p-0 align-self-center">
                    {% translate "Click to activate the service for your user." %}
                </p>
            </div>

            <div class="d-inline-flex m-3">
                <a title="Set Password" class="btn btn-warning">
                    <span class="fas fa-edit fa-fw"></span>
                </a>
                <p class="m-2 p-0 align-self-center">
                    {% translate "Click to manually set your password." %}
                </p>
            </div>

            <div class="d-inline-flex m-3">
                <a title="Reset Password" class="btn btn-primary">
                    <span class="fas fa-sync fa-fw"></span>
                </a>
                <p class="m-2 p-0 align-self-center">
                    {% translate "Click to randomly generate your password." %}
                </p>
            </div>

            <div class="d-inline-flex m-3">
                <a title="Deactivate" class="btn btn-danger">
                    <span class="fas fa-times fa-fw"></span>
                </a>
                <p class="m-2 p-0 align-self-center">
                    {% translate "Click to deactivate the service for your user" %}
                </p>
            </div>
        </div>

        <p class="m-2 p-0 align-self-center">
            {% translate "Some services provide different options. Hover over the buttons to see more." %}
        </p>
    </div>
{% endblock content %}
