{{ header_minimalist }}
<div id="root">
  <section class="container-fluid vertical-padding-x-large">
    <div class="row center-xs">
      <div class="col-xs-12 col-sm-8 col-md-6">
        <div class="content-box">
          <h1 class="heading-1 no-margin">{ heading_title } </h1>
          <p class="top-margin-small text-medium">{ text_intro }</p>

          <form
            id="form-register"
            ref="form"
            method="post"
          >
            <div class="top-margin-medium">
              <base-checkbox
                type="text"
                name="newsletter_informative"
                :label="text_informative"
                value="1"
                unchecked-value="0"
              >
              </base-checkbox>

              <base-checkbox
                type="text"
                name="newsletter_news"
                :label="text_news"
                value="1"
                unchecked-value="0"
              >
              </base-checkbox>
            </div>

            <div v-if="errors" class="top-margin-large">
              <span class="text-medium text-error background-error border-error padding-small full-width visible-block">{ errors[0] }</span>
            </div>

            <div v-if="success" class="top-margin-large">
              <span class="text-medium text-success background-success border-success padding-small full-width visible-block">{ success }</span>
            </div>

            <base-button
              type="submit"
              full
              :disabled="disableForm"
              :loading="btnSubmitLoading"
              class="top-margin-x-large"
            >
              { text_unsubscribe }
            </base-button>
          </form>

        </div>
      </div>
    </div>
  </section>
</div>

<script>
  const DATA = {{ dataVue|json_encode() }};
</script>