<div class="list-group-item list-group-item-action p-3">
    <div class="d-flex w-100 justify-content-between">
        <h5 class="mr-auto">
            {{ delegate.displayName }}
            <a href="mailto:{{ delegate.email }}">&lsaquo;{{ delegate.email }}&rsaquo;</a>
            {% if has_write %}
                <span class="badge badge-success">{{ "delegates.write"|trans }}</span>
            {% else %}
                <span class="badge badge-info">{{ "delegates.readonly"|trans }}</span>
            {% endif %}
        </h5>
        <div class="mr-0 text-right d-lg-block d-none">
            <a href="#" data-href="{{ path('user_delegate_remove',{username: principal.username, principalProxyId: has_write ? principalProxyWrite.id : principalProxyRead.id, delegateId: delegate.id})}}" data-flavour="delegates" class="btn btn-sm btn-outline-danger ml-1 mb-1 delete-modal">⚠&nbsp;{{ "remove"|trans }}</a>
        </div>
    </div>
    <p class="mb-1">{{ "users.username"|trans }} : <code>{{ delegate.username }}</code></p>
    <small>{{ "users.uri"|trans }} : <code>{{ delegate.uri }}</code></small>
    <div class="btn-group btn-group-sm mt-3 d-flex d-lg-none" role="group">
        <a href="#" data-href="{{ path('user_delegate_remove',{username: principal.username, principalProxyId: has_write ? principalProxyWrite.id : principalProxyRead.id, delegateId: delegate.id})}}" data-flavour="delegates" class="btn btn-outline-danger flex-fill flex-shrink-1 delete-modal"><span class="d-none d-sm-inline">⚠&nbsp;</span>{{ "remove"|trans }}</a>
    </div>
</div>