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

{% block whole_title %}Pancreatic Society of Great Britain and Ireland{% endblock %}

{% block header_class %}home_header{% endblock %}

{% block banner_image %}
    {% if homepage_settings.banner %}
        <img class="responsive" src="{% thumbnail homepage_settings.banner '1920x611' %}" alt=""/>
    {% endif %}
{% endblock %}

{% block banner_strap %}
    <div class="row">
        <div class="col-md-9">
            <div class="banner-title white">{{ homepage_settings.banner_strapline }}</div>
        </div>
    </div>
{% endblock %}

{% block banner_mobile %}

    {% if homepage_settings.mobile_banner %}
        <div id="banner_mob" class="jumbotron visible-xs-block">
            <img class="item img-responsive fullsize" src="{% thumbnail homepage_settings.mobile_banner '768x376' crop %}" alt=""/>
            <div class="overlay"></div>

            <div class="banner_inner">
                <div class="banner_text">
                    <h1>{{ homepage_settings.banner_title }}</h1>
                    <h2>{{ homepage_settings.banner_subtitle }}</h2>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}

{% block main_content %}

    <div class="container" id="homepage_content">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="title-main w70">{{ homepage_settings.main_title }}</h1>
                <hr class="ruler-short" />
                <div class="title-main-strap w70"><p>{{ homepage_settings.main_subtitle }}</p></div>
            </div>
        </div>

        <div id="actions" class="row">
            {% if block_layout %}
                {% include block_layout.get_public_template %}
            {% endif %}
        </div>
    </div>

    {% comment %}<hr class="ruler-long" />

    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <h2 class="title-sub w70">{{ homepage_settings.secondary_title }}</h2>
                <hr class="ruler-short" />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <div class="text">
                    {{ homepage_settings.left_content|safe }}
                    {{ homepage_settings.right_content|safe }}
                </div>
            </div>
        </div>
    </div>{% endcomment %}

    <hr class="ruler-long" style="margin-top: 60px;"/>

    {% comment %}
    <div id="news" class="container-fluid">
        <div class="row">
            <div class="col-sm-6 col-xs-12 text-right">

                <div class="news_feed inner-padding-right pull-right">
                    <h2 class="title-sub"><a href="{% url 'media_section' 'news' %}">News</a></h2>
                    <span class="ruler-short" style="display:inline-block;"></span>

                    {% if news_articles %}
                        {% for article in news_articles %}
                            <div class="article">
                                <h3><a href="{% url 'media_article' article.section.slug article.slug %}">{{ article }}</a></h3>
                                <p class="date">{{ article.created|date:'jS F Y' }}</p>
                                <p class="description">{{ article.description }}</p>
                                <a class="btn btn-purple" href="{% url 'media_article' article.section.slug article.slug %}">Read more</a>
                                <hr class="ruler-long" />
                            </div>
                        {% endfor %}
                        <br />
                    {% endif %}
                </div>
                <div class="clear-fix"></div>
            </div>
            <div class="col-sm-6 col-xs-12" style="border-left: 1px solid #411f51; height: 650px;">
                <div class="events_feed inner-padding-left">
                    <h2 class="title-sub"><a href="{% url 'media_section' 'events' %}">Upcoming Events</a></h2>
                    <span class="ruler-short" style="display:inline-block;"></span>
                    {% if event_articles %}
                        {% for article in event_articles %}
                            <div class="article">
                                <h3><a href="{% url 'media_article' article.section.slug article.slug %}">{{ article }}</a></h3>
                                <p class="date">{{ article.event_date_start|date:'jS F Y' }}</p>
                                <p class="description">{{ article.description }}</p>
                                <a class="btn btn-purple" href="{% url 'media_article' article.section.slug article.slug %}">Read more</a>
                                <hr class="ruler-long" />
                            </div>
                        {% endfor %}
                        <br />
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endcomment %}
    <div class="clearfix"></div>

{% endblock %}