<div class="modal-content bgp-modal-no-scroll" ng-controller="GiftModalController as ctrl">
  <div class="modal-header justify-content-start">
    <div ng-include="'/o/bgp-theme/angular/partials/modal-header.html'"></div>
  </div>

  <div class="modal-body">
    <div class="row">
      <div class="col-sm-5">
        <div class="mbl" ng-bind-html="'transfer-third-party-gift-description-modal' | t"></div>

        <div id="form">
          <form id="giftForm"
            name="giftForm"
            autocomplete="off"
            class="form form-vertical"
            role="form"
            novalidate>

            <div class="form-group mbm">
              <label>{{'common-gift-destinatary-label' | t}}</label>

              <input class="form-control field-required"
                type="text"
                placeholder="{{data.nameBeneficiary}}"
                maxlength="64"
                ng-model="ctrl.beneficiary"
                ng-change="ctrl.draw()" />
            </div>

            <div class="form-group mbm">
              <label>{{'message-text' | t}}</label>

              <textarea class="form-control field-required resizable-none"
                placeholder="{{'message-text' | t}}"
                row="2"
                col="3"
                maxlength="140"
                ng-model="ctrl.message"
                ng-change="ctrl.draw(); ctrl.calculateRemainingChars()"></textarea>

              <div ng-bind="ctrl.remainingChars | number"
                ng-class="{'text-color-gray-variation-2': ctrl.remainingChars > 75,
                  'text-color-brand-yellow': ctrl.remainingChars <= 75 && ctrl.remainingChars > 0,
                  'text-color-brand-red': ctrl.remainingChars == 0}">
              </div>
            </div>

            <div class="form-group mbm">
              <label>{{'common-gift-from-label' | t}}</label>

              <input class="form-control field-required"
                type="text"
                placeholder="{{'common-gift-author-placeholder' | t}}"
                maxlength="25"
                ng-model="ctrl.author"
                ng-change="ctrl.draw()" />
            </div>
          </form>
        </div>
      </div>

      <div class="col-sm-7">
        <div id="giftcard-preview-wrapper">
          <canvas id="giftcard-preview" class="img-thumbnail"></canvas>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <div class="row">
      <button class="btn btn-default mrm"
        ng-click="okParam(true)">

        {{'common-button-close' | t}}
      </button>

      <a id="giftDownloadButton"
        class="btn btn-primary mrm"
        ng-click="okParam(false); ctrl.giftDownloadCard()">

        {{'common-download' | t}}
      </a>
    </div>
  </div>
</div>

<canvas id="giftcard" style="position: absolute; top: -100000px; left: -100000px;"></canvas>
