<section class="modal{{#if centered}} modal{{ centered }}{{/if}}">

  <button class="modal__close icon-close-small" type="button">Close</button>

  <div class="modal__content">
    <div class="modal__wrap">
      {{!-- ebook --}}
      <div class="modal__column--left">
        {{#with ebook}}
          <img src="{{img.url}}"/>
        {{/with}}
      </div>
      <div class="modal__column--right">
        <div class="modal-ebook__title">
          {{ebook.title}}
        </div>
        <div class="modal-ebook__strapline">
          <h1>{{ebook.strapline}}</h1>
        </div>
        <div class="modal-ebook__copy">
          {{{ebook.copy}}}
        </div>
        {{#if ebook.form}}
          <form action="{{ebook.form.action}}" class="js-sailthru-form" name="{{ebook.form.name}}">
            {{#each ebook.form.hidden_fields}}
              <input type="{{type}}" name="{{name}}" value="{{value}}" />
            {{/each}}
            {{#each ebook.form.text_fields}}
              <input class="modal-ebook__form-field"type="{{type}}" name="{{name}}" placeholder="{{placeholder}}" required />
            {{/each}}
            <select class="modal-ebook__form-field" name="{{ebook.form.country_select.name}}" required>
              <option value>Country</option>
              {{#each countries}}
              <option value="{{this}}">{{this}}</option>
              {{/each}}
            </select>
            {{#if ebook }}
              <div class="modal-ebook__modal__terms">
                {{{ebook.terms}}}
              </div>
            {{/if}}
            <input class="button" type="submit" value="Download">
          </form>
        {{/if}}
        <div class="js-success is-hidden">
          <div class="modal-ebook__success">
            <div class="social-share social-share--centered js-action-sheet">
              <ul class="social-share__list">
                <li>
                  <button class="social-share__control social-share__control--big js-action-sheet-share-control" data-network="twitter" data-msg="{{ebook.form.success.social.twitter}}">
                    <svg class="svg-icon svg-icon--gray" viewBox="0 0 21 21" width="21" height="21">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lp-svg-twitter-21px"></use>
                    </svg>
                  </button>
                </li>
                <li>
                  <button class="social-share__control social-share__control--big js-action-sheet-share-control" data-network="facebook" data-msg="{{ebook.form.success.social.facebook}}">
                    <svg class="svg-icon svg-icon--gray" viewBox="0 0 9 17" width="9" height="16">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lp-svg-facebook-9px"></use>
                    </svg>
                  </button>
                </li>
                <li>
                  <button class="social-share__control social-share__control--big js-action-sheet-share-control" data-network="email" data-msg="{{{ebook.form.success.social.email}}}">
                    <svg class="svg-icon svg-icon--gray" viewBox="0 0 18 17" width="18" height="17">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lp-svg-email-18px"></use>
                    </svg>
                  </button>
                </li>
              </ul>
            </div><!-- .social-share -->
            <h1 class="modal-ebook__success__copy">Thank you!</h1>
            <div class="modal-ebook__download__button">
              {{#each ebook.form.success.social.downloads}}
                <a class="button modal-ebook__download__button--position {{#unless href}}disabled{{/unless}}" target="_blank" {{#if href}}href="{{href}}"{{/if}} data-lpa-category="{{category}}" data-lpa-action="ebook download" data-lpa-label="{{type}}" {{#if available}}title="{{available}}"{{/if}}>for {{type}}</a>
              {{/each}}
            </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</section>
