{% load i18n %}
<div class="card text-center m-4" style="min-width: 18rem; min-height: 18rem;">
    <div class="card-body ">
        <h5 class="card-title ">{{ service_name }}</h5>
        <p class="card-text"><a href="mumble://{{ service_url }}">{{ service_url }}</a></p>
        <p class="card-text"><span class="badge {% if username != '' %}bg-success{% else %}bg-warning{% endif %}">{% if username != '' %}Active{% else %}Disabled{% endif %}</span></p>
        <p class="card-text">Username: <span class="badge bg-secondary text-end">{{ username }}</span></p>
    </div>

    <div class="card-footer">
        {% if username == "" %}
            <div class="text-center">
                <a href="{% url 'mumble:activate' %}" title="Activate" class="btn btn-warning">
                    <span class="fas fa-check fa-fw"></span>
                </a>
            </div>
        {% else %}
            <div class="text-center">
                <a href="{% url 'mumble:set_password' %}" title="Set Password" class="btn btn-warning">
                    <span class="fas fa-edit fa-fw"></span>
                </a>
                <a href="{% url 'mumble:reset_password' %}" title="Reset Password" class="btn btn-primary">
                    <span class="fas fa-sync fa-fw"></span>
                </a>
                <a href="{% url 'mumble:deactivate' %}" title="Deactivate" class="btn btn-danger">
                    <span class="fas fa-times fa-fw"></span>
                </a>
                <a href="mumble://{{ connect_url }}" class="btn btn-success" title="Connect">
                    <span class="fas fa-arrow-right fa-fw"></span>
                </a>
            </div>
        {% endif %}
    </div>
</div>
