<c8y-ui-title-set title="'Home' | translate"></c8y-ui-title-set>

<div class="card-group m-b-0">
  <div class="col-md-5 col-xs-12">
    <div class="card">
      <div class="card-header">
        <h2
          class="text-light m-t-24"
          translate
        >
          Welcome to Administration
        </h2>
      </div>
      <div class="card-block">
        <p translate>With this application you can</p>
        <ul class="list-unstyled">
          <li
            ng-show="vm.sentenceToDisplay()"
            ng-bind-html="vm.sentenceToDisplay() | translate"
          ></li>
          <li ng-show="vm.quickLinkIsVisible('Applications')">
            <a
              title="{{
                'Subscribe to applications and set up your own applications.' | translate
              }}"
              href="#/ecosystem/application/applications"
              translate
            >
              Subscribe to applications and set up your own applications.
            </a>
          </li>
          <li ng-show="vm.quickLinkIsVisible('Application settings')">
            <a
              title="{{ 'Change application settings.' | translate }}"
              href="#/applicationsettings"
              translate
            >
              Change application settings.
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-md-7 col-xs-12">
    <div class="card">
      <div class="card-header">
        <div
          class="card-title"
          translate
        >
          Quick links
        </div>
      </div>
      <div class="card-group-block interact-grid m-b-0">
        <a
          class="col-sm-4 col-xs-6 card text-center"
          title="{{ quickLink.label | translate }}"
          ng-repeat="quickLink in vm.quickLinks"
          ng-href="{{ quickLink.link }}"
          ng-show="quickLink.show"
        >
          <div class="card-block">
            <div title="{{ quickLink.label | translate }}">
              <i
                class="icon-32"
                c8y-icon="{{ quickLink.icon }}"
              ></i>
            </div>
            <p class="text-muted">
              {{ quickLink.label | translate }}
            </p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
