<div class="card-loading-indicator-container">

  <div ng-class="{'card': !$ctrl.noCardBackground, 'with-logo': $ctrl.withLogo}">
    <div class="card-loading-indicator"
      ng-class="{'card-loading-indicator--gray': $ctrl.gray}"
      ng-style="{'min-height': $ctrl.minHeight}" ng-if="!$ctrl.show">
    </div>

    <div ng-if="$ctrl.nonBlocking || $ctrl.show"
      class="animate-if--no-height-transition card-loading-content"
      ng-style="forceMinHeight() && {'min-height': $ctrl.minHeight}">
      <div ng-show="$ctrl.show">
        <ng-transclude ng-if="$ctrl.show !== 'error'"></ng-transclude>
        <div ng-if="$ctrl.show === 'error'">
          <div class="alert alert-error error" ng-style="{'min-height': $ctrl.minHeight}">
            {{ $ctrl.errorMessage ? $ctrl.errorMessage : 'card-loading-indicator.failed-fetch' | translate}}
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
