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

{% block headtitle %}Floor Plans{% 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">Floor Plans</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="options">
                <div class="container-fluid pad-0">
                    <div class="row mar-0">
                        {% for fp in floor_plans %}
                            <div class="col-xs-{% if floor_plans.count == 1 %}12{% elif floor_plans.count == 2 %}6{% elif floor_plans.count == 3 %}4{% endif %} text-center pad-0">
                                <a href="{% url 'meeting_floorplan' meeting_information.slug fp.id %}" class="floor_plan_option option {% if fp.id == floor_plan.id %}active{% endif %}" href="#">
                                    <div class="label">{{ fp }}</div>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="main-body search-reactive">
            <div class="floor_plan">
                {% if floor_plan.image %}
                    <div class="image_holder">
                        <img src="#" data-src="{{ floor_plan.image.url }}" class="img-responsive" alt="{{ floor_plan }}" data-elem="pinchzoomer" data-options="preloaderUrl:/static/lib/pinchzoomer/assets/preloader.gif; maxZoom:3;allowMouseWheelScroll:true;allowMouseWheelZoom:false;"/>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block footer_script %}
    <link href="{% static 'lib/pinchzoomer/css/pinchzoomer.min.css' %}" rel="stylesheet">
    <script src="{% static 'lib/pinchzoomer/js/jquery.mousewheel.min.js' %}"></script>
    <script src="{% static 'lib/pinchzoomer/js/hammer.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'lib/pinchzoomer/js/TweenMax.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'lib/pinchzoomer/js/jquery.pinchzoomer.min.js' %}" type="text/javascript"></script>
{% endblock %}