{% extends "public/content.html" %}
{% load thumbnail %}
{% load resource_extras %}

{% block meta_description %}{{ page.introduction }}{% endblock %}

{% block headtitle %}{{ page.title }}{% endblock %}

{% block headscript %}
    <script type="text/javascript">
        $(document).ready(function(){
            $('#page img').each(function(){
                $(this).addClass('img-responsive');
                $(this).css('height','auto');
                //$(this).css('max-width') = '100% !important';
            });

            $('#page table').each(function(){
                $(this).wrap('<div class="table-responsive"></div>');
                $(this).addClass('table');
            });

            $('#page table img').each(function(){
                $(this).removeClass('img-responsive');
            });

            $('#page iframe').each(function(){
                $(this).wrap('<div class="embed-responsive embed-responsive-16by9"/>');
                $(this).addClass('embed-responsive-item');
            });
        });
    </script>
{% endblock %}


{% block left_content %}
	{% if top_level_page.get_subpages %}
		<div class="page_navigation">
            <h2 {% if top_level_page.get_full_url = page.get_full_url %}class="active"{% endif %}><a href="/{{ top_level_page.get_full_url }}">{{ top_level_page }}</a></h2>
            <ul class="nav nav-pills">
    			{% for sub_page in top_level_page.get_subpages %}
    				<li {% if sub_page.get_full_url = page.get_full_url %}class="active"{% endif %}>
                        <a href="/{{ sub_page.get_full_url }}">{{ sub_page }}</a>
                        {% if sub_page.get_full_url = page.get_full_url or sub_page.get_full_url = page.parent.get_full_url %}
                            {% if sub_page.get_subpages %}
    					        <ul class="nav nav-pills">
    							    {% for sub_sub_page in sub_page.get_subpages %}
        								<li {% if sub_sub_page.get_full_url = page.get_full_url %}class="active"{% endif %}>
                                            <a href="/{{ sub_sub_page.get_full_url }}">{{ sub_sub_page }}</a>
                                        </li>
        							{% endfor %}
        						</ul>
                            {% endif %}
                        {% endif %}
    				</li>
    			{% endfor %}
    		</ul>
        </div>
	{% endif %}
{% endblock %}


{% block title %}
	<ul class="breadcrumb">
        <li><a href="/">Home</a></li>
        {% for breadcrumb_page in page.get_breadcrumbs %}
            <li {% if forloop.last %}class="active"{% endif %}><a href="/{{ breadcrumb_page.get_full_url }}">{{ breadcrumb_page }}</a></li>
        {% endfor %}
    </ul>

	<h1>{{ page.title }}</h1>

{% endblock %}

{% block content %}
	<div id="page">
		{% if page.introduction %}
			<div class="introduction">
				{% if page.introduction_image %}
					<div class="text">{{ page.introduction|linebreaks }}</div>
					<div class="image">
						<img src="{% thumbnail page.introduction_image '742x400' %}" alt="{{ page.title }}" class="img-responsive"/>
					</div>
				{% else %}
					{{ page.introduction|linebreaks }}
				{% endif %}
				<div class="clear"></div>
			</div>
		{% endif %}

        {% if page.intro_page and page.get_blocks %}
            <div id="page_blocks">
                <div class="row">
                    {% for block in page.get_blocks %}
                        <div class="col-md-4 {% cycle 'clear' '' '' %} block">
                            <div class="image">
                                <a href="{{ block.link }}"><img src="{% thumbnail  block.image.image '234x182' crop %}" alt="{{ block }}" class="img-responsive" /></a>
                            </div>
                            <div class="title">
                                <h3><a href="{{ block.link }}">{{ block }}</a></h3>
                                <p>{{ block.content|linebreaksbr }}</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}


		{{ page.content|safe }}

		{% if sections %}
			<table id="tableofcontents">
				<tbody>
					<tr>
						<td>
							<h2>Contents</h2>
							<ol>
								{% for section in sections %}
									{% if section.is_title %}
										</ol>
											<p><a href="#{{ section.title|slugify }}">{{ section }}</a></p>
										<ol>
									{% else %}
										<li><a href="#{{ section.title|slugify }}">{{ section }}</a></li>
									{% endif %}
								{% endfor %}
							</ol>
						</td>
					</tr>
				</tbody>
			</table>

			<div id="pagesections">
				{% for section in sections %}
					{% if section.is_title %}
						<div class="section">
							<h2 class="header" id="{{ section.title|slugify }}">{{ section }}</h1 s>
							{{ section.content|safe }}
						</div>
					{% else %}
						<div class="section">
							<h2 id="{{ section.title|slugify }}">{{ section }}</h2>
							{{ section.content|safe }}
						</div>
					{% endif %}


					{% if section|get_resources:request %}
                        <div cass="clearfix"></div>
        				<div class="sectionresources">
        					{% for resource in section|get_resources:request %}
            					{% if resource.resource.category.template %}
            					    {% include resource.resource.category.template with resource=resource.resource %}
            					{% else %}
                                    {% include "public/resources/default.html" with resource=resource.resource %}
                				{% endif %}
            				{% endfor %}
            			</div>
            		{% endif %}

					<p class="top"><a href="#top">Back to top</a></p>
				{% endfor %}
			</div>
		{% endif %}

		{% if resources %}
            <div cass="clearfix"></div>
			<div id="pageresources">
				{% for resource in resources %}
					{% if resource.resource.category.template %}
					    {% include resource.resource.category.template with resource=resource.resource %}
					{% else %}
                        {% include "public/resources/default.html" with resource=resource.resource %}
    				{% endif %}
				{% endfor %}
			</div>
		{% endif %}

	</div>
{% endblock %}