[% WRAPPER index.html.tt2 %]
<form class="wizard clearfix" action="[% c.url_for('step2') %]" method="get">
    <div class="steps clearfix">
        <ol>
            <li class="current">[% c.loc("Select your service provider") %]</li>
            <li class="disabled">[% c.loc("Select your email address") %]</li>
            <li class="disabled">[% c.loc("Complete email challenge") %]</li>
        </ol>
    </div>

    <div class="content clearfix">
        <h2>[% c.loc("Select your service provider") %]</h2>
        <p>
            [% c.loc("Please select the service provider you want to test in one of the lists below.") %]&nbsp;
            [% c.loc("You must be an administrator of that service to continue afterwards.") %]
        </p>

    [% IF idp %]
        <fieldset>
            <legend>[% c.loc("Service providers from my own organization") %]</legend>
            <select id="self" name="self">
                <option value=""></option>
        [% organization_url = idp.organization_url() %]
        [% FOREACH sp IN sps %]
            [% NEXT UNLESS sp.organization_url() == organization_url %]
                <option value="[% sp.entityid() %]">[% sp.display_name() | html %]</option>
        [% END %]
            </select>
        </fieldset>
    [% END %]

        <fieldset>
            <legend>[% c.loc("All service providers registered in Education-Research federation") %]</legend>
            <select id="renater" name="renater">
                <option value=""></option>
    [% FOREACH sp IN sps %]
        [% NEXT UNLESS sp.is_member_of('renater') %]
                <option value="[% sp.entityid() %]">[% sp.display_name() | html %]</option>
    [% END %]
            </select>
        </fieldset>

        <fieldset>
            <legend>[% c.loc("All service providers registered in test federation") %]</legend>
            <select id="test" name="test">
                <option value=""></option>
    [% FOREACH sp IN sps %]
        [% NEXT UNLESS sp.is_member_of('test') %]
                <option value="[% sp.entityid() %]">[% sp.display_name() | html %]</option>
    [% END %]
            </select>
        </fieldset>

        <fieldset>
            <legend>[% c.loc("All service providers registered in eduGAIN federation") %]</legend>
            <a class="button" href="https://access-check.edugain.org">[% c.loc("eduGAIN Access Check") %]</a>
        </fieldset>

        <input type="hidden" id="entityid" name="entityid"/>

        <div class="callout alert-callout-border primary">[% c.loc("Those service providers have been extracted from federation metadata.") %]</div>
    </div>

    <div class="actions clearfix">
        <button type="submit" class="button" name="action" value="" formnovalidate>[% c.loc("Previous") %]</button>
        <button type="submit" class="button" name="action" value="select_email">[% c.loc("Next") %]</button>
    </div>
</form>

<script>
$( document ).ready(function() {
    $.widget( "custom.combobox", {
        _create: function() {
            this.wrapper = $( "<span>" )
            .addClass( "custom-combobox" )
            .insertAfter( this.element );

            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },

        _createAutocomplete: function() {
            var selected = this.element.children( ":selected" ),
                id = this.element.attr('id'),
                value = selected.val() ? selected.text() : "";

            this.input = $( "<input>" )
                .appendTo( this.wrapper )
                .val( value )
                .attr( "title", "" )
                .attr('id', id + '_combobox')
                .attr('name', id + '_combobox')
                .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: $.proxy( this, "_source" )
                })
                .tooltip({
                    tooltipClass: "ui-state-highlight"
            });

            this._on( this.input, {
                autocompleteselect: function( event, ui ) {
                    // sync hidden list widget
                    ui.item.option.selected = true;
                    this._trigger( "select", event, {
                        item: ui.item.option
                    });

                    // reset other comboboxes
                    var id = this.element.attr('id');
                    $("input[id!='" + id + "_combobox']").val("");
                    $("select[id!='" + id + "']  option:selected").prop('selected', false);

                    // retrieve federation and entityid
                    var entity     = this.element.val();
                    $("#entityid").val(entity);
                },
 
                autocompletechange: "_removeIfInvalid"
            });
        },

        _createShowAllButton: function() {
            var input = this.input,
            wasOpen = false;
    
            $( "<a>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Show All Items" )
                .tooltip()
                .appendTo( this.wrapper )
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass( "ui-corner-all" )
                .addClass( "custom-combobox-toggle ui-corner-right" )
                .mousedown(function() {
                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
                })
                .click(function() {
                    input.focus();
            
                    // Close if already visible
                    if ( wasOpen ) {
                    return;
                    }
            
                    // Pass empty string as value to search for, displaying all results
                    input.autocomplete( "search", "" );
                });
        },
        
        _source: function( request, response ) {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
            response( this.element.children( "option" ).map(function() {
                var text = $( this ).text();
                if ( this.value && ( !request.term || matcher.test(text) ) )
                    return {
                        label: text,
                        value: text,
                        option: this
                    };
            }) );
        },
        
        _removeIfInvalid: function( event, ui ) {
 
            // Selected an item, nothing to do
            if ( ui.item ) {
                return;
            }

            // Search for a match (case-insensitive)
            var value = this.input.val(),
                valueLowerCase = value.toLowerCase(),
                valid = false;
            this.element.children( "option" ).each(function() {
                if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                    this.selected = valid = true;
                    return false;
                }
            });
            
            // Found a match, nothing to do
            if ( valid ) {
                return;
            }
            
            // Remove invalid value
            this.input
                .val( "" )
                .attr( "title", value + " didn't match any item" )
                .tooltip( "open" );
            this.element.val( "" );
            this._delay(function() {
                this.input.tooltip( "close" ).attr( "title", "" );
            }, 2500 );
            this.input.autocomplete( "instance" ).term = "";
        },

        _destroy: function() {
            this.wrapper.remove();
            this.element.show();
        }
    });

    [% IF idp %]
    $("#self").combobox();
    [% END %]
    $("#renater").combobox();
    $("#test").combobox();

    $.validator.messages.required = "[% c.loc("This information is required") %]";
    $("form").validate();
});
</script>
[% END %]