{# Settings tab of the app. #}

<div class="row-fluid">
  <div id="current_settings" class="span7">
    <h1>Settings</h1>
      <div id="API">
      <label>API Key</label>
      <div id="api_key_button_box">
        <a href="#api-settings" id="api_key_button">(show)</a>
        <br />
      </div>
      <div id="get_api_key_box">
        <form action="/json/fetch_api_key" method="post">{% 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" class="change_gravatar_button">
          (change at Gravatar.com)</a>
        <br />
      </div>
      <br /><br />
      <div id="settings-change-box">
      <form action="/json/settings/change" method="post"
            class="form-horizontal">{% csrf_token %}
        <div class="control-group">
            <label for="full_name" class="control-label">Full name</label>
            <div class="controls">
                <input type="text" name="full_name" id="full_name"
                       value="{{ user_profile.full_name }}" />
            </div>
        </div>

        <div class="control-group">
            <label for="old_password" class="control-label">Old password</label>
            <div class="controls">
                <input type="password" autocomplete="off"
                       name="old_password" id="old_password" value="" />
            </div>
        </div>

        <div class="control-group">
            <label for="new_password" class="control-label">New password</label>
            <div class="controls">
                <input type="password" autocomplete="off"
                       name="new_password" id="new_password" value="" />
            </div>
        </div>

        <div class="control-group">
            <label for="confirm_password" class="control-label">Confirm password</label>
            <div class="controls">
                <input type="password" autocomplete="off"
                       name="confirm_password" id="confirm_password" value="" />
            </div>
        </div>

        <div class="control-group">
            <label for="enable_desktop_notifications" class="control-label">
                Desktop notifications (Chrome only)</label>
            <div class="controls">
                <input type="checkbox" name="enable_desktop_notifications" id="enable_desktop_notifications"
                   {% if user_profile.enable_desktop_notifications %}
                   checked="yes"
                   {% endif %} />
            </div>
        </div>

        <div class="control-group">
            <div class="controls">
                <input type="submit" name="change_settings" value="Save changes" class="btn btn-big btn-primary" />
            </div>
        </div>
    </form>
    </div>

    <div class="alert" id="settings-status"></div>

    <br />
    <br />
    <hr />

    <div>
      <button class="btn declare_bankruptcy_button" data-dismiss="modal" aria-hidden="true">
        Declare Humbug bankruptcy
      </button>
      <p>
        Too many unread messages? Press this button to declare Humbug
        bankruptcy and travel to right now in your feed.
      </p>

      <p>
        Your historical messages will all still exist and be searchable.
      </p>
    </div>
  </div>

</div>