{{#extend "base" hybrisClass="hybris-class" pageClass="page_delete-account" title="Delete Account Request Page" hideBreadcrumbs="true" hideBanner="true"}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_account-deletion.css">
{{/content}}
{{#content "body"}}
<main class="account-deletion">
  <div class="globalMessages">
    <div class="container"></div>
  </div>
  <div class="container">
    <div class="row no-gutters">
      <div class="col col-12">
        <div class="account-deletion__wrapper">
          <span class="icon account-deletion__head-icon">
            <i class="far fa-trash-alt"></i>
          </span>
          <h1 class="account-deletion__header">{{deletion-page-request.title}}</h1>
          <div class="account-deletion__warning">
            {{> notifications deletion-page-request.warning-note}}
          </div>
          <div class="account-deletion__section">
            <p class="account-deletion__text">{{deletion-page-request.note-1}}</p>
            <p class="account-deletion__text">{{deletion-page-request.note-2}}</p>
            {{> checkbox id="account-deletion-check" label=deletion-page-request.checkbox-label required="true"}}
          </div>
          <form class="account-deletion__form">
            <button disabled id="account-deletion-submit" class="btn btn-danger" type="submit">
              <span class="btn__text">{{deletion-page-request.button-submit}}</span>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</main>
{{/content}}
{{#content "foot" mode="append"}}
  <script src="./js/page/account-deletion.js" defer></script>
{{/content}}
{{/extend}}