## if only form, then we include javascript here (start of body)
#if ($isFormRequest)
  #parse("${templatePath}/js_start.vm")
#end

#set ($formTarget = $utils.escapeHtmlAttribute($gui.target.replaceAll('&?language=[^&]*','')))
<form id="$gui.name" name="$gui.name" method="POST" action="$formTarget" novalidate>

  ## "Hidden" button which is triggered when clicking on a received SMS notification on a mobile phone to paste it automatically. Otherwise, the first submit button found (back arrow) is clicked.
  <button class="hidden-verification-code-submit-button" type="submit" value="true" tabindex="-1"></button>

  ## Common header with logo above the content.
  #if (!$minimalHeader)
    <div class="login-container-header">
      #renderHeader($gui)
      <img class="mb-1 max-w-full" src="${login.appDataPath}/resources/logo.png?v=1b26ec26" alt="Company Logo">
      <span class="brand-name">$text.get("title")</span>
    </div>
  #end

  <div class="login-container-body printable">
    #set($topPaddingModifier = '')

    ## Setting cancel button and language selection dropdown as part of the body, as minimal header.
    #if ($minimalHeader)
      #set($topPaddingModifier = 'pt-0') ## Removing padding from top of content.
      <div class="login-container-minimal-header">
        #renderHeader($gui)
      </div>
    #end

    <div class="login-container-body-content printable $topPaddingModifier form-group">

      #renderTitle($gui)

      ## this block applies for usernameless mobile authentication
      #if ($gui.name == "mauth_usernameless")
        <center id="mauth_started" style="display: none">
            <img id="mauth_loading" style="width: 60px; height: 60px; display: none;" src="${login.appDataPath}/resources/loading.svg?v=1af10281"/>
            <br><br>
              <p id="mauth_qrcode_info">$text.get("mobile_auth.scan")</p>
              <canvas id="mauth_qrcode" style="width: 256px; height: 256px;">
              </canvas>
              <div id="mauth_link_parent" class="form-group" style="display: none">
                  <a href="" id="mauth_link">$text.get("mobile_auth.link")</a>
              </div>
        </center>
      #end

      #renderGeneric($gui)

      ## this block applies when Channel is set to Push / Link
      #if ($gui.name == "mauth_link_qr" || $gui.name == "mauth_onboard")
        <!-- shown after dispatching -->
        <center id="mauth_started">
            <img id="mauth_loading" style="width: 60px; height: 60px; display: none;" src="${login.appDataPath}/resources/loading.svg?v=1af10281"/>
            <br><br>
            <p id="mauth_qrcode_info">$text.get("mobile_auth.scan")</p>
            <canvas id="mauth_qrcode" style="width: 256px; height: 256px;">
            </canvas>
            <div id="mauth_link_parent" class="form-group" style="display: none">
                $text.get("mobile_auth.link")
            </div>
        </center>
      #end

      ## this block applies when Channel is set to Push / QR-code (in-app)
      #if ($gui.name == "mauth_push_qr")
        <!-- shown if the user has multiple devices -->
        <ul id="mauth_devices" style="display: none">
        </ul>
        <!-- shown after selecting the device -->
        <center id="mauth_started" style="display: none">
            <img id="mauth_loading" style="width: 60px; height: 60px; display: none;" src="${login.appDataPath}/resources/loading.svg?v=1af10281"/>
            <p id="mauth_match_numbers" style="font-size: 64px; display: none;"></p>
            <p id="mauth_qrcode_info">$text.get("mobile_auth.push-or-scan")</p>
            <canvas id="mauth_qrcode" style="width: 256px; height: 256px;">
            </canvas>
        </center>
      #end

      #renderSocialLoginButtons($gui)
      #renderFormLinks($gui)
    </div>
  </div>
</form>

## if only form, then we include javascript here (end of body)
#if ($isFormRequest)
  #parse("${templatePath}/js_end.vm")
#end
