{% extends "custom_page/home/base.html" %}

{% load flatblock_tags thumbnail %}

{% block title %}{{ block.super }}{% endblock %}

{% block content_title %}{% endblock %}

{% block content %}

<div id = 'home'>

    <div class = 'home-section1'>
        <div class="headline_home margin-top20 margin-left5 nyala" align='center'>
            {% if banner_and_text_link %}
                <a href='{{ banner_and_text_link.text }}'>{{ banner_and_text.text }}</a>
            {% else %}
                {{ banner_and_text.text }}
            {% endif %}
        </div>
        <div class="banner_home">
            {% if banner_and_text_link %}
                <a href='{{ banner_and_text_link.text }}'><img src="/media/{{ banner_and_text.image }}"></a>
            {% else %}
                <img src="/media/{{ banner_and_text.image }}">
            {% endif %}
        </div>
        <div class="tag home-flatblock">
            {% flatblock "Charity Ball" %}
        </div>
        <a href='/ausci/' class='no-bold'>
            <div class="tag margin-right0">
                {% flatblock "get costume" %}
            </div>
        </a>
        {% comment %}
        <a href="/event/2/" class="red" id="rsvp-sendmail-joe">
            <img src="{{ STATIC_URL }}img/button---get-your-ticket.jpg" class="margin-top35 margin-left30">
        </a>
        {% endcomment %}
        <div class="clear margin-top25"></div>
    </div>
    
    <div class = 'home-section2'>
        <div class="left width280 title-kuning font14 column">
            {% if upcoming_event %}
                UPCOMING EVENT <a href='/event/' class='read-more'><small class='right line-height18'>More Events...</small></a>
            {% else %}
                PREVIOUS EVENT <a href='/event/' class='read-more'><small class='right line-height18'>More Events...</small></a>
            {% endif %}
        </div>
        <div class="left width280 title-kuning font14 column">
            LATEST NEWS
        </div>
        <div class="left title-kuning font14">
            GALLERY
        </div>
        <div class="clear"></div>
        <hr class="garis-abu margin-bottom15"></hr>
        <div class="left width280 column">
            {% if upcoming_event %}
                {% for event in upcoming_event %}
                    <div class="isi">
                        <div class="date left">
                           <div class="font-bold font48 tgl-kuning margin-top-15">
                                {{event.date_of_event|date:"d" }}
                           </div>
                           <div class="month">
                                {{event.date_of_event|date:"M Y" }}
                           </div>
                        </div>
                        <div class="font-bold left font11 margin-top-2">
                            <a href="{{ event.get_absolute_url }}" class="abu_tua">{{event.title}}</a>
                        </div>
                        <div class="font10 width190 left">
                            {{event.get_description_peek|safe|truncatewords:20}}
                            <div class="clear">
                        </div>
                            <a href="{{ event.get_absolute_url }}" class="red">
                                Read more
                            </a>
                        </div>
                    </div>
                <div class="clear"></div>
                {% endfor %}
            {% endif %}
            <div class="clear"></div>
            <br>
            <div class="title-kuning margin-top20 font14">
                CERDAS BANG! PROGRAM
            </div>
            <hr class="garis-abu margin-bottom15"></hr>
            <div class="font12">
                <a href="/cerdasbang/">
                    <img src="{{ STATIC_URL }}img/smile_home1.jpg" >
                </a>
                <br><br>
                Everything starts with a dream. Our dream is a program we call : " Cerdas BANG !"<br>
                We, the Alumni of USC in Indonesia club ...<br>
                <a href="/cerdasbang/" class="read-more">Read more</a>
            </div> 
        </div>

        <div class="left font12 latest-news column">
	        {% for object in object_list %}
		        <div class="margin-bottom20 news">
		            <span class="tgl">{{ object.publish|date:"M d, Y" }}</span>
                    <div class="title"><a href="{%url news_detail object.id%}" class="red no-bold">{{object.title}}</a></div>
                    {{object.body_markup|safe|truncatewords:20}}
                    <br/>
                    <a href="{%url news_detail object.id%}" class="read-more">Read more</a>
		        </div>
            {% endfor %}
        </div>

        <div class="left font12 home-gallery width265">
            <span class="tgl">{{ gallery_list.date|date:"M d, Y" }}</span>
            <div class="title">
                <a href="{%url gallery_thumb gallery_list.id%}" class="read-more font16 no-bold">{{gallery_list.name}}</a>
            </div>
            <ul class="gallery">	        
	            <li>
	                <a href="{%url gallery_thumb gallery_list.id%}" class="pic-1">
	                    <img src = "{% thumbnail gallery_list.get_thumbnail_file '155x155' %}">
	                </a>
	            </li>
	            <li>
	                <a href="{%url gallery_thumb gallery_list.id%}" class="pic-2">
	                    <img src = "{% thumbnail gallery_list.get_thumbnail_file '155x155' %}">
                    </a>
	            </li>
            </ul>
        </div>
        <div class="clear margin-bottom20"></div>
        {% if is_paginated %}
            {% include "blog/includes/pagination.html" %}
        {% endif %}      
    </div>
</div>

{% endblock %}