{% extends "base.html" %}

{% block content %}
        <section class="partners">
            <div class="container text-center">
                <img src="/static/images/partners/1.png" alt="British Pain Society - Capability Cloud Partners" />
                <img src="/static/images/partners/whichmedical.png" alt="Which Medical Device - Capability Cloud Partners" />
                <img src="/static/images/partners/bsir.png" alt="British Society of Interventional Radiology - Capability Cloud Partners" />
            </div>
        </section>

        <section class="modules">
            <div class="container text-center modules">
                <h2>{{ homepage.modules_heading }}</h2>
                <p>{{ homepage.modules_subheading }}</p>
            </div>
        </section>

        {% include 'elements/modules.html' %}

        <section class="services">
            <div class="container">
                <h2>{{ homepage.services_heading }}</h2>
                <div class="row">
                    <div class="col-xs-12 col-md-8 col-md-offset-2">
                        <p>
                            {{ homepage.services_subheading }}
                        </p>
                    </div>
                </div>
                
                {% for service in services %}
                    <div class="row service">
                        <div class="{% cycle 'col-xs-12 col-sm-5' 'col-xs-12 col-sm-5 col-sm-push-7' %}">
                            <h4>{{ service.title }}</h4>
                            <p>
                                {{ service.description }}
                            </p>
                        </div>
                        <div class="{% cycle 'col-xs-12 col-sm-7' 'col-xs-12 col-sm-7 col-sm-pull-5' %}">
                            <img src="{{ service.photo.full.url }}" alt="{{ service.title }}" />
                        </div>
                    </div>
                {% endfor %}
            </div>
        </section>
{% endblock %}