{% extends "base.html" %}
{% load i18n wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}

{% block content %}

{% if articles|length is 1 %}

  <section class="content-page article-index-page">
    <div class="container">
    {% for page in articles %}
      {% include 'home/page_content.html' %}
    {% endfor %}
    </div>
  </section>

{% else %}
  {% if page.header_image %}
  {% image page.header_image fill-1908x400 as img %}
<div id="carousel-banner" class="slide">
	<div class="carousel-inner slick slick-initialized slick-slider" role="listbox">

		<div class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 1908px;"><div class="item slick-slide slick-active" data-slick-index="0" style="width: 1908px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;">
			<img style="background-image:url({{img.url}})">
		</div></div></div>

	</div>
</div>
  {% endif %}
  <section id="article-index" class="article-index-page">
    <div class="container">
    	<h2>{{ page.trans_title }}</h2>
    	<p class="lead">{{ page.trans_intro|richtext }}</p>
      {% if page.subscribe_action %}
        {% include 'home/subscription_form.html' %}
      {% endif %}
      <div class="article-body" role="main">
      {% for entry in articles %}
        <div class="item">
          <div class="article-caption">
            <h3><a href="{% pageurl entry %}">{{ entry.trans_title }}</a></h3>
            {{ entry.trans_intro|richtext }}
          </div>
        </div>
      {% endfor %}
      </div>
    </div><!-- /container -->
  </section>

{% endif %}

{% if subcategories %}
<section id="three" class="article-subcategories" class="wrapper align-center">
  <div class="container">
    <div class="row">
      {% for block in subcategories %}
      <article class="col-md-4">
				<a href="{% pageurl block %}">
          <header>
            <h4>{{ block.trans_title }}</h4>
          </header>
          <div class="image">
  					{% image block.feed_image fill-300x300 %}
  				</div>
        </a>
      </article>
      {% endfor %}
    </div>
  </div><!-- /container -->
</section>
{% endif %}
{% endblock %}