<div>
  <c8y-ui-action-bar-set>
    <li
      action-bar-position="right"
      ng-show="!vm.isPlatformApplicationBasePath() && vm.isAdmin()"
    >
      <button
        class="btn btn-link"
        title="{{ 'Add application' | translate }}"
        type="button"
        ng-click="vm.addWithWizard()"
      >
        <i c8y-icon="plus-circle"></i>
        {{ 'Add application' | translate }}
      </button>
    </li>
    <c8y-refresh-btn></c8y-refresh-btn>
    <li
      class="navbar-form hidden-xs"
      action-bar-position="left"
    >
      <c8y-list-display-control
        list-length="vm.applications.length"
        on-list-class-change="vm.listClass = listClass"
      ></c8y-list-display-control>
    </li>
  </c8y-ui-action-bar-set>

  <c8y-help src="/docs/standard-tenant/ecosystem/#managing-applications"></c8y-help>

  <div
    class="c8y-empty-state text-center m-t-40"
    ng-show="vm.applications.length == 0"
  >
    <h1 class="c8y-icon c8y-icon-modules c8y-icon-duocolor"></h1>
    <h3 translate>No applications found.</h3>
    <div ng-if="!vm.isPlatformApplicationBasePath() && vm.isAdmin()">
      <p translate>Start by adding your first application.</p>
      <p>
        <button
          class="btn btn-primary"
          title="{{ 'Add application' | translate }}"
          type="button"
          ng-click="vm.addWithWizard()"
          translate
        >
          Add application
        </button>
      </p>
      <p c8y-guide-docs>
        <small translate>
          Find out more in the
          <a c8y-guide-href="/docs/concepts/applications">user documentation</a>
          .
        </small>
      </p>
    </div>
  </div>

  <div
    class="card-group"
    ng-class="vm.listClass"
  >
    <div
      class="page-sticky-header hidden-xs d-flex"
      ng-if="vm.applications.length > 0"
    >
      <div class="card-block card-column-30">
        <div class="card-appicon p-l-32"></div>
        {{ 'Application' | translate }}
      </div>
      <div class="card-block card-column-70">
        <div class="card-column-30">{{ 'Type' | translate }}</div>
        <div class="card-column-30">{{ 'Path' | translate }}</div>
        <div class="card-column-40">{{ 'Description' | translate }}</div>
      </div>
      <div class="card-column-20"></div>
    </div>

    <div
      class="col-xs-12 col-sm-4 col-md-3"
      ng-if="vm.applications.length > 0 && !vm.isPlatformApplicationBasePath() && vm.isAdmin()"
    >
      <button
        class="card add-card card-hidden-list"
        title="{{ 'Add application' | translate }}"
        ng-click="vm.addWithWizard()"
      >
        <i c8y-icon="plus-circle"></i>
        <br />
        <translate>Add application</translate>
      </button>
    </div>
    <div
      class="col-xs-12 col-sm-4 col-md-3"
      ng-repeat="app in vm.applications"
    >
      <div
        class="card"
        ng-click="vm.detail(app)"
      >
        <div class="card-block text-center card-column-30">
          <div class="card-appicon">
            <c8y-app-icon app="app"></c8y-app-icon>
          </div>
          <span
            class="e2e-appCardName text-medium"
            title="{{ app | humanizeAppName }}"
            ng-bind="app | humanizeAppName"
          ></span>
        </div>
        <div class="card-block p-t-0 p-b-0 no-min-height text-center card-column-70">
          <span class="card-column-30 card-hidden-grid">
            <i
              class="text-muted"
              c8y-icon="{{ vm.iconType(app) }}"
              title="{{ app.type }}"
            ></i>
            <span class="small">{{ app.type }}</span>
          </span>
          <span class="card-column-30 card-hidden-grid">
            <small
              class="text-muted"
              ng-bind="vm.path(app)"
            ></small>
          </span>
          <div class="card-hidden-list p-b-16">
            <p
              class="text-truncate"
              title="{{ vm.path(app) }}"
            >
              <i
                class="text-muted"
                c8y-icon="{{ vm.iconType(app) }}"
                title="{{ app.type }}"
              ></i>
              <small
                class="text-muted"
                ng-bind="vm.path(app)"
              ></small>
            </p>
          </div>
          <em
            class="small card-column-40"
            ng-if="app.description"
          >
            {{ app.description | translate }}
          </em>
          <div class="m-b-16 card-hidden-list"></div>
        </div>
        <div class="card-actions m-t-0">
          <div
            class="dropdown"
            uib-dropdown
            ng-click="$event.stopPropagation()"
            ng-if="!vm.isPlatformApplicationBasePath()"
          >
            <button
              class="dropdown-toggle c8y-dropdown"
              title="{{ 'Settings' | translate }}"
              type="button"
              uib-dropdown-toggle
            >
              <i c8y-icon="ellipsis-v"></i>
            </button>
            <ul
              class="dropdown-menu dropdown-menu-right"
              uib-dropdown-menu
            >
              <li>
                <a
                  title="{{ 'Edit' | translate }}"
                  href=""
                  ng-click="vm.detail(app)"
                >
                  <i
                    class="m-r-4"
                    c8y-icon="edit"
                  ></i>
                  {{ 'Edit' | translate }}
                </a>
              </li>
              <li ng-if="!vm.isCurrentApp(app)">
                <a
                  title="{{ 'Delete' | translate }}"
                  href=""
                  ng-click="vm.onClickDelete(app)"
                >
                  <i
                    class="m-r-4"
                    c8y-icon="delete"
                  ></i>
                  {{ 'Delete' | translate }}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="card-column-20 d-flex">
          <div
            class="text-center card-block flex-item-center no-min-height p-t-0 p-b-0"
            ng-if="vm.canOpenInBrowser(app).result"
            ng-click="$event.stopPropagation()"
          >
            <a
              class="btn btn-xs btn-default"
              title="{{ 'Open' | translate }}"
              target="_blank"
              ng-if="vm.canOpenInBrowser(app).result"
              ng-href="{{ vm.getHref(app) }}"
              rel="noopener noreferrer"
            >
              <i c8y-icon="external-link"></i>
              {{ 'Open' | translate }}
            </a>
            <div class="p-t-16 card-hidden-list"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <c8y-load-more></c8y-load-more>
</div>
