<import-sjs
  from="./index.sjs"
  name="utils" />

<ant-popup
  className="ant-modal {{ className || '' }}"
  style="{{ style || '' }}"
  maskClassName="{{ maskClassName }}"
  maskStyle="{{ maskStyle }}"
  visible="{{ visible }}"
  duration="{{ duration }}"
  position="center"
  animation="{{ animation }}"
  zIndex="{{ zIndex }}"
  destroyOnClose="{{ destroyOnClose }}"
  onClose="onMaskClose">
  <slot slot="content">
    <view
      class="ant-modal-body {{ bodyClassName || '' }}"
      style="{{ bodyStyle || '' }}">
      <slot name="header" />
      <slot name="title">
        <view
          a:if="{{ title }}"
          class="ant-modal-body-title">
          {{ title }}
        </view>
      </slot>

      <slot name="content">
        <view
          a:if="{{ content }}"
          class="ant-modal-body-content">
          {{ content }}
        </view>
      </slot>
      <slot name="footer">
        <view
          a:if="{{ type === 'focus' }}"
          class="ant-modal-body-footer-focus">
          <ant-button
            type="primary"
            className="ant-modal-body-footer-focus-primary"
            style="{{ primaryButtonStyle || '' }}"
            onTap="onPrimaryButtonTap">
            {{ primaryButtonText }}
          </ant-button>
          <view
            a:if="{{ secondaryButtonText }}"
            class="ant-modal-body-footer-focus-secondary"
            style="{{ secondaryButtonStyle || '' }}"
            onTap="onSecondaryButtonTap">
            {{ secondaryButtonText }}
          </view>
          <view
            a:if="{{ cancelButtonText }}"
            class="ant-modal-body-footer-focus-cancel"
            style="{{ cancelButtonStyle || '' }}"
            onTap="onCancelButtonTap">
            {{ cancelButtonText }}
          </view>
        </view>
        <view
          a:elif="{{ utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'horizontal' }}"
          class="ant-modal-body-footer-horizontal">
          <view
            a:if="{{ cancelButtonText }}"
            class="ant-modal-body-footer-horizontal-cancel"
            style="{{ cancelButtonStyle || '' }}"
            onTap="onCancelButtonTap">
            {{ cancelButtonText }}
          </view>
          <view
            a:if="{{ secondaryButtonText }}"
            class="ant-modal-body-footer-horizontal-secondary"
            style="{{ secondaryButtonStyle || '' }}"
            onTap="onSecondaryButtonTap">
            {{ secondaryButtonText }}
          </view>
          <view
            a:if="{{ primaryButtonText }}"
            class="ant-modal-body-footer-horizontal-primary"
            style="{{ primaryButtonStyle || '' }}"
            onTap="onPrimaryButtonTap">
            {{ primaryButtonText }}
          </view>
        </view>
        <view
          a:elif="{{ utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'vertical' }}"
          class="ant-modal-body-footer-vertical">
          <view
            a:if="{{ primaryButtonText }}"
            class="ant-modal-body-footer-vertical-primary"
            style="{{ primaryButtonStyle || '' }}"
            onTap="onPrimaryButtonTap">
            {{ primaryButtonText }}
          </view>
          <view
            a:if="{{ secondaryButtonText }}"
            class="ant-modal-body-footer-vertical-secondary"
            style="{{ secondaryButtonStyle || '' }}"
            onTap="onSecondaryButtonTap">
            {{ secondaryButtonText }}
          </view>
          <view
            a:if="{{ cancelButtonText }}"
            class="ant-modal-body-footer-vertical-cancel"
            style="{{ cancelButtonStyle || '' }}"
            onTap="onCancelButtonTap">
            {{ cancelButtonText }}
          </view>
        </view>
      </slot>
    </view>
  </slot>

  <ant-icon
    a:if="{{ type === 'focus' && closable }}"
    type="CloseOutline"
    onTap="onClose"
    className="ant-modal-close" />
</ant-popup>