<!-- Form -->
<div class="row">
    <div class="col-md-12">
        <!-- Material form login -->
        <div class="card">
          <span id="register-exit">&times;</span>
          <h5 class="card-header info-color white-text text-center py-2">
              <strong><?php echo wpcsr_register_form_label(); ?></strong>
          </h5>
          <form id="wpcsrRegistrationForm" style="padding:18px; overflow-y: scroll; max-height: 75vh;">
            <div class="form-row">
              <div class="col">
                  <!-- First name -->
                  <div class="md-form form-sm mb-0">
                      <input type="text" id="firstname" class="form-control" name="first_name" required="required" autocomplete="off">
                      <label for="firstname"><?php echo wpcsr_firstname_form_label(); ?></label>
                  </div>
              </div>
              <div class="col">
                  <!-- Last name -->
                  <div class="md-form form-sm mb-0">
                      <input type="text" id="lastname" class="form-control" name="last_name" required="required" autocomplete="off">
                      <label for="lastname"><?php echo wpcsr_lastname_form_label(); ?></label>
                  </div>
              </div>
            </div>
            <!-- Phone -->
            <div class="md-form form-sm">
              <label class="form-check-label" for="phone"><?php echo wpcsr_phone_form_label(); ?></label>
              <input id="phone" class="form-control border-input" type="text" size="20" value="" name="phone" required="required" autocomplete="off">
            </div>
            <!-- Email -->
            <div class="md-form form-sm">
              <label class="form-check-label" for="email"><?php echo wpcsr_user_email_form_label(); ?></label>
              <input id="email" class="form-control border-input" type="email" size="20" value="" name="email" required="required" autocomplete="off">
            </div>
            <!-- Password -->
            <div class="md-form form-sm">
              <label class="form-check-label" for="reg_pass"><?php echo wpcsr_password_form_label(); ?></label>
              <input id="reg_pass" class="form-control border-input" type="password" size="20" value="" name="pwd" required="required">
            </div>
            <!-- Password -->
            <div class="md-form form-sm">
              <label class="form-check-label" for="confirm_pass"><?php echo wpcsr_confirm_password_form_label(); ?></label>
              <input id="confirm_pass" class="form-control border-input" type="password" size="20" value="" required="required">
            </div>
            <h5 class="h5-responsive"><?php echo wpcsr_address_info_form_label(); ?></h5>
            <!-- Company -->
            <div class="md-form form-sm">
              <label class="form-check-label" for="company"><?php echo wpcsr_company_form_label(); ?></label>
              <input id="company" class="form-control border-input" type="text" size="20" value="" name="company" autocomplete="off">
            </div>
            <!-- Address line 1 -->
            <div class="md-form form-sm">
              <label class="form-check-label" for="address_1"><?php echo wpcsr_address1_label(); ?></label>
              <input id="address_1" class="form-control border-input" type="text" size="20" value="" name="address_1" required="required" autocomplete="off">
            </div>
            <!-- Address line 2 -->
            <div class="md-form form-sm">
              <label class="form-check-label" for="address_2"><?php echo wpcsr_address2_label(); ?></label>
              <input id="address_2" class="form-control border-input" type="text" size="20" value="" name="address_2" autocomplete="off">
            </div>
            <!-- City -->
            <div class="md-form form-sm">
              <label class="form-check-label" for="city"><?php echo wpcsr_city_label(); ?></label>
              <input id="city" class="form-control border-input" type="text" size="20" value="" name="city" required="required" autocomplete="off">
            </div>
            <!-- Postcode / ZIP -->
            <div class="md-form form-sm">
              <label class="form-check-label" for="postcode"><?php echo wpcsr_postcode_zip_label(); ?></label>
              <input id="postcode" class="form-control border-input" type="text" size="20" value="" name="postcode" required="required" autocomplete="off">
            </div>
            <div class="md-form form-sm">
              <select class="browser-default custom-select" name="country">
                <option value="" disabled selected><?php echo wpcsr_select_country_label(); ?></option>
                <?php
                  foreach ( get_wpcargo_countries() as $key => $value) {
                      ?><option value="<?php echo $key; ?>"><?php echo $value; ?></option><?php
                  }
                ?>
              </select>
            </div>
            <div class="md-form form-sm">
              <label class="form-check-label" for="state"><?php echo wpcsr_state_county_label(); ?></label>
              <input id="state" class="form-control border-input" type="text" size="20" value="" name="state" required="required" autocomplete="off">
            </div>
            <div class="registration-message"></div>  
            <input type="submit" name="reg-submit" id="reg-submit" value="<?php echo wpcsr_register_label(); ?>">
          </form>
          <!-- Form -->
        </div><!-- Card -->
    </div><!-- Offset -->
</div><!-- Row -->