{% extends "layout.html" %}
{% block title %}Your Account{% endblock %}
{% block script -%}
{{ importer.load_js('jquery.min') }}
{{ importer.load_js('jquery-ui.min') }}
<script type="text/javascript">
$(document).ready(function() {
  function post_api_key_query(elem) {
    $.ajax({
      url: "{{ url_for('api_generate_api_key') }}",
      dataType: 'json',
      type: 'POST',
      error: function(req, xxx, error) {
        alert('Unknown error occurred.');
      },
      success: function(data) {
        $('#api_key').html('<strong>' + data.apikey + '</strong>');
      }
    });
  };

  $('#new_key_button').click(function() {
    elem = $('#api_key');
    if (elem.text() != 'unset') {
      $('#warn_dialog').dialog({
        title: "API key already exists!",
        modal: true,
        buttons: {
        "Cancel": function() { $(this).dialog("close"); },
        "Generate New": function() { post_api_key_query(elem); $(this).dialog("close"); }
      }
      });
    } else
      post_api_key_query(elem);
  });
});
</script>
{{ importer.load_css('ui-lightness/jquery-ui') }}
{% endblock %}
{% block body %}
<h2>Account overview</h2>
<dl>
  <dt>Developer email</dt>
  <dd>{{ g.user.email }}</dd>
  <dt>API token <button id="new_key_button">Generate</button></dt>
  <dd>Your API token is <span id="api_key">
  {%- if g.user.apitoken -%}
  <tt>{{ g.user.apitoken }}</tt><br>
  Please keep it safe.
  {% else -%}
  unset
  {%- endif -%}
  </span>
  </dd>
</dl>
<span id="warn_dialog" style="display: none;">FIXME: Need a nice description here ;)</span>
{% endblock %}