<h1><%= t "user_api_key.title" %></h1>
<div class='authorize-api-key'>
<% if @no_trust_level %>
  <h3>
  <%= t("user_api_key.no_trust_level") %>
  </h3>
<% elsif @generic_error %>
  <h3>
  <%= t("user_api_key.generic_error") %>
  </h3>
<% else %>
<p>
  <%= t("user_api_key.description", application_name: @application_name) %>
</p>
<p>
  <ul class='scopes'>
    <%- @localized_scopes.each do |scope| %>
      <li><%= scope %></li>
    <%- end %>
  </ul>
</p>
<%= form_tag(user_api_key_path) do %>
  <%= hidden_field_tag 'application_name', @application_name %>
  <%= hidden_field_tag 'access', @access %>
  <%= hidden_field_tag 'nonce', @nonce %>
  <%= hidden_field_tag 'client_id', @client_id %>
  <%= hidden_field_tag 'auth_redirect', @auth_redirect %>
  <%= hidden_field_tag 'push_url', @push_url %>
  <%= hidden_field_tag 'public_key', @public_key%>
  <%= hidden_field_tag 'scopes', @scopes%>
  <%= submit_tag t('user_api_key.authorize'), class: 'btn btn-danger', id: 'submit' %>
<% end %>
<script>
  window.__submitted = false;

  // prevent double submission which would invalidate the nonce
  document.getElementById('submit').addEventListener('click', function(e){
    if (window.__submitted) {
      e.preventDefault();
    } else {
      window.__submitted = true;
    }
  });
</script>
</div>
<% end %>