<div>
  <div>
    <mdb-icon fas icon="globe-americas" size="md" class="grey-text pr-1" aria-hidden="true"></mdb-icon>External Access is available
  </div>
  <div *ngIf="user && (user.role === 'admin' || user.role === 'superadmin')">
    <mdb-icon fas icon="lock" size="md" class="red-text pr-1" aria-hidden="true"></mdb-icon>Restricted access to Administrators (+ some users)
  </div>
</div>

<div class="md-form">
  <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
  <input type="search" [(ngModel)]="searchText" class="ml-2" placeholder="Search text">
</div>

<div class="flexcontainer">

  <mdb-card class="qmicard" *ngFor="let s of scenarios | filter: searchText">
    <!--Card content-->
    
    <mdb-card-header>

      <!--Title-->
      <mdb-card-title>
        <h4 [innerHTML]="s.title"></h4>
        <h6><i>{{s.name}} (v{{s.version}})</i></h6>
        <div>
          <span style="margin-right: 5px;" *ngFor="let tag of s.labels" class="badge badge-secondary">{{tag}}</span>
        </div>
      </mdb-card-title>

      <div class="card-badge">
        <mdb-icon *ngIf="s.isExternal" fas icon="globe-americas" size="md" class="card-icon grey-text" aria-hidden="true" mdbTooltip="External Access available" placement="top"></mdb-icon>
        <mdb-icon *ngIf="s.isAdminOnly || s.allowedUsers.length > 0" fas icon="lock" size="md" class="card-icon red-text" aria-hidden="true" mdbTooltip="{{s.selectedAllowedUsersText}}" placement="top"></mdb-icon>
      </div>
      
    </mdb-card-header>
    
    <mdb-card-body style="position: relative;">
      
      <!--Text-->
      <mdb-card-text class="qmicardtext"> 
        <div [innerHTML]="s.description"></div>
      </mdb-card-text>

      <div *ngIf="s.supportEmails" class="support">
        <i>Support: {{s.supportEmails}}</i>
      </div>
     
    </mdb-card-body>
    <mdb-card-footer>
      <button mdbBtn mdbTooltip="Provision" type="button" style="margin-top: 5px;" block="true" size="sm" color="dark-green" (click)="openNewProvisionConfirmModal(s)" mdbWavesEffect>Provision <i class="fa fa-download"></i></button>
    </mdb-card-footer>
  </mdb-card>
</div> 
