<div class="card p-2 mb-3 mt-3 custom-alignment {{(comcolRole$ | async)?.name}}">

  <div class="card-body d-flex flex-column"
    *ngVar="group$ | async as group">

    <h2 class="h4 w-100">
      {{ roleName$ | async }}
    </h2>

    <div class="mt-2 mb-2">
      <ds-alert [type]="'alert-info'" >{{'comcol-role.edit.' + (comcolRole$ | async)?.name + '.description' | translate}}</ds-alert>
    </div>

    <div class="d-flex flex-md-row justify-content-between flex-column">
      <div class="w-100 d-flex align-items-center">
        @if (groupRD$ | async | dsHasNoValue) {
          <ds-loading></ds-loading>
        }
        @if (hasNoGroup$ | async) {
          <div>
            {{'comcol-role.edit.no-group' | translate}}
          </div>
        }
        @if (hasAnonymousGroup$ | async) {
          <div>
            {{'comcol-role.edit.' + (comcolRole$ | async)?.name + '.anonymous-group' | translate}}
          </div>
        }
        @if (hasCustomGroup$ | async) {
          <a [routerLink]="editGroupLink$ | async">
            {{ dsoNameService.getName(group) }}
          </a>
        }
      </div>

      <div class="flex-shrink-0">
        @if (hasNoGroup$ | async) {
          <button
            class="btn btn-primary create"
            (click)="create()">
            <i class="fas fa-plus" aria-hidden="true"></i> {{'comcol-role.edit.create' | translate}}
          </button>
        }
        @if (hasAnonymousGroup$ | async) {
          <button
            class="btn btn-primary restrict"
            (click)="create()">
            {{'comcol-role.edit.restrict' | translate}}
          </button>
        }
        @if (hasCustomGroup$ | async) {
          <button
            class="btn btn-danger delete"
            (click)="confirmDelete(dsoNameService.getName(group))">
            <i class="fas fa-trash" aria-hidden="true"></i> {{'comcol-role.edit.delete' | translate}}
          </button>
        }
      </div>

    </div>


  </div>

</div>
