{% extends "oscar/layout_3_col.html" %}
{% load promotion_tags staticfiles ocyan_wagtail %}

{% block content_wrapper %}

{% block header %}
<div class="container page">
    <div class="page-header" style="background-image:url('{% block headerimage %}{{ block.super }}{% endblock %}');">
        <h1>{% block headertext %}{% endblock %}</h1>
    </div>
{% endblock %}

        {% block breadcrumbs %}{% endblock %}

        <div class="row column-flex-wrapper">
            {% captureas column_left_output %}{% spaceless %}
            {% block column_left %}
                {% if promotions_left %}
                    <div id="promotions_left">
                        {% for promotion in promotions_left %}
                            {% render_promotion promotion %}
                        {% endfor %}
                    </div>
                {% endif %}
            {% endblock %}
            {% endspaceless %}{% endcaptureas %}

            {% captureas column_center_output %}{% spaceless %}
                {% include "partials/alert_messages.html" %}

                <div id="promotions">
                    {% for promotion in promotions_page %}
                        {% render_promotion promotion %}
                    {% endfor %}
                </div>

                {% block content %}{% endblock %}
            {% endspaceless %}{% endcaptureas %}

            {% captureas column_right_output %}{% spaceless %}
            {% block column_right %}
                {% if promotions_right %}
                    <div id="promotions_right">
                        {% for promotion in promotions_right %}
                            {% render_promotion promotion %}
                        {% endfor %}
                    </div>
                {% endif %}
            {% endblock %}
            {% endspaceless %}{% endcaptureas %}

            {% if column_left_output and column_right_output %}
                <div class="col-sm-3 col-md-3 col-xs-12 left-column">
                    {{ column_left_output }}
                </div>
                <div class="col-sm-6 col-md-6 col-xs-12 center-column">
                    {{ column_center_output }}
                </div>
                <div class="col-sm-3 col-md-3 col-xs-12 right-column">
                    {{ column_right_output }}
                </div>
            {% elif column_left_output or column_right_output %}
                {% if column_left_output %}
                    <div class="col-sm-4 col-md-3 col-xs-12 left-column">
                        {{ column_left_output }}
                    </div>
                {% endif %}
                <div class="col-sm-8 col-md-9 col-xs-12 center-column">
                    {{ column_center_output }}
                </div>
                {% if column_right_output %}
                    <div class="col-sm-4 col-md-3 col-xs-12 right-column">
                        {{ column_right_output }}
                    </div>
                {% endif %}
            {% else %}
                <div class="col-sm-12 col-md-12 col-xs-12 center-column">
                    {{ column_center_output }}
                </div>
            {% endif %}

        </div>
</div><!-- /container-fluid -->
{% endblock %}