<section style="margin-top: 220px; min-height: 600px;" class="text-center">
  <div class="container">
    <!--<img class="rounded float-right" src="https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png" style="width: 300px;">-->
    <h1><div>Qlik Machine Images (QMI)</div><div>Cloud</div></h1>
    <p class="lead text-muted">Introducing a new way to launch scenarios based on Qlik software in the Cloud.</p>
    <p *ngIf="!user">
      <a mdbBtn href="/login" color="dark-green" mdbWavesEffect>Login <mdb-icon fas icon="sign-in-alt"></mdb-icon></a>    </p>
    <p *ngIf="user">
      <a mdbBtn color="elegant" routerLink="/provisions">Your Provisions <mdb-icon fas icon="angle-right"></mdb-icon></a>
    </p>

    <div *ngIf="stats" class="row" style="margin-top: 100px;">
      <div class="col-md-4" style="text-align: left;">
          <h1># Users</h1>
          <p class="kpiline">Registered: <span class="kpilabel">{{stats.users.total}}</span></p>
          <p class="kpiline">Active now: <span class="kpilabel">{{stats.users.activeNow}}</span></p>
          <p class="kpiline">Active last 7days: <span class="kpilabel">{{stats.users.active7days}}</span></p>
          <p class="kpiline">Active last 30days: <span class="kpilabel">{{stats.users.active30days}}</span></p>
      </div>

      <div class="col-md-4" style="text-align: left;">
        <h1># Provisions</h1>
        <p class="kpiline">Available scenarios: <span class="kpilabel">{{stats.scenarios.total}}</span></p>
        <p class="kpiline">Active now: <span class="kpilabel">{{stats.provisions.active}}</span> ( {{stats.provisions.running}} with running VMS )</p>
        <p class="kpiline">Total month-to-date: <span class="kpilabel">{{stats.provisions.totalCurrentMonthPeriod}}</span></p>
        <p class="kpiline">Total last month (same period): <span class="kpilabel">{{stats.provisions.totalLastMonthPerdiod}}</span></p>
      </div>

      <div class="col-md-4" style="text-align: left;">
        <h1># Virtual Machines</h1>
        <div *ngIf="vms">
          <p class="kpiline">Active now: <span class="kpilabel">{{vms.total}}</span></p>
          <p class="kpiline">By region:</p>
          <ul>
            <li style="font-size: 14px;">East US: <span class="kpilabel">{{vms.locations.eastus}}</span></li>
            <li style="font-size: 14px;">West Europe: <span class="kpilabel">{{vms.locations.westeurope}}</span></li>
            <li style="font-size: 14px;">Southeast Asia: <span class="kpilabel">{{vms.locations.southeastasia}}</span></li>
          </ul>
          <p class="kpiline">By OS type:</p>
          <ul>
            <li style="font-size: 14px;">Windows: <span class="kpilabel">{{vms.types.Windows}}</span></li>
            <li style="font-size: 14px;">Linux: <span class="kpilabel">{{vms.types.Linux}}</span></li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</section>