{% extends 'meeting-base.html' %}

{% load staticfiles thumbnail %}

{% block headtitle %}Home{% endblock %}

{% block body_class %}dark-bg{% endblock %}

{% block content %}
    <div class="body">
        <div class="home search-reactive">
            {% if meeting_information.get_banners %}
                <div class="container-fluid">
                    <div class="home-banners">
                        <div class="carousel slide carousel-fade" id="bannerCarousel">
                            <div class="carousel-inner" role="listbox">
                                {% for banner in meeting_information.get_banners %}
                                    <div class="item {% if forloop.first %}active{% endif %}">
                                        <img src="{% thumbnail banner.image 1200x250 crop upscale %}" alt="{{ banner }}" class="img-responsive"/>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            <div class="container-fluid">
                {% for link in home_links %}
                    {% if forloop.counter0|divisibleby:2 or forloop.first %}
                        <div class="row">
                    {% endif %}
                        <div class="col-xs-6 text-center">
                            <a class="block-link" href="{{ link.link }}" {% if link.new_window %}target="_blank"{% endif %}>
                                {% if link.get_home_image %}<img class="icon" src="{% static link.get_home_image %}" alt="{{ link }}" />{% endif %}
                                <div class="option">{{ link|upper }}</div>
                            </a>
                        </div>
                    {% if forloop.counter|divisibleby:2 or forloop.last %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
    
    {% if meeting_information.splash_enabled %}
        <div id="splashModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="text-center">
                        <h1>{{ meeting_information.splash_title }}</h1>
                        {% if meeting_information.splash_image %}
                            <div class="splash_image">
                                <img src="{% thumbnail meeting_information.splash_image 500x500 %}" class="img-responsive"/>
                            </div>
                        {% endif %}
                        <div class="splash_content">
                            {{ meeting_information.splash_content|safe }}
                        </div>
                        <div class="splash_close">
                            <button class="btn btn-primary btn-lg" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}

{% block footer_script %}
    <script>
        $(document).ready(function(){
            {% if meeting_information.get_banners %}
                $('#bannerCarousel').carousel();
            {% endif %}

            {% if meeting_information.splash_enabled %}
                {% if show_splash %}
                    $('#splashModal').modal();
                {% endif %}
            {% endif %}
        });
    </script>
{% endblock %}