{% load facebook %}
<html>
<head>
</head>
<body>

<table>
  <tr><td>request.user</td><td>{{ request.user|pprint }}</td></tr>
  <tr><td>request.facebook.user_id</td><td>{{ request.facebook.user_id }}</td></tr>
  <tr><td>request.COOKIES</td><td><pre>{{ request.COOKIES|pprint }}</pre></td></tr>
  <tr><td>request.POST</td><td><pre>{{ request.POST|pprint }}</pre></td></tr>
  <tr><td>FB.getLoginStatus</td><td><span id="login-status">No fb user found</span></td></tr>
</table>

<div>
  <h1>Client side flow</h1>
  <fb:login-button autologoutlink="true"></fb:login-button>
</div>

<div>
  <h1>Server side flow</h1>
  {% if request.user.is_authenticated %}
    <a href="{% url "djfb_logout" %}">Log out</a>
  {% else %}
    <a href="{% facebook_login_url request %}">Log in</a>
  {% endif %}
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='{{ STATIC_URL }}js/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>
{% facebook_init %}
  var update = document.getElementById('login-status');

  FB.getLoginStatus(function(response) {
    if (response) {
      if (response.status === 'connected') {
        update.innerHTML = 'response: ' + JSON.stringify(response);
      } else if (response.status === 'not_authorized') {
        update.innerHTML = 'App is not authorized';
      } else {
        update.innerHTML = 'No fb user found';
      }
    } else {
      update.innerHTML = 'reponse is: ' + response;
    }
  });
  function loggedIn(response) {
    window.location.reload()
  }
  function loggedOut(response) {
    window.location.reload()
  }

  FB.Event.subscribe('auth.login', loggedIn);
  FB.Event.subscribe('auth.logout', loggedOut);

{% endfacebook_init %}
{% facebook_load %}

</body>
</html>
