{% extends "meeting-base.html" %}
{% load staticfiles %}

{% block headtitle %}Posters{% endblock %}

{% block content %}
    <div class="body">
        <div class="main-header posters-header search-reactive">
            <div class="return">
                <div class="container-fluid pad-30">
                    <div class="row mar-30">
                        <div class="col-xs-3 pad-30 text-left">
                            <a href="{% url 'meeting_home' meeting_information.slug %}">
                                <img src="{% static 'images/microsite/navigation/arrow-left.png' %}" />
                            </a>
                        </div>
                        <div class="col-xs-6 text-center">
                            <div class="title">POSTERS</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="options" data-period="morning">
                <div class="container-fluid pad-0">
                    <div class="row mar-0">
                        <div class="col-xs-6 text-center pad-0">
                            <a class="option active educational_option" href="#">
                                <div class="label">EDUCATIONAL</div>
                            </a>
                        </div>
                        <div class="col-xs-6 text-center pad-0">
                            <a class="option scientific_option" href="#">
                                <div class="label">SCIENTIFIC</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-body posters-body search-reactive">
            <div class="list educational_posters">
                {% for poster in educational_posters %}
                    <a href="{% url 'meeting_poster' meeting_information.slug poster.id %}" class="link">
                        <div class="title">{{ poster }}</div>
                    </a>
                {% endfor %}
            </div>
            <div class="list scientific_posters" style="display:none;">
                {% for poster in scientific_posters %}
                    <a href="{% url 'meeting_poster' meeting_information.slug poster.id %}" class="link">
                        <div class="title">{{ poster }}</div>
                    </a>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

{% block footer_script %}
    <script type="text/javascript">
        $(document).ready(function(){

            $('.educational_option').click(function(e){
                e.preventDefault();
                $('.scientific_posters').fadeOut(function(){
                    $('.educational_option').addClass('active');
                    $('.scientific_option').removeClass('active');
                    $('.educational_posters').fadeIn();
                });
            });

            $('.scientific_option').click(function(e){
                e.preventDefault();
                $('.educational_posters').fadeOut(function(){
                    $('.scientific_option').addClass('active');
                    $('.educational_option').removeClass('active');
                    $('.scientific_posters').fadeIn();
                });
            });
        });
    </script>
{% endblock %}