{% extends ":nature:base.html.twig" %}

{% block content %}
<div class="container">
{% if slotHasContent(['top1', 'top2', 'top1', 'top3']) %}
    <div class="row">
    {% if slotHasContent('top1') %}
        <div class="col-xs-12 col-sm-4" data-slot-container="1">{{ slot('top1') }}</div>
    {% endif %}
    {% if slotHasContent('top2') %}
        <div class="col-xs-12 col-sm-4" data-slot-container="1">{{ slot('top2') }}</div>
    {% endif %}
    {% if slotHasContent('top3') %}
        <div class="col-xs-12 col-sm-4" data-slot-container="1">{{ slot('top3') }}</div>
    {% endif %}
    </div>
{% endif %}

{% if slotHasContent(['right3', 'right2', 'right1', 'main', 'left3', 'left2', 'left1']) %}
    <div class="row">
        {% if slotHasContent(['left3', 'left2', 'left1']) %}
        <div class="col-xs-12 col-sm-2">
            {% if slotHasContent('left1') %}
            <div class="row">
                <div class="col-xs-12" data-slot-container="1">
                    {{ slot('left1') }}
                </div>
            </div>
            {% endif %}

            {% if slotHasContent('left2') %}
            <div class="row">
                <div class="col-xs-12" data-slot-container="1">
                    {{ slot('left2') }}
                </div>
            </div>
            {% endif %}

            {% if slotHasContent('left3') %}
            <div class="row">
                <div class="col-xs-12" data-slot-container="1">
                    {{ slot('left3') }}
                </div>
            </div>
            {% endif %}
        </div>
        {% endif %}

        {% if slotHasContent('main') %}
        <div class="col-xs-12 col-sm-8" data-slot-container="1">
            {{ slot('main') }}
        </div>
        {% endif %}

        {% if slotHasContent(['right3', 'right2', 'right1']) %}
        <div class="col-xs-12 col-sm-2">
            {% if slotHasContent('right1') %}
            <div class="row" data-slot-container="1">
                <div class="col-xs-12">
                    {{ slot('right1') }}
                </div>
            </div>
            {% endif %}

            {% if slotHasContent('right2') %}
            <div class="row">
                <div class="col-xs-12" data-slot-container="1">
                    {{ slot('right2') }}
                </div>
            </div>
            {% endif %}

            {% if slotHasContent('right3') %}
            <div class="row">
                <div class="col-xs-12" data-slot-container="1">
                    {{ slot('right3') }}
                </div>
            </div>
            {% endif %}
        </div>
    {% endif %}
    </div>
    {% endif %}

    {% if slotHasContent(['bottom1', 'bottom2', 'bottom3']) %}
    <div class="main-block bg-primary row">
        {% if slotHasContent('bottom1') %}
        <div class="col-xs-12 col-sm-4" data-slot-container="1">{{ slot('bottom1') }}</div>
        {% endif %}
        {% if slotHasContent('bottom2') %}
        <div class="col-xs-12 col-sm-4" data-slot-container="1">{{ slot('bottom2') }}</div>
        {% endif %}
        {% if slotHasContent('bottom3') %}
        <div class="col-xs-12 col-sm-4" data-slot-container="1">{{ slot('bottom3') }}</div>
        {% endif %}
    </div>
    {% endif %}

    {% if slotHasContent('footer') %}
    <div class="row">
        <div class="col-xs-12" data-slot-container="1">{{ slot('footer') }}</div>
    </div>
    {% endif %}
    
</div>
<div class="copyright text-center" data-slot-container="1">
    <div data-slot="text">
        <small>Background <a href="https://flic.kr/p/ppk9JE" alt="Narrow river">photo</a> by Christopher Michel</small>
    </div>
</div>
{% endblock %}