<% javascript 'views/orgs/shibboleth_ds.js'%>

<h1>Find your institution to sign in</h1>

<div class="content">
  <%= form_for 'shibboleth_ds', url: shibboleth_ds_path, html: {class: "shibboleth-ds-form roadmap-form"} do |f| %>
    <fieldset class="standard padded">
      <div class="form-input">
        <label for="org_name">
          <%= _('Look up your institution here') %>
        </label>
    
        <% if @orgs.length <= 10 %>
          <select id="org_name" class="left-indent">
            <option value=""><%= _('Please select one') %></option>
            <%= raw @orgs.collect{|o| "<option value=\"#{o.id}\">#{o.name}</option>" }.join('') %>
          </select>
          
        <% else %>
          <%= render partial: "shared/accessible_combobox", 
                     locals: {name: 'org_name',
                              id: 'org_name',
                              default_selection: nil,
                              models: @orgs,
                              attribute: 'name',
                              classes: 'fixed-width-large'} %>
        <% end %>
        
        <%= render partial: 'shared/accessible_submit_button',
                   locals: {id: 'submit-button', 
                            val: _('Go'), 
                            disabled_initially: true,
                            classes: 'small-input-button',
                            tooltip: _('Select an institution.'),
                            classes: 'inline left-indent'} %>

        <% if @orgs.length > 10 %>
          <p class="centered left-indent">
            <strong>- <%= _('or') %> -</strong>
            <br />
            <a id="show_list" href="#"><%= _('See the full list of participating institutions') %></a>
          </p>
        <% end %>

      </div>
    </fieldset>
  <% end %>
  
  <div id="full_list" style="display: none" class="left-indent" aria-hidden="true">
    <div id="org-list">
			<%
      increment, cols, letter, total, row = 50, 1, '', @orgs.length, 0

      # Determine how many letter separators 
      total += @orgs.collect{|o| o.name[0]}.uniq.count
      cols = (total > 100 ? 3 : (total > 50 ? 2 : 1))
      increment = (total / cols)
      %>
      <% @orgs.each do |org| %>
        <% if row == 0 || (row % increment == 0) %>
          <% if row > 0 %>
            </ul></div>
          <% end %>
          <div class="<%= (cols == 3 ? 'three' : (cols == 2 ? 'two' : 'one')) %>-column"><ul>
        <% end %>

        <% unless org.name[0].capitalize == letter %>
          <li class="separator"><%= org.name[0].capitalize %></li>
          <% row += 1 %>
          <% letter = org.name[0].capitalize %>
        <% end %>

        <li><a href="<%= "#{shibboleth_ds_path}/#{org.id}" %>"><%= org.name %></a></li>
        <% row += 1 %>
      <% end %>
    </div>
  </div>
  
  <hr />
  
  <p class="left-indent">
    <%= _('Institution not a %{application_name} partner?') % {application_name: Rails.configuration.branding[:application][:name]} %> <a href="#header-register-form" data-toggle="modal"><%= _('Create an account with any email address')%></a>
  </p>
</div>