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

{% block content %}
    <section class="banner" style="background-image: url({% if page.banner %}{{ page.banner.url }}{% endif %})">
        <div class="content">
            <div class="container">
                {{ page.banner_content|safe }}
            </div>
        </div>
    </section>

    <div class="container" style="margin-top: -60px;">
        <ul class="postit-wrapper" data-count="4">
            {% if page.folded_block_1 %}{% include 'partials/postit.html' with block=page.folded_block_1 %}{% endif %}
            {% if page.folded_block_2 %}{% include 'partials/postit.html' with block=page.folded_block_2 %}{% endif %}
            {% if page.folded_block_3 %}{% include 'partials/postit.html' with block=page.folded_block_3 %}{% endif %}
            {% if page.folded_block_4 %}{% include 'partials/postit.html' with block=page.folded_block_4 %}{% endif %}
        </ul>
    </div>

    <section class="text-center">
        <div class="container">
            <h2>{{ page.about_us_title}}</h2>
            {{ page.about_us_content|safe }}
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                {% if page.call_to_action_1 %}<div class="col-md-3">{% include 'partials/call_to_action.html' with cta=page.call_to_action_1 %}</div>{% endif %}
                {% if page.call_to_action_2 %}<div class="col-md-3">{% include 'partials/call_to_action.html' with cta=page.call_to_action_2 %}</div>{% endif %}
                {% if page.call_to_action_3 %}<div class="col-md-3">{% include 'partials/call_to_action.html' with cta=page.call_to_action_3 %}</div>{% endif %}
                {% if page.call_to_action_4 %}<div class="col-md-3">{% include 'partials/call_to_action.html' with cta=page.call_to_action_4 %}</div>{% endif %}
            </div>
        </div>
    </section>

    <section class="shaded">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>Latest News</h1>
                    {% for article in news %}
                        <div class="article-brief">
                            <h2>{{ article.title }}</h2>
                            <div class="date"><i class="fa fa-calendar"></i> {{ article.date|date:"d M Y"|upper }}</div>
                            {{ article.content|striptags|safe|linebreaks }}
                            <hr />
                        </div>
                    {% endfor %}
                </div>
                <div class="col-md-6">
                    <h1>Tests</h1>
                    <div class="panel-group panel-green" id="tests" role="tablist" aria-multiselectable="true">
                        {% for test in tests %}
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#tests" href="#tests{{ forloop.counter }}" class="{{ forloop.counter0|yesno:"collapsed," }}">
                                            <i class="fa fa-user"></i> {{ test.name }}
                                        </a>
                                    </h4>
                                </div>
                                <div id="tests{{ forloop.counter }}" class="panel-collapse collapse {{ forloop.counter0|yesno:",in" }}" role="tabpanel">
                                    <div class="panel-body">
                                        {{ test.description|striptags|linebreaks }}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-md-push-9">
                    <h2>{{ page.doctors_title }}</h2>
                    {{ page.doctors_brief|safe }}
                    <a href="{% url 'pages:about' %}" class="btn btn-flat btn-green">View All</a>
                </div>
                <div class="col-md-9 col-md-pull-3">
                    <div class="row">
                        {% if page.doctor_1 %}
                            <div class="col-xs-6 col-xs-offset-3 col-sm-offset-0 col-sm-6 col-md-4">
                                {% include 'partials/doctor.html' with doctor=page.doctor_1 %}
                            </div>
                        {% endif %}
                        {% if page.doctor_2 %}
                            <div class="col-xs-6 col-xs-offset-3 col-sm-offset-0 col-sm-6 col-md-4">
                                {% include 'partials/doctor.html' with doctor=page.doctor_2 %}
                            </div>
                        {% endif %}
                        {% if page.doctor_3 %}
                            <div class="col-xs-6 col-xs-offset-3 col-sm-offset-0 col-sm-6 col-md-4">
                                {% include 'partials/doctor.html' with doctor=page.doctor_3 %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="shaded" style="padding: 40px 0; margin: 0;">
        <div class="container">
            <div class="text-center">
                <h1>{{ page.feedback_title }}</h1>
                {{ page.feedback_content|safe }}
                <p>Click here to <a href="#">read more</a></p>
            </div>
            <div class="row" style="margin-top: 40px">
                {% for f in feedback %}
                    <div class="col-md-4">
                        <h4>{{ f.name }}</h4>
                        {{ f.feedback|linebreaks }}
                        <p class="primary italic">{{ f.when }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>

        <hr style="margin: 50px" />

        <div class="slick">
            {% for partner in partners %}
                <div>
                    {% if partner.link %}<a href="{{ partner.link }}" target="_blank">{% endif %}
                        <img src="{% thumbnail partner.logo 230x75 %}" alt="{{ partner.name }}" />
                    {% if partner.link %}</a>{% endif %}
                </div>
            {% endfor %}
        </div>
    </section>
{% endblock %}