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

{% block whole_title %}{{ homepage_settings.head_title }}{% endblock %}

{% block meta_description %}{% if homepage_settings.meta_description %}{{ homepage_settings.meta_description }}{% endif %}{% endblock %}

{% block main_content %}
    {% if banners %}
        <div class="hero-slider hidden-xs">
            <div class="slider-rev-cont">
                <div class="tp-banner-container">
                    <div class="tp-limited">
                        <ul>
                            {% for banner in banners %}
                                <!-- SLIDE  -->
                                <li data-delay="5000" data-masterspeed="600" data-slotamount="7" data-transition="fade">
                                    <!-- MAIN IMAGE -->
                                    <img src="{{ banner.image|thumbnail:'1800x565' }}" alt=""/>

                                    <!-- LAYER NR. 3 -->
                                    <div class="tp-caption text-align-center h2 sfr whiter tp-resizeme"
                                        data-x="center"
                                        data-hoffset="0"
                                        data-y="center"
                                        data-voffset="55"
                                        data-speed="600"
                                        data-start="500"
                                        data-easing="Back.easeInOut"
                                        data-endspeed="300">
                                        {{ banner.text|linebreaksbr }}
                                    </div>
                                    <!-- LAYER NR. 4 -->
                                    {% if banner.link %}
                                        <h1 class="tp-caption fade whiter tp-resizeme"
                                            data-x="center"
                                            data-hoffset="0"
                                            data-y="center"
                                            data-voffset="155"
                                            data-speed="1000"
                                            data-start="1500"
                                            data-easing="Back.easeInOut"
                                            data-endspeed="300">
                                            <a href="{{ banner.link }}" class="btn btn-lg btn-default">{{ banner.link_text }}</a>
                                        </h1>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="double-border"></div>

    <div class="lead-block">
        <div class="container">
            <div id="home_blocks" class="row">
                {% for join_reason in join_reasons %}
                    <div class="{% if join_reasons.count == 4 %}col-md-3 col-sm-6{% else %}col-md-4 col-sm-4{% endif %}">
                        <div class="icon-block">
                            {% if join_reason.link %}<a href="{{ join_reason.link }}" title="join_reason">{% endif %}
                            <span class="icon label-default"><i class="fa {{ join_reason.icon }}"></i><span class="sr-only">{{ join_reason }}</span></span>
                            {% if join_reason.link %}</a>{% endif %}
                            <h2>{% if join_reason.link %}<a href="{{ join_reason.link }}">{{ join_reason }}</a>{% else %}{{ join_reason }}{% endif %}</h2>
                            <p>{{ join_reason.content|safe }}</p>
                        </div>
                    </div>
                    {% if join_reasons.count == 4 %}
                        {% if forloop.counter|divisibleby:'4' %}
                            <div class="clearfix"></div>
                        {% elif forloop.counter|divisibleby:'2' %}
                            <div class="clearfix visible-sm"></div>
                        {% endif %}
                    {% else %}
                        {% if forloop.counter|divisibleby:'3' %}
                            <div class="clearfix"></div>
                        {% endif %}
                    {% endif %}
                {% endfor %}
                <div class="text-align-center">
                    <div class="spacer-20"></div>
                    <a href="/register/" class="btn btn-primary btn-lg secondary-color-bg">Join now</a>
                </div>
            </div>
            <div class="row home-content-background">
                <div class="col-xs-12">
                    <h2>Background</h2>
                    {{ homepage_settings.background_introduction|safe }}
                </div>
            </div>
            <div class="row home-content-cols">
                {% for background_area in background_areas %}
                    <div class="col-sm-4 col-xs-12 {% if not forloop.first %}home-content-cols{% endif %}">
                        <h4>{{ background_area }}</h4>
                        {{ background_area.content|safe }}
                    </div>
                {% endfor %}
            </div>
            <hr style="margin:0;">
        </div>
    </div>

    <div class="main" role="main">
        <div id="content" class="content full">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 border-col">
                        <!-- Latest Posts -->
                        <div class="latest-posts">
                            <h3 class="title"><i class="fa fa-folder"></i> Latest News</h3>
                            {% if news_articles %}
                                <ul class="posts-listing">
                                    {% for article in news_articles %}
                                        <li class="post-list-item format-standard">
                                            <div class="row">
                                                <div class="col-md-5 col-sm-6" data-appear-animation="fadeInLeft" data-appear-animation-delay="1">
                                                    {% if article.image %}
                                                        <a href="{% url 'media_article' article.section.slug article.slug %}" class="media-box"><img src="{{ article.image|thumbnail:'400x300' }}" alt="" class="img-thumbnail post-thumb" title="{{ article }}"></a>
                                                    {% endif %}
                                                </div>
                                                <div class="col-md-7 col-sm-6" data-appear-animation="fadeInLeft" data-appear-animation-delay="1">
                                                    <h3 class="post-title"><a href="{% url 'media_article' article.section.slug article.slug %}">{{ article }}</a></h3>
                                                    <span class="post-time meta-data">{{ article.created|date:'D jS M, Y' }}</span>
                                                    <p class="post-excerpt">{{ article.description }}</p>
                                                </div>
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                           <a href="/mediacentre/news/" class="btn toblog btn-default pull-right">All News</a>
                       </div>
                    </div>
                    <!-- Sidebar -->
                    <div class="col-md-4 sidebar right-sidebar">
                        <div class="widget sidebar-widget upcoming-events-widget">
                            <h3 class="title widgettitle"><i class="fa fa-calendar"></i> Upcoming Events</h3>
                            {% if event_articles %}
                                <ul class="upcoming-events">
                                    {% for article in event_articles %}
                                        <li data-appear-animation="fadeInRight" data-appear-animation-delay="1">
                                            {% if article.image %}
                                                <img src="{{ article.image|thumbnail:'80x80' }}" alt="{{ article }}" class="img-thumbnail event-thumb">
                                            {% endif %}
                                            <div class="event-excerpt">
                                                <div class="event-cats meta-data"><a href="{% url 'media_article' article.section.slug article.slug %}">{{ article.event_date_start|date:'D jS M, Y' }}</a></div>
                                                <h5 class="event-title"><a href="{% url 'media_article' article.section.slug article.slug %}">{{ article }}</a></h5>
                                                {% if article.event_location %}
                                                    <p class="event-location"><i class="fa fa-map-marker"></i> {{ article.event_location }}</p>
                                                {% endif %}
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                            <div class="upcoming-events-footer">
                                <hr class="sm">
                                <a href="/mediacentre/events/">See all events</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Our Sponsors -->
    <div class="partners">
        <div class="container">
            <h2 class="title">Sponsors</h2>
            <div class="row">
                <div class="col-xs-12 partners_container">
                    <div class="partner" data-appear-animation="fadeInDown" data-appear-animation-delay="10" style="display:inline-block;">
                        <a href="http://www.jpf.go.jp/e/index.html"  target="_blank"><img src="{% static 'images/sponsors/japan-foundation.png' %}" alt="Japan Foundation" class="img-responsive"/></a>
                    </div>
                    <div class="partner" data-appear-animation="fadeInDown" data-appear-animation-delay="100" style="display:inline-block;">
                        <a href="http://www.dajf.org.uk/" target="_blank"><img src="{% static 'images/sponsors/daiwa.png' %}" alt="Daiwa" class="img-responsive"/></a>
                    </div>
                    <div class="partner" data-appear-animation="fadeInDown" data-appear-animation-delay="200" style="display:inline-block;">
                        <a href="http://www.gbsf.org.uk/" target="_blank"><img src="{% static 'images/sponsors/sasakawa.png' %}" alt="Sasakawa" class="img-responsive"/></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}