<div class="card card-instance">
    <img *ngIf="instance.portal_logo" class="card-header card-img-top card-instance-img" src="{{ getLogoSrc() }}" alt="Card image cap">
    <div *ngIf="!instance.portal_logo" class="card-header card-instance-letter" [ngStyle]="{'background-color': instance.design_color }">{{ instance.label[0] }}</div>
    <div class="card-body card-instance-body">
        <h5 class="card-title">{{ instance.label }}</h5>
        <p>
            <small class="text-muted">
                <span class="font-weight-bold">Scientist manager:</span> {{ instance.scientific_manager }}
            </small>
            <br>
            <small class="text-muted">
                <span class="font-weight-bold">Instrument:</span> {{ instance.instrument }}
            </small>
            <br>
            <small class="text-muted">
                <span class="font-weight-bold">Wavelength domain:</span> {{ instance.wavelength_domain }}
            </small>
            <br>
            <small class="text-muted">
                <span class="font-weight-bold">Description:</span> {{ instance.description }}
            </small>
        </p>
    </div>
    <div class="card-footer bg-transparent text-right">
        <button *ngIf="!isInstanceAccessible()" class="btn btn-outline-danger disabled" title="You are not authorized to access this project">
            <span class="fa-solid fa-lock"></span> Private
        </button>

        <button *ngIf="isInstanceAccessible()" routerLink="/instance/{{ instance.name }}" class="btn btn-outline-primary" title="Go to instance">
            <span *ngIf="!instance.public" class="fa-solid fa-lock-open"></span> Access to the project
        </button>
    </div>
</div>