<script type="text/javascript">

jQuery(document).ready(function($){

    var form = $("#create-account-form").show();

        form.steps({
        headerTag: "h3",
        bodyTag: "fieldset",
        stepsOrientation: "vertical",
        transitionEffect: "slideLeft",
        //saveState: true,
        onStepChanging: function (event, currentIndex, newIndex)
        {

            // Trigger loading of the 'select_sp' with the selected SP entityid as parameter
            // Result gets included in the next tab
            if (currentIndex === 0 && newIndex === 1)
            {
                form.steps("remove", 1);
                form.steps("insert", 1, {
                    title: "Select your email address",
                    contentMode: "async",
                    contentUrl: "[% app.url %]?action=select_email&style=nobanner&entityid="+
                        encodeURIComponent($('#entityid').val())
                });
            }

            // Trigger loading of the 'generate_token' with the selected SP entityid as parameter
            // Result gets included in the next tab
            if (currentIndex === 1 && newIndex === 2)
            {
                form.steps("remove", 2);
                form.steps("insert", 2, {
                    title: "Complete email challenge",
                    contentMode: "async",
                    contentUrl: "[% app.url %]?action=complete_challenge&style=nobanner&entityid="+
                        encodeURIComponent($('#entityid').val())+"&email="+encodeURIComponent($("input:checked[name='email']").val())
                });
            }

            // Trigger loading of the 'validate_token' with the list of test accounts created
            // Result gets included in the next tab
            if (currentIndex === 2 && newIndex === 3)
            {
                window.location="[% app.url %]?action=create_accounts&entityid="+
                        encodeURIComponent($('#entityid').val())+"&token="+encodeURIComponent($('#token').val());
             }

            // Allways allow previous action even if the current form is not valid!
            if (currentIndex > newIndex)
            {
              return true;
            }
            // Needed in some cases if the user went back (clean up)
            if (currentIndex < newIndex)
            {
                // To remove error styles
                form.find(".body:eq(" + newIndex + ") label.error").remove();
                form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
            }
            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();

         },
        onStepChanged: function (event, currentIndex, priorIndex)
        {
        },
        onFinishing: function (event, currentIndex)
        {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        },
        onFinished: function (event, currentIndex)
        {
            alert("Submitted!");
        }
    });

    form.validate({
        errorPlacement: function errorPlacement(error, element) { element.before(error); },
    });

});

$(function() {
    $( "#entityid" ).combobox();
    $( "#toggle" ).click(function() {
        $( "#combobox" ).toggle();
    });
});

</script>


<form id ="create-account-form"
      action="[% env.SCRIPT_NAME %]"
      method="POST">

      <h3>Select your Service Provider</h3>
<fieldset>
    <h3>Select your Service Provider</h3>
<div>
Please search and select the Service Provider that you want to test in
the list below. You must be an administrator of that Service Provider to
continue afterwards.
<br/><br/>

<label for="entityid">Type the SP name or entityID to search for it.</label>
Note that only Service Providers are in the list which are included in the eduGAIN metadata.<br/>

    <select id="entityid" name="entityid" class="required">
        <option value="">Select your Service Provider below</option>
        [% FOREACH entity IN metadata.sort('display_name') %]
<option value="[% entity.entityid %]">[% IF entity.display_name %][% entity.display_name %] [% END %]([% entity.entityid %])</option>
        [% END %]
    </select>
    <br/>
</div>
</fieldset>

<h3>Select your email address</h3>
<fieldset>
        <div data-mode="async" data-url="/rest/service/0"></div>
</fieldset>

<h3>Complete email challenge</h3>
<fieldset></fieldset>

<h3>Test accounts</h3>
<fieldset></fieldset>


</form>