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

<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: {class: "shibboleth-ds-form roadmap-form"} do |f| %>
      <fieldset class="standard padded">
        <div class="form-input">
          <%= 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',
                                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 in the list?') %>&nbsp;
      <button type="button" class="btn btn-link" data-toggle="modal" data-target="#header-signin">
        <%= _('Create an account with any email address')%>
      </button>
    </p>
    <%= render partial: 'shared/signin' %>
  </div>
</div>