instance-card.component.html

<div class="card">
    <div class="card-body">
        <h5 class="card-title font-weight-bold">{{ instance.label }}</h5>
        <ul class="card-text list-unstyled pl-4">
            <li>Dataset families: <span class="badge badge-secondary">{{ instance.nb_dataset_families }}</span></li>
            <li>Datasets: <span class="badge badge-secondary">{{ instance.nb_datasets }}</span></li>
            <li><a target="blank" href="{{instance.client_url}}">{{instance.client_url}}</a></li>
        </ul>
    </div>
    <div class="card-footer bg-transparent text-right">
        <a routerLink="/configure-instance/{{instance.name}}" class="btn btn-outline-primary" title="Configure this instance">
            <span class="fas fa-cog"></span>
        </a>
        &nbsp;
        <a title="Edit this instance" routerLink="/admin/edit-instance/{{instance.name}}" class="btn btn-outline-primary">
            <span class="fas fa-edit"></span>
        </a>
        &nbsp;
        <app-delete-btn
            [type]="'instance'"
            [label]="instance.label"
            (confirm)="deleteInstance.emit(instance)">
        </app-delete-btn>
    </div>
</div>