<div class="block-form">
  <div class="block-form__container">
    <div class="block-form__title titleXXL" data-lang="lng-requestFormTitle">
      Send us a brief message and our team will be in touch with you soon
    </div>
    <div class="form-message form-success" style="display: none">
      <div class="form-message__icon">
        <img src="../../../assets/resource/lp/Group%20666.png" alt="" />
      </div>
      <div class="form-message__inner">
        <div
          class="form-message__title titleL"
          data-lang="lng-formSuccessTitle"
        >
          Your message has been successfully sent
        </div>
        <div
          class="form-message__text defaultBase"
          data-lang="lng-formSuccessSubTitle"
        >
          Thank you for your interest! Our team will contact you shortly to
          discuss the details.
        </div>
        <div class="form-message__actions">
          <a
            href="/lp/saas_request"
            class="button CTABase"
            data-lang="lng-formSuccessBtn"
            data-lang-link="saas_request"
            data-lang-type="link"
            >OK</a
          >
        </div>
      </div>
    </div>
    <div class="form-message form-error" style="display: none">
      <div class="form-message__icon">
        <img src="../../../assets/resource/lp/Group%20664.png" alt="" />
      </div>
      <div class="form-message__inner">
        <div class="form-message__title titleL" data-lang="lng-formErrorTitle">
          Something went wrong...
        </div>
        <div class="form-message__actions">
          <a
            href="/lp/saas_request"
            class="button CTABase"
            data-role="saas2-request-reset"
            data-lang="lng-formErrorBtn"
            data-lang-link="saas_request"
            data-lang-type="link"
            >Please try again</a
          >
        </div>
      </div>
    </div>
    <div class="formContent">
      <div class="formElement">
        <input
          class="textInput RegularS"
          placeholder="Name*"
          name="first_name"
          type="text"
          id="first_name"
          data-lang="lng-InputName"
          data-lang-type="input"
        />
        <label
          id="first_name-error"
          class="error RegularXXS"
          for="first_name"
          data-form="error"
          data-lang="lng-Required"
        ></label>
      </div>
      <div class="formElement">
        <input
          class="textInput RegularS"
          placeholder="Email*"
          name="email"
          type="text"
          id="email"
          data-lang="lng-InputEmail"
          data-lang-type="input"
        />
        <label
          id="email-error"
          class="error RegularXXS"
          for="email"
          data-form="error"
          data-lang="lng-Required"
        ></label>
      </div>
      <div class="formElement">
        <input
          class="textInput RegularS"
          placeholder="Phone*"
          name="phone"
          id="saas-phone"
          inputmode="tel"
          data-lang="lng-InputPhone"
          data-lang-type="input"
        />
        <label
          id="saas-phone-error"
          class="error RegularXXS"
          for="saas-phone"
          data-form="error"
          data-lang="lng-Required"
        ></label>
      </div>
      <div class="formElement">
        <textarea
          class="textArea RegularS"
          name="message"
          id="message"
          cols="30"
          rows="5"
          placeholder="Why do you want to start your own brokerage?"
          data-lang="lng-InputMessage"
          data-lang-type="input"
          required
        ></textarea>
        <label
          id="message-error"
          class="error RegularXXS"
          for="message"
          data-form="error"
          data-lang="lng-Required"
        ></label>
      </div>
      <div class="formElement">
        <label
          id="g-recaptcha-response-error"
          class="error RegularXXS"
          for="message"
          data-form="error"
          data-lang="lng-Required"
        ></label>
        <div
          id="contacts-request-g-recaptcha-response"
          class="captchaWrapper"
        ></div>

        <script>
          function recaptchaCallback() {
            const reCaptchaOptions = {
              sitekey: "6LceR2gjAAAAAIY2W8wlNB221ijjeTmLVfuFDma_",
            };
            if (
              document.querySelector(
                "#contacts-request-g-recaptcha-response"
              ) !== null
            ) {
              window.dataRequestFormCaptcha = grecaptcha.render(
                "contacts-request-g-recaptcha-response",
                reCaptchaOptions
              );
            }
          }
        </script>
        <script
          src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=en"
          async
          defer
        ></script>
      </div>
      <div class="checkbox">
        <span
          id="agree-error"
          class="error RegularXXS"
          data-form="error"
          data-lang="lng-Required"
        ></span>
        <input
          type="checkbox"
          name="terms_agree"
          id="agree"
          class="checkbox__input"
          data-form="agree"
        />
        <label for="agree" class="checkbox__label">
          <span class="checkbox__icon"></span>
          <span
            class="checkbox__text RegularXXS"
            data-lang="lng-requestCheckboxConfirm"
          >
            By sticking the check box I consent with the
            <a href="/terms-and-conditions" class="checkbox__link"
              >terms and conditions</a
            >
            and the
            <a href="/privacy-policy" class="checkbox__link">policy</a>
            of the website
          </span>
        </label>
      </div>
      <button
        class="formButton CTABase"
        type="submit"
        data-lang="lng-formButton"
      >
        Send request
      </button>
      <div class="errorMsg" data-lang="lng-EmptyFields">
        There are empty fields
      </div>
      <div class="successMsg" data-lang="lng-Success">Success</div>
    </div>
  </div>
</div>