## 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=[^&]*','')))

#if ($useFormEncryption)
    <div id="e2eeSplashScreen" style="display:none;">
        <h2 class="logintitle text-center">$gui.label</h2>
        <div class="field info" id="info">$text.get("e2ee.splashscreen.msg")</div>
    </div>
#end

<div id="loginform">

    <form id="$gui.name" name="$gui.name"
    #if ($useFormEncryption) onsubmit="new e2eenc().encryptForm('$gui.encryption','$gui.name')" #end
    method="POST" target="_self" action="$formTarget" autocomplete="off" accept-charset="UTF-8" class="form-horizontal">

		<h1 class="logintitle text-center">$gui.label</h1>

        #set ($tabindex = 0)
        #set ($policyFailureOpen = false)
	    #set ($policyInfoOpen = false)

	    #foreach ($guiElem in $gui.getGuiElems())
	        #set ($tabindex = $tabindex+1)
            #if ($guiElem.name.startsWith("policyInfo") && $guiElem.label && $guiElem.label.length() > 0)
                #if (!$policyInfoOpen)
                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-6">
                    #set ($policyInfoOpen = true)
                #end
                <span class="help-block small" id="$guiElem.name">$guiElem.label</span>
            #elseif ($guiElem.name.startsWith("policyFailure") && $guiElem.label && $guiElem.label.length() > 0)
                #if (!$policyFailureOpen)
                    <div class="form-group has-error">
                        <div class="col-sm-offset-3 col-sm-6">
                    #set ($policyFailureOpen = true)
                #end
                <span class="help-block small" id="$guiElem.name">$guiElem.label</span>
            #else
                #if (!$guiElem.name.startsWith("policyInfo") && $policyInfoOpen) ## close
                        </div>
                    </div>
                    #set ($policyInfoOpen = false)
                #end
                #if (!$guiElem.name.startsWith("policyFailure") && $policyFailureOpen) ## close
                        </div>
                    </div>
                    #set ($policyFailureOpen = false)
                #end
                #renderFormField($guiElem, $gui, $tabindex)
            #end
	    #end

        ## 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"/>
	            <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"/>
                <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

        ## 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"/>
	            <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

        #if ($useFormEncryption)
            <input type="hidden" name="e2eenc.fields" value="not-set">
            <input type="hidden" name="e2eenc.iv" value="not-set">
            <input type="hidden" name="e2eenc.encapsulation" value="not-set">
        #end

        #renderFormControls($gui)
        #renderFormLinks($gui)
    </form>

    <!-- position input focus into first element of form -->
    <script type="text/javascript">
        const form = document.forms['$gui.name'];
        if (form) {
          const input = form.elements[0];
          if (input) {
            input.focus();
          }
        }
    </script>

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