{{ $storyUrl := "https://xapi.archer.viewdo.run/v4/experience/link/" }}
{{ $gtmEventName := default "data-req-form" .Page.Params.gtmEventName }}
{{ $formType := default "website_rfi" .Page.Params.formType }}
{{ $phoneNumber := $.Site.Data.global.phoneNumber }}

<dxp-form append-data redirect-url="{{$storyUrl}}" class="text-center" wait-time="2000">
  <div class="px-5" id="scroll-to">
    <h2 class="font-semibold  text-center text-2xl mx-auto pb-2 px-2 pt-4 leading-[1.5rem]">
      Want to hear more about online programs at The University?
    </h2>
    <p class="max-w-[28rem] mx-auto pb-2 text-center text-xs">
      Fill out the form below, and an admission counselor will reach out to you via email or phone with more
      information. After you’ve completed the form, you’ll automatically be redirected to learn more about TU and your
      chosen program.
    </p>
  </div>

  <dxp-action command="set-event" data-key="sent-lead"></dxp-action>
  <dxp-action command="set-complete"></dxp-action>
  <n-action topic="analytics" command="send-event" {{$gtmEventName | safeHTMLAttr }}>
  </n-action>

  <div class="px-8 hide-labels max-w-[30rem] mx-auto mt-4 flex flex-col gap-2 text-left">
    {{if .programCode}}
    <dxp-input hidden input-key="program" set-value="{{.programCode}}"></dxp-input>
    {{else}}
    <dxp-input input-key="program" placeholder="Select a Program..." required>
    </dxp-input>
    {{end}}
    <dxp-input input-key="firstname" placeholder="First Name" required></dxp-input>
    <dxp-input input-key="lastname" placeholder="Last Name" required></dxp-input>
    <dxp-input input-key="email" placeholder="Email Address" required></dxp-input>
    <dxp-input input-key="phone" placeholder="Phone Number"
      validation-message="Required and please use the following format: 000-000-0000"
      pattern="^[0-9]{3}[-.\s]{0,1}[0-9]{3}[-.\s]{0,1}[0-9]{4}$" required></dxp-input>
    <dxp-input input-key="zip" placeholder="Zip Code" required></dxp-input>

    <dxp-input hidden input-key="form_type" set-value="{{$formType}}"></dxp-input>

  </div>

  <div class="text-center p-4">
    <button type="submit"
      class="shadow-xl no-underline rounded-md cursor-pointer bg-nav-blue text-white px-8 md:px-28 py-2 text-xl font-button font-medium max-w-fit hover:text-brand-blue hover:bg-dark-yellow">
      REQUEST INFO
    </button>

  </div>

  <p class="text-center font-base font-semibold text-dark-blue py-0">OR CALL <a class="text-light-mid-blue no-underline"
      href="tel:19186125036">+1 (918) 612-5036</a></p>

  <p class="px-6 max-w-[500px] mx-auto text-gray-800 text-[0.6rem] leading-[0.8rem] italics text-justify pb-6">
    By submitting this form, I am providing my digital signature that University may email me or contact me
    regarding educational services by telephone and/or text message utilizing automated technology at the telephone
    number provided above. I understand this consent is not a condition to attend University or to purchase
    any other goods or services.
  </p>

  <div slot="result" class="text-center p-8">
    <h2 id="form-h2-thankyou" class="text-primary">Thank you for your interest!</h2>
    <svg class="mx-auto py-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      style="margin: auto; background: rgba(255, 255, 255, 0); display: block; shape-rendering: auto;" width="200px"
      height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
      <path d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#d3d3d3" stroke="none">
        <animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1"
          values="0 50 51;360 50 51"></animateTransform>
      </path>
    </svg>
    <h3 class="text-center">Redirecting you now...</h3>
  </div>

</dxp-form>