{{#extend "base" pageClass="pre-home" title="Bathroom Pre-home visit form" }}
  {{#content "head" mode="append"}}
    <link type="text/css" rel="stylesheet" href="./css/pages/page_pre_home.css">
  {{/content}}
  {{#content "body"}}
    <main class="pre-home-page">

        <div class="container card-block" id="home-visit-poster">
            <div class="head-img poster-desktop">
                <img class="full-width" src="https://placehold.co/1110x400?text=Preparing+for+your\nbathroom+consultation" alt="Preparing for your">
            </div>
            <div class="head-img poster-mobile">
                <img class="full-width" src="https://placehold.co/600x600?text=Preparing+for+your\nbathroom\nconsultation" alt="Preparing for your">
            </div>

            <ul class="home-visit-steps">
                {{#each pre-home.bathroom.home-visit-steps}}
                    <li class="home-visit-steps__item">
                        <span class="home-visit-steps__item-text">{{ text }}</span>
                    </li> 
                {{/each}}
            </ul>
        </div>

        <div class="card-block choose-wickes" id="why-wickes">
            <div class="container">
                <h2 class="choose-wickes__head">Why choose Wickes?</h2>
                
                <div class="choose-wickes__list container">
                    {{#each pre-home.bathroom.choose-wickes}}
                        <div class="choose-wickes__list-item">
                            <img class="img" src="{{icon}}" alt="{{ header }}">
                            <div class="info">
                                <div class="info-header {{class-mod}}">{{ header }}</div>
                                <div>{{ text }}</div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        </div>

        <div class="container card-block main-form">
            <h1 class="main-form__header">Things to think about before your home consultation</h1>


            {{#with pre-home.bathroom.main-form-how}}
                {{>pre-home-form id-list="mainFormHow"}}
            {{/with}}

            {{#with pre-home.bathroom.main-form-style}}
                {{>pre-home-form id-list="mainFormStyle"}}
            {{/with}}

            {{#with pre-home.bathroom.main-form-appliances}}
                {{>pre-home-form id-list="mainFormAppliances"}}
            {{/with}}
        </div>


      <div class="order-wrap">

        <div class="container card-block considered-block">
            <h1 class="considered-block__header">Have you also considered?</h1>
    
            <div class="considered-block__list">
                {{#each pre-home.bathroom.considered}}
                <div class="considered-block__list-item">
    
                    <div class="check-img-block">
                        <img class="check__img" src="{{icon}}" alt="{{header}}">
                        <label for="{{id}}" class="chb check__icon">
                            <input type="checkbox" value="{{id}}" id="{{id}}" name="{{id}}">
                            <ins><svg class="svg-inline--fa fa-check fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg><!-- <i class="fas fa-check"></i> --></ins>
                        </label>
                        <div class="check__header">{{header}}</div>
                    </div>
                
                    <ul class="check-img-list">
                        {{#each list}}
                            <li class="check-img-list-item">{{item}}</li>
                        {{/each}}
                    </ul>
    
                </div>
                {{/each}}
            </div>
        </div>

      </div>

        <div class="container card-block">
            {{#with pre-home.bathroom.main-form-complete}}
                {{>pre-home-form id-list="mainFormCompleteBathroom"}}
            {{/with}}
        </div>

      <div class="container card-block">
        {{#with pre-home.bathroom.main-form-best-statement}}
            {{>pre-home-form id-list="mainFormBestStatement"}}
        {{/with}}
      </div>

        <div class="container card-block trust-installers" id="trust-installers">
            <div class="trust-installers__poster poster-desktop">
                <img class="full-width" src="https://placehold.co/1110x384?text=Your+trust.+Our+installers." alt="Your trust">
                
            </div>
            <div class="trust-installers__poster poster-mobile">
                <img class="full-width" src="https://placehold.co/600x729?text=Your+trust.\nOur+installers." alt="Your trust">
                
            </div>
            <div class="trust-installers__info container">
                {{#each pre-home.bathroom.trust-installers}}
                <div class="trust-installers__info-item">
                    <img class="trust-installers__info-item-img" src="{{icon}}" alt="{{ header }}">
                    <div class="trust-installers__info-item-text">{{ text }}</div>
                </div>
                {{/each}}
            </div>
        </div>

    <div class="card-block feedback-form">
        <div class="container">
            <h1 class="feedback-form__header">
                What happens after your home consultation?
            </h1>

            <div class="feedback-form__info">
                Your next appointment with your Design Consultant will be in person, where you will:
            </div>

            <ul class="feedback-form__list">
                <li class="feedback-form__list-item">View our bathroom ranges and furniture options</li>
                <li class="feedback-form__list-item">See your tailor-made 3D design with 360-degree views and make any changes</li>
                <li class="feedback-form__list-item">Have your chosen product demonstrated</li>
                <li class="feedback-form__list-item">Discuss your full quote and if you’re ready, place your order. You can continue to change your design up to 2 weeks before delivery.</li>
            </ul>
            
            <div class="feedback-form__textarea">
                {{> form-row 
                    id="enquiryTextarea"
                    label="Is there anything you think your Design Consultant should know prior to your home consultation?" 
                    textarea="true"
                    textareaRows="5"
                    info="max 800 characters" 
                    modifier="default-note" 
                    row-mod="enquiry-field"}}

                    <div class="feedback-form__textarea-error"></div>
            </div>


            <div class="feedback-form__submit">
                <button class="btn btn-primary btn_large">
                    <span class="btn__text">Submit form</span>
                </button>
            </div>
            <div class="submit-error"></div>
        </div>

    </div>

    </main>
{{/content}}
{{#content "foot" mode="append"}}
<script defer src="./js/page/pre-home.js"></script>
{{/content}}
{{/extend}}
