<div class="row">
  <div class="col-md-12">
    <h1>Find your institution to sign in</h1>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <%= form_for 'shibboleth_ds', url: shibboleth_ds_path, html: {id: 'shibboleth_ds'} do |f| %>
      <div class="form-group">
        <%= f.label(:org_name, _('Look up your institution here')) %>
  
        <% 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',
                              required: true,
                              classes: ''} %>
        <% end %>
      
        <%= f.button(_('Go'), class: "btn btn-default", type: "submit") %>

        <% 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>
    <% end %>
  
    <div id="full_list" class="hidden" aria-hidden="true">
      <div class="row">
        <%
        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="col-md-<%= (cols == 3 ? '4' : (cols == 2 ? '6' : '12')) %>"><ul>
          <% end %>

          <% unless org.name[0].capitalize == letter %>
            <li class="bg-primary"><%= 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>
      <%= _('Institution not in the list?') %>
      <a href="#header-signin" data-toggle="modal" data-target="#header-signin">
        <%= _('Create an account with any email address') %>
      </a>
    </p>
  </div>
</div>
