{{!< default}}

<div class="l-wrapper" data-aos="fade-down">
  <a href="{{@site.url}}" class="m-back">
    <span class="m-back__icon icon-arrow-left"></span>
    <span>Back to home</span>
  </a>
</div>

<main class="l-fullscreen">
  <section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
    {{^if success}}
      <div>
        <header class="m-heading in-subscribe-page">
          <h1 class="m-heading__title">Subscribe to {{@site.title}}</h1>
          <p class="m-heading__description in-subscribe-page">
            Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.
          </p>
        </header>
        {{subscribe_form
          form_class="m-subscribe-section__form"
          input_class="m-input in-subscribe-section"
          button_class="m-button primary block"
          placeholder="Your email address"
          autofocus="true"
        }}
      </div>
    {{else}}
      <div>
        <header class="m-heading in-subscribe-page">
          <h1 class="m-heading__title">Subscribed!</h1>
          <p class="m-heading__description in-subscribe-page">
            You've successfully subscribed to <strong>{{@site.title}}</strong> with the email address <strong>{{email}}</strong>
          </p>
        </header>
        <a href="{{@site.url}}" class="m-button outlined">Back to home</a>
      </div>
    {{/if}}
  </section>
</main>