{{#extend "base" hybrisClass="hybris-class" pageClass="page_registration" title="Registration"}}
  {{#content "head" mode="append"}}
    <link type="text/css" rel="stylesheet" href="./css/pages/page_registration.css">
  {{/content}}
  {{#content "body"}}
    <main class="container">
        <h1>Registration</h1>
        <form action="#" class="form-register">
            <div class="form-register__row">
                <div class="form-register__descr">
                    <h3>Address details</h3>
                    <p>Please use this form to add/edit an address</p>
                    <div class="warning-required">Required fields</div>
                </div>
            </div>
            {{> form-row dropdown="true" id="title" label="Title" placeholder="Please select" row-mod="row-title"
                required="true"}}
            {{> form-row id="first-name" label="First name" required="true"}}
            {{> form-row id="surname" label="Surname" required="true"}}
            {{> address-postcode-look-up }}
            {{> form-row id="home-telephone" label="Home telephone"}}
            {{> form-row id="mobile-telephone" label="Mobile telephone"  required="true"}}
            <div class="form-register__row">
            <div class="form-register__descr">
                <h3>Email and password</h3>
                <p>Please use this form to add/edit an address</p>
            </div>
            </div>
            {{> form-row type="email" id="email" label="Email address"  required="true"}}
            {{> form-row type="password" id="password" label="Password"  info="Minimum length is 6 characters" required="true"}}
            {{> form-row type="password" id="confirm-password" label="Confirm password" required="true"}}
            <div class="form-register__row">
            <div class="form-register__descr">
                <h3>Additional information</h3>
            </div>
            </div>
            {{> form-row row-mod="form-register__describe-yourself" dropdown="true" label="How would you describe yourself or your main trade" id="select-address-bottom" placeholder="Please select"  required="true"}}
            <div class="form-register__descr">
                <p>We know your home is important to you, that's why we're here with the latest offers and deals to help you complete your project.</p>
                <p class="underlinedLink">We will never share your data with a third party. For full details on how we may use your data see our <a target="_blank" href="/privacy">privacy policy</a>.</p>
                <p>Yes please, I'd like to receive the latest offers and deals by:</p>
            </div>
            <div class="form-row">
                <div class="form-row__field">
                    {{> checkbox id="sendEmail" label="Email"}}
                </div>
            </div>
            <div class="form-row">
                <div class="form-row__field">
                    {{> checkbox id="sendSms" label="SMS" }}
                </div>
            </div>
            <div class="form-row">
                <div class="form-row__field">
                    {{> checkbox id="sendPhone" label="Phone" }}
                </div>
            </div>
            <div class="form-row">
                <div class="form-row__field">
                    {{> checkbox id="sendPost" label="Post" }}
                </div>
            </div>
            <!-- TODO: add a parameter for tag <a> into the label -->
            <div class="form-row" data-row-required="">
                <div class="form-row__field">
                    <label for="check04" class="chb form-row__label_required ">
                        <input type="checkbox" value="" id="check04" name="check04"  >
                        <ins><i class="fas fa-check"></i></ins>
                        <span>Please tick this box (once you have checked all your details) to agree to our <a href="">Terms & Сonditions</a></span>
                    </label>
                </div>
            </div>
            <div class="form-row form-row__action form-row__action_custom">
                <div class="form-row__col-btn">
                    <button class="btn btn-secondary btn_full btn-previous" type="reset">
                        <span class="btn__text">Previous</span>
                    </button>
                </div>
                <div class="form-row__col-btn">
                    <button class="btn btn-primary btn_full">
                        <span class="btn__text">Continue</span>
                    </button>
                </div>
            </div>
        </form>
    </main>
  {{/content}}
{{/extend}}
