{# Settings tab of the app. #}

<div class="row-fluid">
  <div id="current_settings" class="span9">
    <h1>Settings</h1>
      <div id="API">
      <label>API Key</label>
      <div id="api_key_button_box">
        <a href="#api-settings" id="api_key_button" onclick="ui.show_api_key_box();">(show)</a>
        <br />
      </div>
      <div id="get_api_key_box">
        <form action="/json/fetch_api_key" method="post" class="settings">{% csrf_token %}
          <label for="password">Enter your password to get your API key</label>
          <input type="password" autocomplete="off" name="password" id="get_api_key_password" value="" /><br />
          <input type="submit" name="view_api_key" value="Get API Key" class="btn" />
        </form>
      </div>
      <div id="show_api_key_box">
        <b><span id="api_key_value"></span></b>
      </div>
      <br />
      </div>
      <div id="Photo">
        <label>Photo</label>
        <img class="img-rounded gravatar-profile" src="https://secure.gravatar.com/avatar/{{ email_hash }}?d=identicon&s=80"/>
        <a href="https://en.gravatar.com/emails" target="_blank" onclick="ui.wait_for_gravatar();">(change at Gravatar.com)</a>
        <br />
      </div>
      <br /><br />
      <div id="settings-change-box">
    <form action="/json/settings/change" method="post"
    class="settings">{% csrf_token %}
      <table>
      <tr>
        <td><label for="full_name">Full name: </label></td>
        <td>
          <input type="text" name="full_name" id="full_name"
                 value="{{ user_profile.full_name }}" />
        </td>
      </tr>
      <tr>
        <td><label for="old_password">Old password: </label></td>
        <td>
          <input type="password" autocomplete="off"
                 name="old_password" id="old_password" value="" />
        </td>
      </tr>
      <tr>
        <td><label for="new_password">New password: </label></td>
        <td>
          <input type="password" autocomplete="off"
                 name="new_password" id="new_password" value="" />
        </td>
      </tr>
      <tr>
        <td><label for="confirm_password">Confirm password: </label></td>
        <td><input type="password" autocomplete="off"
                   name="confirm_password" id="confirm_password"
                   value="" />
        </td>
      </tr>
      </table>
      <table>
      <tr>
        <td><label for="enable_desktop_notifications">Enable desktop notifications (Chrome only): &nbsp;</label></td>
        <td><input type="checkbox" name="enable_desktop_notifications" id="enable_desktop_notifications"
                   {% if user_profile.enable_desktop_notifications %}
                   checked="yes"
                   {% endif %}
             />
         </td>
      </tr>
      </table>
      <input type="submit" name="change_settings" value="Save changes" class="btn" />
    </form>
    </div>
    <div class="alert" id="settings-status"></div>
  </div>
</div>