{{#extend "modal"
          id="modal-notify-me"
          fullWidth=false
          wide=true
          backdrop=true
          title=""
          showCloseBtn=true
          classMod=mod
}}
  {{#content "header"}}
    <div class="notify-me__header">
      <h3 class="modal-title modal-box__title"
          data-notify-header="form">
        <span class="icon-wrap">
          <i class="fas fa-bell icon"></i>
        </span>
        Notify me when this product is back in stock
      </h3>

      <h3 class="modal-title modal-box__title d-none"
          data-notify-header="success">
        <i class="fas fa-check-circle text-success icon"></i>
        You will receive an email when the product is back in stock
      </h3>
    </div>
  {{/content}}

  {{#content "sections"}}
    {{#extend "modal-body-section"}}
      {{#content "body"}}
        <div class="notify-me" data-notify-root>
          <div class="notify-me__state notify-me__state--form" data-notify-state="form">
            <form class="notify-me-form" novalidate>
              {{> form-row type="email" id="notify-me-email" name="email" label="Email address" value="test@test.com" required="true"}}

              <p class="notify-me-form__note">
                By providing your email address, you agree to receive email notifications until your product is back in
                stock.
                Your email will not be stored for any other purpose.
              </p>

              <div class="notify-me-form__ctas">
                {{> base/button
                text="Notify me"
                modification="btn-primary btn--notify-submit"
                type="submit"
                }}
                <button class="btn btn-outline-primary btn--notify-cancel" type="button" data-dismiss="modal">
                  Cancel
                </button>
              </div>
            </form>
          </div>

          <div class="notify-me__state notify-me__state--success d-none" data-notify-state="success">
            <div class="notify-me__success">
              <div class="notify-me-result">
                <img
                  src="./img/tile-buying-guide.jpg"
                  alt="Wickes General Purpose Claw Hammer - 16oz"
                  class="notify-me-result__img">
                <p class="notify-me-result__title">
                  Wickes General Purpose Claw Hammer - 16oz
                </p>
              </div>

              <button class="btn btn-outline-primary btn--notify-close" type="button" data-dismiss="modal">
                Close
              </button>
            </div>
          </div>
        </div>
      {{/content}}
    {{/extend}}
  {{/content}}
{{/extend}}