{% extends "base.html" %}
{% load staticfiles %}

{% block content %}
    <section id="banner">
        <div class="container-fluid">
            <div class="image"></div>
            <div class="text">
                <h1>{{ website_settings.banner_title }}</h1>
                <h2>{{ website_settings.banner_subtitle|linebreaksbr }}</h2>
                <a href="#register_interest" class="btn btn-primary">Register your Interest</a>
            </div>
            <div class="banner_bottom hidden-xs">
                <div class="image">
                    <img src="{% static 'images/banner-bottom-1.png' %}" alt=""/>
                </div>
                <div class="image">
                    <img src="{% static 'images/banner-bottom-2.png' %}" alt=""/>
                </div>
                <div class="image">
                    <img src="{% static 'images/banner-bottom-3.png' %}" alt=""/>
                </div>
                <div class="image">
                    <img src="{% static 'images/banner-bottom-4.png' %}" alt=""/>
                </div>
            </div>
        </div>
    </section>

    <section id="reasons">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 reasons_title">
                    <h2>{{ website_settings.reasons_title }}</h2>
                    <span class="line"></span>
                </div>
            </div>
            <div class="row">
                {% for reason in reasons %}
                    <div class="col-xs-12 col-md-4 reason">
                        <div class="icon">
                            <img src="{{ reason.icon.url }}" alt="{{ reason.title }}"/>
                        </div>
                        <h3>{{ reason.title }}</h3>
                        <p>{{ reason.description }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <section id="order">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-offset-2 col-md-8">
                    <h2>{{ website_settings.order_title }}</h2>
                    <hr/>
                    <h3 class="price">&pound;{{ website_settings.order_price|floatformat:2 }}</h3>
                    <p class="price_text">{{ website_settings.order_price_sub|linebreaksbr }}</p>
                    <hr/>
                    {{ website_settings.order_content|safe }}
                    <a class="btn btn-basic discount_button">{{ website_settings.order_button_text }}</a><br/>
                    <a href="#register_interest" class="btn btn-primary">Register your Interest</a>
                </div>
            </div>
        </div>
    </section>

    <section id="features">
        {% for feature in features %}
            <div class="feature {% cycle 'odd' 'even' %}{% if forloop.last %}last{% endif %}">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-md-5 feature_image {% if not forloop.counter|divisibleby:2 %}visible-xs visible-sm {% endif %}">
                            <img src="{{ feature.image.url }}" alt="{{ feature.title }}" class="img-responsive"/>
                        </div>
                        <div class="col-md-5 col-xs-12 {% if forloop.counter|divisibleby:2 %}col-md-offset-1{% endif %} feature_text">
                            <h3>{{ feature.title }}</h3>
                            <p>{{ feature.description|linebreaksbr }}</p>
                            <a class="btn btn-primary" href="#register_interest">Register your Interest</a>
                        </div>
                        {% if not forloop.counter|divisibleby:2 %}
                            <div class="col-md-6 col-md-offset-1 feature_image hidden-xs hidden-sm">
                                <img src="{{ feature.image.url }}" alt="{{ feature.title }}" class="img-responsive"/>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </section>

    <section id="register_interest">
        <div class="container">
            <h2>{{ website_settings.interest_title }}</h2>
            <p class="subtitle">{{ website_settings.interest_sub_title }}</p>

            <form action="#register_interest" method="POST" id="register_interest_form">
                <div class="form_content">
                    {% include "interest-form.html" %}
                </div>
            </form>
        </div>
    </section>
{% endblock %}