{% extends "base.html" %}
{% block title %}{{ site_name }}{% endblock %}

{% block body %}
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: "{{ fb_app_id }}", xfbml: true, version: "v2.9"});
  };

  function fb_login() {
    FB.login(function(response) {
      $.ajax({
        url: "{% url "auth:fb-login" %}",
        method: "POST",
        contentType: "application/json",
        data: JSON.stringify({signed_request: response.authResponse.signedRequest}),
      });
    }, {"scope": "public_profile,email"});
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, "script", "facebook-jssdk"));
</script>

<div id="fb-root"></div>

<div>
  <h1>Hello world!</h1>
  <button onclick="fb_login()">Login with Facebook</button>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
{% endblock %}