{% extends 'base.html' %}

{% block title %}
Feedme in React.js
{% endblock title %}

{% block styles %}
{{ block.super }}
{% endblock styles %}

{% block scripts %}
    <script src="https://fb.me/react-0.14.0.js"></script>
    <script src="https://fb.me/react-dom-0.14.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script>
      var csrf_token = "{{ csrf_token }}"
      var api_base = "{{ api_url }}";
      var order = {{ order.id }};
      var username = "{{ user.username }}"
      var user_id = {{ balance.id }}

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
                console.log("Setting csrf token in header", csrftoken)
            }
        }
    });
    </script>
{% endblock %}

{% block content %}
    <section id="feedme">
      <div id="bootstrap-messages" class="container"></div>
      <div id="feedme-main"></div>
    </section>

    <script src="{{ STATIC_URL }}js/feedme.min.js"></script>
{% endblock %}