{% extends 'website/base.html' %}
{% load fiber_tags thumbnail %}
{% load url from future %}

{% block bodyclass %}home{% endblock %}

{% block content %}

<div id = 'main-gallery'>

    <div id ='main-text'>
        <div id ='text-0' class = 'target first'>{% show_content 'Home header' %}</div>
        <div id ='text-1' class = 'target'>{% show_content 'Home header 1' %}</div>
        <div id ='text-2' class = 'target'>{% show_content 'Home header 2' %}</div>
        <div id ='text-3' class = 'target'>{% show_content 'Home header 3' %}</div>
    </div>

    <div class = 'item active' rel = '#text-1'>
        <a class = 'img-wrap' href = '/dukung-indonesia-mengajar/jadi-pengajar-muda/'>
            <img src = '{{ STATIC_URL }}website/img/cta_pengajar.jpg'>
            <canvas width=290 height=150></canvas>
        </a>
        <a href = '/dukung-indonesia-mengajar/jadi-pengajar-muda/' class = 'button teach cta'><span>Gabung jadi pengajar<span class = 'arrow'></span></span></a>
    </div>

    <div class = 'item' rel = '#text-2'>
        <a class = 'img-wrap' href = '{% url 'website:volunteer' %}'>
            <img src = '{{ STATIC_URL }}website/img/cta_penyala.jpg'>
            <canvas width=290 height=150></canvas>
        </a>
        <a href = '{% url 'website:volunteer' %}' class = 'button partner cta'><span>Gabung jadi relawan<span class = 'arrow'></span></span></a>
    </div>

    <div class = 'item last' rel = '#text-3'>
        <a class = 'img-wrap' href = '{% url 'website:donations:index' %}'>
            <img src = '{{ STATIC_URL }}website/img/cta_donasi.png'>
            <canvas width=290 height=150></canvas>
        </a>
        <a href = '{% url 'website:donations:index' %}' class = 'button books cta'><span>Gabung Ikut Iuran<span class = 'arrow'></span></span></a>
    </div>

    <div class = 'clear'></div>

</div>


<div id ='twitter'>
    <hr>
    <div class = 'icon'></div>
    <a target="_blank" href = 'http://twitter.com/Ind_Mengajar' class = 'small-button'><span>Follow @Ind_Mengajar</span></a>
    <div class = 'text'>
        <p>{{ latest_tweet.text|safe }}</p>
    </div>
</div>
<hr>


<div id ='scrolling-gallery'>

    <a class="prev browse left"></a>

    <div class="scrollable">

       <!-- root element for the items -->
       <div class="items">

          {{ gallery_html|safe }}

       </div>

    </div>

    <a class="next browse right"></a>
    <div class = 'clear'></div>
</div>

<ul class="tabs">
	<li><h4><a href="#"><span class = 'news'>Kabar Terbaru</span></a></h4></li>
	<li><h4><a href="#"><span class = 'blog'>Blog ODP</span></a></h4></li>
	{% if teacher_profiles %}
	    <li><h4><a href="#"><span class = 'profiles'>Profil ODP</span></a></h4></li>
    {% endif %}
</ul>

<!-- tab "panes" -->
<div class="panes">

	<div class = 'pane'>

        <ul>
	        {% for news in news_list %}
	            <li {% if forloop.last %}class = "last"{% endif %}>
	                <div class = 'date-box'>
                        {{ news.published|date:'M' }} <br/>
                        <strong>{{ news.published|date:'d' }}</strong>
                    </div>

                    <div class = 'title-wrapper'>
                        <h3><a href = '{{ news.get_absolute_url }}'>{{ news.title }}</a></h3>
                        <h7>
                            oleh <a href = '{{ news.author.profile.get_absolute_url }}'>
                                {{ news.get_author_display }}
                            </a>
                            {# <a class = 'comment' href = '#'>0</a> #}
                            <a class = 'comment-count' href = '#comments'>{{ news.comments.active.count }}</a>
                        </h7>
                    </div>

	                <p>{% firstof news.excerpt|truncatewords_html:70 news.content|truncatewords_html:70 %}</p>
	            </li>
	        {% endfor %}
	    </ul>

	    <a href = '{% url "website:news:index" %}' class = 'small-button'><span>Lihat berita lainnya &raquo;</span></a>
	</div>

	<div class = 'pane'>
	    <ul>
	        {% for post in posts %}
	            <li {% if forloop.last %}class = "last"{% endif %}>
	                <div class = 'date-box'>
                        {{ post.published|date:'M' }} <br/>
                        <strong>{{ post.published|date:'d' }}</strong>
                    </div>

                    <div class = 'title-wrapper'>
                        <h3><a href = '{{ post.get_absolute_url }}'>{{ post.title }}</a></h3>
                        <h7>
                            oleh <a href = '{{ post.author.profile.get_absolute_url }}'>
                                {{ post.get_author_display }}
                            </a>
                            {# <a class = 'comment' href = '#'>0</a> #}
                            <a class = 'comment-count' href = '#comments'>{{ post.comments.active.count }}</a>
                        </h7>
                    </div>

	                <p>{% firstof post.excerpt|truncatewords_html:70 post.content|truncatewords_html:70 %}</p>
	            </li>
	        {% endfor %}
	    </ul>
	    <a href = '{% url "website:blogs:index" %}' class = 'small-button'><span>Lihat berita lainnya &raquo;</span></a>

	</div>
	{% if teacher_profiles %}
	    <div class = 'pane'>

            <ul class = 'teachers'>
                {% for teacher_profile in teacher_profiles %}
                {% if forloop.counter == 7 %}<hr/>{% endif %}
                <li {% if forloop.counter == 6 or forloop.counter == 12%}class = 'last'{% endif %}>
                    <a href = "{{ teacher_profile.user.profile.get_absolute_url }}">
                        {% if teacher_profile.photo %}
                            <img src = '{% thumbnail teacher_profile.photo 60x90 %}'>
                        {% else %}
                            <img src = '{{ STATIC_URL }}website/img/no_photo.jpg'>
                        {% endif %}
                    </a>
                    <br/><a href = "{{ teacher_profile.user.profile.get_absolute_url }}" class = 'name'>
                        {{ teacher_profile.user.profile }}
                    </a>
                    <br/>Angkatan {{ teacher_profile.program }}
                    <br/>{{ teacher_profile.school }}
                </li>
                {% endfor %}
            </ul>
            <a href = '{% url "website:teachers:index" %}' class = 'small-button'><span>Lihat ODP lain &raquo;</span></a>

        </div>
	{% endif %}
</div>
<hr class = 'shade'></hr>


{% endblock %}