{% extends "layout.html" %}
{% load i18n %}
{% load promotion_tags %}
{% load category_tags %}
{% load stripe_tags %}
{% load static %}

{% block title %}Checkout{% endblock %}
{% block body_class %}checkout{% endblock %}

{% block layout %}

    {% block navigation %}
        {% include "partials/nav_primary.html" %}
    {% endblock %}

    <header class="header container-fluid">
        {% block checkout_nav %}{% endblock %}
    </header><!-- /header -->

    <div class="container page">
        <div class="page_inner">
            {% include 'partials/alert_messages.html' %}

            <div class="sub-header">
                <h1 class="page-header">{% block checkout_title %}{% endblock %}</h1>
            </div>

            <!-- The main nav on checkout pages contain links to modal flatpages -->
            {% block modal %}
                {% load flatpages %}
                {% get_flatpages '/order/' as flatpages %}
                {% for page in flatpages %}
                    <div id="{{ page.title|slugify }}" class="modal hide fade">
                        <div class="modal-header">
                            <a class="close" data-dismiss="modal">×</a>
                            <h3>{{ page.title }}</h3>
                        </div>
                        <div class="modal-body">
                            <div class="large-content">
                                {{ page.content|safe }}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endblock %}

            {% block content %}{% endblock %}

            <div id="promotions">
                {% for promotion in promotions_page %}
                    {% render_promotion promotion %}
                {% endfor %}
            </div>
        </div><!-- /page_inner -->
    </div>
    {% include "partials/footer_checkout.html" %}
{% endblock %}
{% block extrascripts %}
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
        var stripe = Stripe('{% stripe_pk %}');
    </script>
    <script type="text/javascript" src="{% static 'js/checkout.js' %}"></script>
    {{ block.super }}
{% endblock %}