<button
  ng-class="$ctrl.triggerClass"
  ng-transclude="trigger"
  ng-click="$ctrl.showModal()"
  ng-disabled="$ctrl.disabled"/>

<div class="ws-modal-container" ng-if="$ctrl.shouldShowModal">
  <div class="ws-modal">
    <div class="ws-modal-body-container" ng-transclude="body"/>
    <div class="ws-modal-action-container"
      ng-hide="$ctrl.actionInProgress">
      <a class="button primary-action"
         ng-transclude="action"
         ng-click="$ctrl.doAction()"
         ng-disabled="$ctrl.invalid">
         {{ 'modal.default-action-string' | translate }}
      </a>
    </div>
    <div
      class="ws-modal-progress-container"
      ng-transclude="progress"
      ng-show="$ctrl.actionInProgress">
      <a class="button primary-action"
         ng-disabled="true">
         {{ 'modal.default-in-progress-string' | translate }}
      </a>
    </div>
    <div class="ws-modal-dismiss-container">
      <a ng-transclude="dismiss"
        ng-click="$ctrl.doDismiss()"
        ng-disabled="$ctrl.actionInProgress">
        {{ 'modal.default-dismiss-string' | translate }}
      </a>
    </div>
  </div>
</div>
