<div class="actions pull-right ups-main-action" ng-if="variants.isAllowedToAddVariant()">
  <button id="add-variant-btn" class="btn btn-primary" ng-click="variants.add()"><span class="pficon pficon-add"></span> Add a variant</button>
</div>

<h3>You have {{ appDetail.app.variants.length }} Variants</h3>

<div class="panel panel-default ups-panel" ng-repeat="(variantType, variantList) in variants.byType">

  <div class="panel-heading ups-has-icon ups-variant-{{ variantType }}">
    <h3 class="panel-title">{{ variants.typeEnum[variantType].name }} Variants</h3>
    <ul class="list-inline">
      <li id="message-count-{{ variantType }}"><span class="pficon pficon-messages"></span> <strong>{{ variantList.$messageCount }}</strong> Messages</li>
      <li id="device-count-{{ variantType }}"><i class="fa fa-mobile"></i> <strong>{{ variantList.$deviceCount }}</strong> Devices</li>
    </ul>

  </div>

  <div class="panel-body">
    <div class="ups-variant" ng-repeat="variant in variantList">
      <div class="ups-variant-header" ng-click="variant.$toggled = !variant.$toggled">
        <div class="actions pull-right">
          <ul class="list-inline">
            <li><a ng-click="$event.stopPropagation(); variants.editName( variant );"><span class="pficon pficon-edit"></span> Edit name</a></li>
            <li class="danger"><a ng-click="$event.stopPropagation(); variants.delete( variant );"><span class="pficon pficon-delete"></span> Remove</a></li>
            <li class="ups-drop" onclick="event.stopPropagation()">
              More
              <i class="fa fa-angle-down"></i>
              <ul class="list-unstyled">
                <li><a ng-click="$event.stopPropagation(); variants.importInstallations( variant )"><span class="pficon pficon-import"></span> Import</a></li>
                <li><a ng-click="$event.stopPropagation(); variants.exportInstallations( variant )" ng-if="variant.$deviceCount > 0"><span class="pficon pficon-export"></span> Export</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <h4><i class="fa" ng-class="{ 'fa-plus-square-o icon-plus-sign-alt': !variant.$toggled, 'fa-minus-square-o icon-minus-sign-alt': variant.$toggled }"></i> {{ variant.name }}</h4>
        <ul class="list-inline">
          <li class="warning" ng-repeat="warning in variants.getWarningsForVariant( app.warnings, variant ) | limitTo: 1">
              <span class="pficon-layered">
                <span class="pficon pficon-warning-triangle"></span>
                <span class="pficon pficon-warning-exclamation"></span>
              </span>
            Warning
          </li>
          <li ng-if="variant.$deviceCount == 0"><i class="fa fa-ban"></i> No installation yet</li>
          <li ng-if="variant.$deviceCount > 0"><span class="pficon pficon-messages"></span> <strong>{{ variant.$messageCount }}</strong> Messages</li>
          <li ng-if="variant.$deviceCount > 0"><i class="fa fa-mobile"></i> <strong>{{ variant.$deviceCount }}</strong> Devices</li>
        </ul>

      </div><!-- vaiant header -->

      <div class="ups-variant-body" ng-if="variant.$toggled">
        <ng-include src="'components/app-detail/include/variantDetail.html'" ng-controller="VariantDetailController as variantDetail"></ng-include>
      </div><!-- variant content -->

    </div><!-- variant -->


  </div><!-- panel body -->
</div><!-- panel -->
