{# Settings tab of the app. #}

<div class="row-fluid">
  <div id="current_settings" class="span7">
      <h1>Settings</h1>

      <hr class="settings_separator invisible">

      <div id="api_key_button_box">
          <a href="#api-settings" id="api_key_button">Show API key</a>
      </div>
      <div id="get_api_key_box">
          <p>Please re-enter your password to confirm your identity.</p>
          <form action="/json/fetch_api_key" method="post" class="form-horizontal">{% csrf_token %}
              <div class="control-group">
                  <label for="password" class="control-label">Current password</label>
                  <div class="controls">
                      <input type="password" autocomplete="off"
                             name="password" id="get_api_key_password" value="" />
                  </div>
              </div>
              <div class="control-group">
                  <div class="controls">
                      <input type="submit" name="view_api_key" value="Get API key"
                             class="btn btn-primary" />
                  </div>
              </div>
          </form>
      </div>
      <div id="show_api_key_box">
          <p>API key:</p>
          <p><b><span id="api_key_value"></span></b></p>
      </div>

      <hr class="settings_separator">

      <div class="form-horizontal">
          <div class="control-group">
              <label class="control-label">Your avatar</label>
              <div class="controls">
                  <a href="https://en.gravatar.com/emails" target="_blank" class="change_gravatar_button">
                      <p><img class="img-rounded gravatar-profile"
                           src="https://secure.gravatar.com/avatar/{{ email_hash }}?d=identicon&s=80" /></p>
                      <p>Change at Gravatar.com</p>
                  </a>
              </div>
          </div>
      </div>

      <hr class="settings_separator">

      <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>

    <hr class="settings_separator" />

    <p><button class="btn declare_bankruptcy_button" data-dismiss="modal" aria-hidden="true">
      Declare Humbug bankruptcy
    </button></p>

    <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>