{{#extend "base" hybrisClass="hybris-class" title="Wickes Matchmaker Tool - Final" footer="false" hideBanner="true"}}
{{#content "head" mode="append"}}
  <link type="text/css" rel="stylesheet" href="./css/pages/page_quiz.css" />
{{/content}}
{{#content "header"}}
{{/content}}
{{#content "body"}}
<main class="main-quiz">
  <header class="header-quiz">
    <a target="_blank" href="/" class="d-inline-block">
      <img
        class="header-quiz-image"
        src="./img/wickes-logo-v2.svg"
        alt="Wickes Logo"
      />
    </a>
  </header>
  <div id="style-quiz"></div>

  <div class="container quiz-container quiz-container--final">
    <div class="row">
      <div class="col-12">
        <h2 class="quiz-title">Why choose <span class="quiz-title-highlight">Wickes?</span></h2>
        <div class="quiz-summary">
          <img class="quiz-summary__image" src="img/quiz/frame.png" alt="Frame">
          <div class="quiz-summary__content">
            <ul class="quiz-summary__list">
              {{#each quiz.benefits}}
              <li class="quiz-summary-item">
                <img src="{{image}}" alt="{{altImage}}">
                <p>{{text}}</p>
              </li>
              {{/each}}
            </ul>
          </div>
        </div>
        <div class="quiz-actions">
          {{#each quiz.actions}}
            {{#extend "square-cta"}}
              {{#content "content"}}
                {{{image}}}
                <span>{{title}}</span>
              {{/content}}
            {{/extend}}
          {{/each}}
        </div>
        <div class="quiz-disclaimer">
          <span>*Available on Wickes Bespoke Kitchens only</span>
        </div>
      </div>
    </div>
  </div>
</main>
{{/content}}
{{#content "footer"}}
{{/content}}
{{#content "foot" mode="append"}}
  <script defer src="./js/quiz.min.js"></script>
  {{#extend "quiz/quiz-modal" id="quiz-modal" backdrop=true title="Email quiz results" fullWidth=true showCloseBtn=true newIconCross=true}}
    {{#content "sections"}}
      {{> quiz/quiz-modal-form }}
    {{/content}}
  {{/extend}}
  {{#extend "quiz/quiz-modal" classMod="quiz-modal--final" id="quiz-modal-final" backdrop=true title="Email quiz results" fullWidth=true showCloseBtn=true newIconCross=true}}
    {{#content "sections"}}
      <div class="quiz-modal__confirmation">
        <h2>Thank you</h2>
        <p>Your quiz results have been sent to your email.</p>
      </div>
      <div class="quiz-modal__controls">
        <button class="btn btn-secondary btn-cancel">Close</button>
      </div>
    {{/content}}
  {{/extend}}
{{/content}}
{{/extend}}