<%
  css_bundle :otp_login
  @headers = false
  add_body_class "full-width modal body--login-confirmation"
  provide :page_title, t("Multi-factor Authentication Backup Codes")
%>

<div id="modal-box" class="ic-Login-confirmation">
  <div class="ic-Login-confirmation__content">
    <h2 class="ic-Login-confirmation__headline"><%= t "Canvas Multi-factor Authentication Backup Codes" %></h2>

    <p><%= t("These backup codes can be used if your multi-factor authentication device is unavailable. Please print them out and keep them in a safe location, like your wallet.") %></p>
    <ul class="unstyled row-fluid text-center">
      <% 2.times do |i| %>
        <% otps = @otps[@otps.length/2*i..(@otps.length/(2-i) - 1)] %>
        <div class="span6">
          <% otps.each do |otp| %>
            <li<%= " class='used_otp'".html_safe if otp.used? %>><%= otp.code %></li>
          <% end %>
        </div>
      <% end %>
    </ul>
    <a href="<%= destroy_all_one_time_passwords_path %>" class="btn" data-method="delete" id="regenerate_backup_codes_link"><%= t("Regenerate") %></a>
  </div>
</div>
