{% for role in roles %}
<div class="card shadow-sm mb-3">
<div class="card-body">
<h5 class="card-title">
{{ role.name }}
{% if not role.notRemovable %}
<button class="btn btn-sm btn-danger float-end" onclick="deleteRole('{{ role.id }}')">
<i class="bi bi-x"></i> <!-- Icone Bootstrap de croix -->
</button>
{% endif %}
</h5>
<p class="card-text">
<strong>Actions autorisées :</strong><br>
<ul class="list-group">
{% for action in role.rolesAuthorizedActions %}
{% if not action.deleted %}
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>{{ action.authorizedAction.name }}</span>
<button class="btn btn-sm btn-danger" onclick="deleteAction('{{ action.id }}')">
<i class="bi bi-x"></i> <!-- Icone Bootstrap de croix -->
</button>
</li>
{% endif %}
{% else %}
<span class="text-muted">Aucune action autorisée</span>
{% endfor %}
</li>
</ul>
</p>
<button class="btn btn-sm btn-primary" onclick="$('#listofActions{{ role.id }}').toggle()">
<i class="bi bi-plus"></i> Ajouter une action
</button>
<div id="listofActions{{ role.id }}" style="display:none">
{% for action in actions %}
<li class="list-group-item d-flex justify-content-between align-items-center mt-2">
<span>{{ action.name }}</span>
<a onclick="editAuthorizedAction({{ role.id }}, {{ action.id }})" class="btn btn-sm btn-success">
<i class="bi bi-plus"></i> Ajouter
</a>
</li>
{% endfor %}
</div>
</div>
</div>
{% endfor %}