{% macro bas_list(module, search_datas) %}
    {% set unique_id = module.getRandom() %}
    {% for base in search_datas['bases'] %}
        {% set sbas_id = base['sbas_id'] %}
        <div class="sbas_list sbas_{{sbas_id}}" style="margin-bottom: 10px;">
            <input type="hidden" name="reference" value="{{sbas_id}}"/>
            <div class="clksbas">
                <span  onclick="deploy(this, '.sbascont_{{sbas_id}}' );" class="deployer_closed" ></span>
                <input type="checkbox" checked style="display: none;" id="sbasChkr_{{sbas_id}}_{{unique_id}}" class="sbasChkr_{{sbas_id}}"
                       onchange="clksbas(this, {{sbas_id}});" />
                <label id="ADVSRCH_SBAS_LABEL_{{sbas_id}}" style="display: inline" class="checkbox danger_indicator" for="sbasChkr_{{sbas_id}}_{{unique_id}}">
                    <span>{{sbas_id|sbas_labels(app)}}</span>
                    <span class="infos_sbas_{{sbas_id}}">
                        {{base["collections"]|length}}/{{base['collections']|length}}
                    </span>
                </label>
            </div>
            <div class="sbascont sbascont_{{sbas_id}}" style="display:none; -moz-column-width:150px; -webkit-column-width: 150px; -moz-column-gap: 20px; -webkit-column-gap: 20px;">
                <ul style="list-style-type:none; padding:0; margin:0;" class="basChild_{{sbas_id}}">
                    {% for collection in base["collections"] %}
                        {% set base_id = collection["base_id"] %}
                        <li class="clkbas">
                            <table>
                                <tr>
                                    <td>
                                        <input class="ck_{{collection["base_id"]}} checkbas" style="*margin-top:-18px;"
                                            onchange="checkFilters(true);"
                                            id="ck_{{collection["base_id"]}}_{{unique_id}}" type="checkbox"
                                            name="bases[]" value="{{collection["base_id"]}}" {% if collection["selected"] %}checked="checked"{% endif %} />
                                    </td>
                                    <td>
                                        <label style="line-height: 18px;"
                                            for="ck_{{base_id}}_{{unique_id}}" class="ck_{{base_id}} {% if collection["selected"] %}selected{% endif %} checkbox inline">
                                            {{base_id|get_collection_logo(app)|raw}} {{base_id|bas_labels(app)}}
                                        </label>
                                    </td>
                                </tr>
                            </table>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    {% endfor %}
{% endmacro %}

{% set jquery_theme = 'dark-hive' %}
{% set step = app.flash('step_by_step') %}

{% extends "common/index_bootstrap.html.twig" %}

{% block icon %}
    <link rel="shortcut icon" type="image/x-icon" href="/skins/prod/favicon.ico">
{% endblock %}

{% block rss %}
    {% for feed in feeds %}
        {% set link = app['feed.user-link-generator'].generate(feed, app.getAuthenticatedUser(), 'rss') %}
        <link rel="alternate" type="{{ link.getMimetype() }}" title="{{ link.getTitle() }}" href="{{ link.getURI() }}" />
        {% set link = app['feed.user-link-generator'].generate(feed, app.getAuthenticatedUser(), 'atom') %}
        <link rel="alternate" type="{{ link.getMimetype() }}" title="{{ link.getTitle() }}" href="{{ link.getURI() }}" />
    {% endfor %}
    {% set link = app['feed.aggregate-link-generator'].generate(aggregate, app.getAuthenticatedUser(), 'rss') %}
        <link rel="alternate" type="{{ link.getMimetype() }}" title="{{ link.getTitle() }}" href="{{ link.getURI() }}" />
    {% set link = app['feed.aggregate-link-generator'].generate(aggregate, app.getAuthenticatedUser(), 'atom') %}
        <link rel="alternate" type="{{ link.getMimetype() }}" title="{{ link.getTitle() }}" href="{{ link.getURI() }}" />
{% endblock %}

{% block stylesheet %}
    <style type="text/css">
        .noRepresent {
            background-color: #A2F5F5;
        }

        .disable {
            display: none;
        }

        .deployer_opened::before {
            content: "\25BC";
        }

        .deployer_closed::before {
            content: "\25B6";
        }

    </style>
    <style type="text/css">
        /* Vertical Tabs */
        .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
        .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
        .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
        .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right;}
    </style>

    <link type="text/css" rel="stylesheet" href="{{ path('minifier', { 'f' : 'include/jslibs/jquery.contextmenu.css,include/jslibs/colorpicker/css/colorpicker.css,assets/jquery.treeview/jquery.treeview.css,skins/common/main.css,include/jquery.image_enhancer.css,skins/geonames/geonames.css' }) }}" >
    <link id="skinCss" type="text/css" rel="stylesheet" href="{{ path('minifier', { 'f' : 'skins/prod/' ~ cssfile ~ '/prodcolor.css' }) }}" >
    <link type="text/css" rel="stylesheet" href="{{ path('minifier', { 'f' : 'assets/humane-js/themes/libnotify.css,skins/prod/Prod.css,skins/prod/Basket.css,skins/prod/Push.css' }) }}" >

    <!--[if IE 7]>
            <link type="text/css" rel="stylesheet" href="{{ path('minifier', { 'f' : 'skins/prod/ie7.css' }) }}" >
    <![endif]-->
    <!--[if IE 8]>
            <link type="text/css" rel="stylesheet" href="{{ path('minifier', { 'f' : 'skins/prod/ie8.css' }) }}" >
    <![endif]-->

    <style title="color_selection" type="text/css">
        /*  .diapo.ui-selecting,#reorder_box .diapo.selecting, #EDIT_ALL .diapo.selecting, .list.selecting, .list.selecting .diapo {
            color: #{{ app['settings'].getUserSetting(app.getAuthenticatedUser(), 'fontcolor-selection', 'FFFFFF') }};
            background-color: #{{ app['settings'].getUserSetting(app.getAuthenticatedUser(), 'background-selection-disabled', '333333')}}};
        }*/
        .diapo.selected,#reorder_box .diapo.selected, #EDIT_ALL .diapo.selected, .list.selected, .list.selected .diapo {
            color: {{"#" ~ app['settings'].getUserSetting(app.getAuthenticatedUser(), 'fontcolor-selection', 'FFFFFF')}};
            background-color: {{"#" ~ app['settings'].getUserSetting(app.getAuthenticatedUser(), 'background-selection', '404040')}};
        }
    </style>
    <!-- Include Fancytree skin and library -->
    <link href="{{ path('minifier', { 'f' : 'assets/fancytree/dist/skin-win8/ui.fancytree.min.css'}) }}" rel="stylesheet" type="text/css">

    {% if step %}
        <link type="text/css" rel="stylesheet" href="{{ path('minifier', { 'f' : 'assets/joyride/joyride-2.1.css' }) }}" >
            <style>
                .joyride-tip-guide {
                    background-color: #eee;
                    color: #000;
                }

                .joyride-tip-guide h1 {
                    font-weight: 100;
                    font-size: 20px;
                    color: #0a212b;
                    line-height: 22px;
                    margin-bottom: 10px;
                }

                .joyride-tip-guide span.joyride-nub.top {
                    border-color: #eee;
                }

                .joyride-tip-guide span.joyride-nub.right {
                    border-left-color: #eee !important;
                }

                .joyride-expose-wrapper {
                    background-color: transparent;
                }

                .joyride-tip-guide .joyride-next-tip {
                    background: #0a212b;
                    border: none;
                }
            </style>
    {% endif %}
{% endblock %}

{% block javascript %}
    <script src="{{ path('minifier', { 'f' : 'assets/fancytree/dist/jquery.fancytree-all.js'}) }}" type="text/javascript"></script>
    {% include "common/templates.html.twig" %}
{% endblock %}

{% block content %}

    <div style="position:absolute; top:0; left:0; right:0; bottom:0; background-color:#1a1a1a; z-index:32766;">
        <div id="loader" style="top:200px; margin:0 auto; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-color:#CCCCCC; position:relative; margin:0 auto; text-align:center; width:400px; height:100px; padding:20px; z-index:32767;">
            <div style="margin:0 10px 10px; font-family:Helvetica,Arial,sans-serif; font-size:18px; color:#1A1A1A; text-align:left;">Phraseanet</div>
            <div style="text-align:center;">{{ 'Chargement' | trans }}</div>
            <div style="width:220px; height:19px; margin:20px auto;">
                <div id="loader_bar" style="height:19px;width:10%;background-image:url('/skins/icons/main-loader.gif')"></div>
            </div>
        </div>
    </div>
    <div id="desktop" class="PNB" style="overflow:hidden;">
        {% set ratio = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'search_window') %}
        {% if ratio == 0 %}
            {% set ratio = '0.333' %}
        {% endif %}
        {% set w1 = (100 * ratio)|round %}
        {% set w2 = (100 - w1) %}
        <div id="idFrameC" class="PNB" style="right:auto;width:{{ w1 ~ '%' }}">
            <div class="PNB wrapper">
                <div class="tabs ui-tabs">
                    {% block tabs_panel %}
                        <div id="retractableButton"></div>
                        {% include 'prod/tab_headers.html.twig' %}
                        <div id="baskets" class="PNB">
                            {% import 'prod/WorkZone/Macros.html.twig'  as  WorkZoneMacros %}
                            {{WorkZoneMacros.make_bloc(app, WorkZone)}}
                        </div>
                        {% if GV_thesaurus %}
                            <div id="proposals" class="PNB"
                                ondblclick="return(thesau_dblclickThesaurus(event));" onclick="return(thesau_clickThesaurus(event));">
                                <button id="facets-back-btn" style="display:none;">back</button>
                            </div>
                            {% include 'prod/tab_thesaurus.html.twig' with {has_access_to_module: app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('thesaurus')} %}
                        {% endif %}
                    {% endblock %}
                </div>
            </div>
            <div id="basket_menu" class="context-menu context-menu-theme-vista" style="display:none;">
                <ul style="list-style-type:none;margin:0;padding:0">
                    <li class="context-menu-item">
                        <div class="context-menu-item-inner">
                            <a title="{{ 'action:: nouveau panier' | trans }}" class="dialog small-dialog" href="{{ path('prod_baskets_create') }}">
                                <img style="cursor:pointer;" src="/skins/icons/mtadd_0.gif" title="{{ 'action:: nouveau panier' | trans }}" />
                                {{ 'action:: nouveau panier' | trans }}
                            </a>
                        </div>
                        <div class="context-menu-item-inner">
                            <a title="{{ 'Browse Baskets' | trans }}" class="dialog" href="{{ path('prod_workzone_browse') }}">
                                {{ 'Browse Baskets' | trans }}
                            </a>
                        </div>
                        {% if app['conf'].get(['registry', 'modules', 'stories']) and app.getAclForUser(app.getAuthenticatedUser()).has_right('addrecord') %}
                            <div class="context-menu-item-inner">
                                <a title="{{ 'action:: nouveau reportage' | trans }}" class="dialog small-dialog" href="{{ path('prod_stories_create') }}">
                                    <img style="cursor:pointer;" src="/skins/icons/mtadd_0.gif" title="{{ 'action:: nouveau reportage' | trans }}" />
                                    {{ 'action:: nouveau reportage' | trans }}
                                </a>
                            </div>
                       {% endif %}
                    </li>
                    <li class="context-menu-item">
                        <div class="context-menu-item-inner" onclick="return p4.WorkZone.refresh('current','date');">
                            <img style="cursor:pointer;" src="/skins/icons/cal.png" title="{{ 'phraseanet:: tri par date' | trans }}" />
                            {{ 'phraseanet:: tri par date' | trans }}
                        </div>
                    </li>
                    <li class="context-menu-item">
                        <div class="context-menu-item-inner" onclick="return p4.WorkZone.refresh('current','name');">
                            <img style="cursor:pointer;" src="/skins/icons/alpha.png" title="{{ 'phraseanet:: tri par nom' | trans }}" />
                            {{ 'phraseanet:: tri par nom' | trans }}
                        </div>
                    </li>
                    <li class="context-menu-item">
                        <div class="context-menu-item-inner" onclick="basketPrefs();">
                            {{ 'Preferences' | trans }}
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="PNB" id="rightFrame" style="left:auto; width:{{ w2 ~ '%' }}">
            <div id="headBlock" class="PNB">
                <div class="searchFormWrapper">
                    <form id="searchForm" method="POST" action="{{ path('prod_query') }}" name="phrasea_query" class="phrasea_query">
                        <input id="SENT_query" name="qry" type="hidden" value="{{app['settings'].getUserSetting(app.getAuthenticatedUser(), 'start_page_query')}}">
                        <input type="hidden" name="pag" id="formAnswerPage" value="">
                        <input type="hidden" name="sel" value="">

                        <div class="controls controls-row">
                            <div class="input-append">
                                <input id="EDIT_query" name="fake_qry" type="text" autocomplete="off" class="search query danger_indicator" value="{{app['settings'].getUserSetting(app.getAuthenticatedUser(), 'start_page_query')}}">
                                <a id="ADV_query" href="#" class="btn btn-inverse adv_trigger adv_search_button">
                                    <img src="/skins/icons/settings.png" title="{{ 'Advanced Search' | trans }}"/>
                                </a>
                                <button type="submit" class="btn btn-inverse" style="font-size:14px">{{ 'boutton::rechercher' | trans }}</button>
                            </div>
                            <div class="control-group">
                            {% if GV_multiAndReport %}
                                <label for="mode_type_doc" class="radio inline">
                                    <input type="radio" value="0" class="mode_type_doc" name="search_type" {% if GV_defaultQuery_type == 0 %}checked="checked"{% endif %} id="mode_type_doc"/>
                                    {{ 'phraseanet::type:: documents' | trans }}
                                </label>
                                <label for="mode_type_reg" class="radio inline">
                                    <input type="radio" value="1" class="mode_type_reg" name="search_type" {% if GV_defaultQuery_type != 0 %}checked="checked"{% endif %} id="mode_type_reg"/>
                                    {{ 'phraseanet::type:: reportages' | trans }}
                                </label>
                            {% else %}
                                <input type="hidden" value="0" name="search_type" />
                            {% endif %}
                                <select name="record_type" id="recordtype_sel" class="input-small">
                                    <option value="">{{ 'Tout type' | trans }}</option>
                                    <option value="image">{{ 'Image' | trans }}</option>
                                    <option value="video">{{ 'Video' | trans }}</option>
                                    <option value="audio">{{ 'Audio' | trans }}</option>
                                    <option value="document">{{ 'Document' | trans }}</option>
                                    <option value="flash">{{ 'Flash' | trans }}</option>
                                </select>
                            </div>
                        </div>


                        <div class="controls controls-row adv_options" style="display:none;">
                            <table style="width:100%; table-layout:fixed;">
                                <tr>
                                    <td style="width:50%; vertical-align:top;">
                                        <div id="ADVSRCH_SBAS_ZONE" class="sbasglob">
                                            <div class="btn-toolbar">
                                                <input class="btn btn-inverse" type="button"
                                                    value="{{ 'boutton:: selectionner toutes les bases' | trans }}" onclick="checkBases(true);" />
                                                <input class="btn btn-inverse" type="button"
                                                    value="{{ 'boutton:: selectionner aucune base' | trans }}" onclick="checkBases(false);" />
                                            </div>
                                            {{_self.bas_list(module_prod, search_datas)}}
                                        </div>
                                    </td>
                                    <td style="width:50%; vertical-align:top;">
                                        <div id="sbasfiltercont">
                                            <div  class="btn-toolbar">
                                                <input class="btn btn-inverse" type="button" value="{{ 'Re-initialiser' | trans }}" onclick="reset_adv_search();" />
                                            </div>
                                            <div id="ADVSRCH_OPTIONS_ZONE">
                                                <div id="ADVSRCH_SORT_ZONE">
                                                    <span>{{ 'Trier par' | trans }}</span>
                                                    <select name="sort" class="input-medium">
                                                        {% set b = (app['phraseanet.SE'].getDefaultSort() == constant('\\Alchemy\\Phrasea\\SearchEngine\\SearchEngineOptions::SORT_CREATED_ON')) %}
                                                        <option value="{{ constant('\\Alchemy\\Phrasea\\SearchEngine\\SearchEngineOptions::SORT_CREATED_ON') }}" {% if b %}selected="selected" class="default-selection"{% endif %}>{{ "Date Added"|trans }}</option>
                                                        {% set b = (app['phraseanet.SE'].getDefaultSort() == constant('\\Alchemy\\Phrasea\\SearchEngine\\SearchEngineOptions::SORT_RELEVANCE')) %}
                                                        <option value="{{ constant('\\Alchemy\\Phrasea\\SearchEngine\\SearchEngineOptions::SORT_RELEVANCE') }}" {% if b %}selected="selected" class="default-selection"{% endif %}>{{ "Relevance"|trans }}</option>
                                                        <optgroup label="{{ 'By field'|trans }}">
                                                        {% for fieldname, sort in search_datas['sort'] %}
                                                            {% set b = (app['phraseanet.SE'].getDefaultSort() == fieldname) %}
                                                            <option value="{{ fieldname }}"
                                                                    {% if b %}selected="selected"{% endif %}
                                                                    class="{% if b %}default-selection {% endif %}dbx db_{{sort['sbas']|join(' db_')}}"
                                                                    >{{ fieldname }}</option>
                                                        {% endfor %}
                                                        </optgroup>
                                                    </select>
                                                    <select name="ord" class="input-medium">
                                                        {% for ord, ord_name in app['phraseanet.SE'].getAvailableOrder() %}
                                                            {% set b = (app['phraseanet.SE'].getDefaultSortDirection() == ord) %}
                                                            <option value="{{ ord }}" {% if b %}selected="selected" class="default-selection"{% endif %}>{{ ord_name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>

                                                <div id="ADVSRCH_FIELDS_ZONE" class="danger_indicator">
                                                    <span>{{ 'Les termes apparaissent dans le(s) champs' | trans }}</span>
                                                    <select size="8" multiple onchange="checkFilters(true);" name="fields[]" style="vertical-align:middle; width:99%;">
                                                        <option value="phraseanet--all--fields">{{ 'rechercher dans tous les champs' | trans }}</option>
                                                        {% for field_id, field in search_datas['fields'] %}
                                                            {% if field['type'] != 'date' %}
                                                                <option class="dbx db_{{field['sbas']|join(' db_')}}" value="{{field_id}}">{{field['fieldname']}}</option>
                                                            {% endif %}
                                                        {% endfor %}
                                                    </select>
                                                </div>

                                                <div id="ADVSRCH_SB_ZONE">
                                                {% if search_status|length > 0 %}
                                                    <hr />
                                                    <span>{{ 'Status des documents a rechercher' | trans }}</span>
                                                    {% for databox_id, databox in search_status %}
                                                    {% if databox.status|length > 0 %}
                                                    <table style="width: 100%;" id="ADVSRCH_SB_ZONE_{{databox_id}}" class="field_{{databox_id}}">
                                                        <thead>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <span onclick="deploy(this, '#ADVSRCH_SB_{{databox_id}}' );return false;" class="deployer_closed" ></span>
                                                                    <span class="danger_indicator">{{ databox['name'] }}</span>
                                                                </td>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="ADVSRCH_SB_{{databox_id}}" style="display: none">
                                                            {% for status_bit, status in databox.status %}
                                                            <tr>
                                                                <td>
                                                                    <label class="checkbox inline">
                                                                        {% if status['img_off'] %}
                                                                            <img src="{{status['img_off']}}" title="{{status['labels_off_i18n'][app['locale']]}}" />
                                                                        {% endif %}
                                                                        <input onchange="checkFilters(true);" class="field_switch field_{{databox_id}}"
                                                                        type="checkbox" value="0"
                                                                        n="{{status_bit}}" name="status[{{databox_id}}][{{status_bit}}]" />
                                                                        {{status['labels_off_i18n'][app['locale']]}}
                                                                    </label>
                                                                </td>
                                                                <td>
                                                                    <label class="checkbox inline">
                                                                        {% if status['img_on'] %}
                                                                            <img src="{{status['img_on']}}" title="{{status['labels_on_i18n'][app['locale']]}}" />
                                                                        {% endif %}
                                                                        <input onchange="checkFilters(true);" class="field_switch field_{{databox_id}}"
                                                                        type="checkbox" value="1"
                                                                        n="{{status_bit}}" name="status[{{databox_id}}][{{status_bit}}]"/>
                                                                        {{status['labels_on_i18n'][app['locale']]}}
                                                                    </label>
                                                                </td>
                                                            </tr>
                                                            {% endfor %}
                                                        </tbody>
                                                    </table>
                                                    {% endif %}
                                                    {% endfor %}
                                                {% endif %}
                                                </div>

                                                <div id="ADVSRCH_DATE_ZONE" class="danger_indicator">
                                                    {% if app['phraseanet.SE'].getAvailableDateFields() | length > 0 %}
                                                    <hr />
                                                    <span>
                                                        <select name="date_field" class="input-medium" onchange="checkFilters(true);">
                                                            <option selected="selected"
                                                                    value="">{{ 'Rechercher dans un champ date' | trans }}</option>
                                                            {% for fieldname, date in search_datas['dates'] %}
                                                                <option
                                                                    class="dbx db_{{date['sbas']|join(' db_')}}" value="{{ fieldname }}">{{ fieldname }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </span>
                                                    <span id="ADVSRCH_DATE_SELECTORS">
                                                        {{ 'phraseanet::time:: de' | trans }}
                                                        <div class="input-prepend">
                                                            <span class="add-on"><i class="icon-calendar"></i></span>
                                                            <input onchange="checkFilters(true);" class="datepicker input-small" type="text" name="date_min" placeholder="{% trans %}YYYY/MM/DD{% endtrans %}" style="margin: 0;position: relative; z-index: 10001;" />
                                                        </div>
                                                        {{ 'phraseanet::time:: a' | trans }}
                                                        <div class="input-prepend">
                                                            <span class="add-on"><i class="icon-calendar"></i></span>
                                                            <input onchange="checkFilters(true);" class="datepicker input-small" type="text" name="date_max" placeholder="{% trans %}YYYY/MM/DD{% endtrans %}" style="margin: 0;position: relative; z-index: 10001;" />
                                                        </div>
                                                    </span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </form>
                </div>

                <!--
                <div id="history-queries" class="PNB" style="top:30px;overflow:hidden;">
                    <div class="PNB10" style="overflow-y:auto;overflow-x:auto;">
                    {{queries_history|raw}}
                    </div>
                </div>
                {% if queries_topics %}
                <div id="choosen-topics" class="PNB" style="top:30px;overflow:hidden;">
                    <div class="PNB10" style="overflow-y:auto;overflow-x:auto;">
                    {{queries_topics|raw}}
                    </div>
                </div>
                {% endif %}
                </div>
                </div>-->
            </div>

            <div id="idFrameT" class="PNB ui-corner-top">
                <div class="tools PNB10 btn-toolbar">
                    {% include "prod/toolbar.html.twig" with {acl: app.getAclForUser(app.getAuthenticatedUser())} %}
                    <a href="#" id="settings" onclick="lookBox(this,event);return false;">{{ 'Preferences' | trans }} </a>
                </div>
                <div id="answers" class=" PNB10">
                    <script>
                        $(document).ready(function(){
                            {% if app['settings'].getUserSetting(app.getAuthenticatedUser(), 'start_page') == 'QUERY' %}
                                $('form[name="phrasea_query"]').addClass('triggerAfterInit');
                            {% elseif app['settings'].getUserSetting(app.getAuthenticatedUser(), 'start_page') == 'LAST_QUERY' %}
                                $('form[name="phrasea_query"]').addClass('triggerAfterInit');
                            {% elseif app['settings'].getUserSetting(app.getAuthenticatedUser(), 'start_page') == 'PUBLI' %}
                                getHome('PUBLI');
                            {% endif %}
                        });
                    </script>
                </div>
                <div id="answers_status">
                    <div class="infos">
                        <span id="tool_results">

                        </span>
                    </div>
                </div>
                <!--div id="answers_status" class="PNB">
                    <table>
                        <tr>
                            <td class="infos">
                                <a href="#" onclick="lookBox(this,event);return false;">{{ 'Preferences' | trans }} </a>
                                |
                                <span id="tool_results">

                                </span>
                            </td>
                            <td class="navigation">
                                <div id="tool_navigate"></div>
                            </td>
                        </tr>
                    </table>
                </div-->
            </div>
        </div>
    </div>

    <div>
        <form style="visibility:hidden;display:none;" name="formDownload" action="{{ path('check_download') }}" method="post" target="HFrameZ" >
            <input type="hidden" name="act" value="DOWNLOAD" />
            <input type="hidden" name="lst" value="" />
            <input type="hidden" name="fromchu" value="" />
            <input type="hidden" name="type" value="" />
            <input type="checkbox" name="obj[]" value="document" />
            <input type="checkbox" name="obj[]" value="preview" />
            <input type="checkbox" name="obj[]" value="caption" />
            <input type="hidden" name="SSTTID" value="" />
        </form>
        <form style="visibility:hidden;display:none;" name="formZ" action="???" method="post">
            <input type="hidden" name="act" value="???" />
            <input type="hidden" name="p0" value="?" />
            <input type="hidden" name="p1" value="?" />
        </form>
        <div id="idFrameW0">
            <div class="pbarBck">
                <div id="idProgressBar0" class="pbarFrt" style="width:0%;"></div>
            </div>
        </div>
    </div>

{% endblock %}

{% block extra_content %}

    <div id="MESSAGE"></div>
    <div id="MESSAGE-push"></div>
    <div id="MESSAGE-publi"></div>
    <div id="DIALOG"></div>
    <div id="keyboard-dialog" class="{% if app['settings'].getUserSetting(app.getAuthenticatedUser(), 'keyboard_infos') != '0' %}auto{% endif %}" style="display:none;" title="{{ 'raccourci :: a propos des raccourcis claviers' | trans }}">
        <div>
            <h1>{{ 'Raccourcis claviers en cours de recherche :' | trans }}</h1>
            <ul>
                <li>{{ 'Raccourcis:: ctrl-a : tout selectionner' | trans }}</li>
                <li>{{ 'Raccourcis:: ctrl-p : imprimer la selection' | trans }}</li>
                <li>{{ 'Raccourcis:: ctrl-e : editer la selection' | trans }}</li>
                <li>{{ 'Raccourcis::fleche gauche : page precedente' | trans }}</li>
                <li>{{ 'Raccourcis::fleche droite : page suivante' | trans }}</li>
                <li>{{ 'Raccourcis::fleche haut : scroll vertical' | trans }}</li>
                <li>{{ 'Raccourcis::fleche bas : scroll vertical' | trans }}</li>
            </ul>
        </div>
        <div>
            <h1>{{ 'Raccourcis claviers de la zone des paniers :' | trans }}</h1>
            <ul>
                <li>{{ 'Raccourcis:: ctrl-a : tout selectionner' | trans }}</li>
                <li>{{ 'Raccourcis:: ctrl-p : imprimer la selection' | trans }}</li>
                <li>{{ 'Raccourcis:: ctrl-e : editer la selection' | trans }}</li>
            </ul>
        </div>
        <div>
            <h1>{{ 'Raccourcis claviers en cours de editing :' | trans }}</h1>
            <ul>
                <li>{{ 'Raccourcis::tab/shift-tab se ballade dans les champs' | trans }}</li>
            </ul>
        </div>
        <div>
            <h1>{{ 'Raccourcis claviers en cours de preview :' | trans }}</h1>
            <ul>
                <li>{{ 'Raccourcis::fleche gauche : en avant' | trans }}</li>
                <li>{{ 'Raccourcis::fleche gauche : en arriere' | trans }}</li>
                <li>{{ 'Raccourcis::espace : arreter/demarrer le diaporama' | trans }}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>{{ 'Vous pouvez quitter la plupart des fenetres survolantes via la touche echap' | trans }}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>
                    <label class="checkbox" for="keyboard-stop">
                        <input id="keyboard-stop" type="checkbox"/>
                        {{ 'raccourcis :: ne plus montrer cette aide' | trans }}
                    </label>
                </li>
            </ul>
        </div>
    </div>

    {{cgus_agreement|raw}}

    <div style="display:none;position:relative;" id="look_box" title="{{ 'Preferences' | trans }}" >
        <div class="tabs">
            <ul>
                <li><a href="#look_box_screen">{{ 'Affichage' | trans }}</a></li>
                <li><a href="#look_box_settings">{{ 'Configuration' | trans }}</a></li>
            </ul>
            <div id="look_box_screen">
                <div class="box">
                    <div class="" style="float:left; width:100%;margin-top:20px;">
                        {% set mod = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'advanced_search_reload') %}
                        <label class="checkbox inline" for="user_settings_advanced_search_reload">
                            <input onchange="setPref('advanced_search_reload',$(this).attr('checked')?'1' : '0');" name="advanced_search_reload" type="checkbox" style="margin: 3px 0 0 -18px;" class="checkbox" value="1" id="user_settings_advanced_search_reload" {% if mod == '1' %}checked="checked"{% endif %}/>
                            {{ 'Use latest search settings on Production loading' | trans }}
                        </label>
                    </div>
                </div>
                <div class="box">
                    <div class="" style="float:left; width:49%;">
                        <h1>{{ 'Mode de presentation' | trans }}</h1>
                        {% set mod = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'view') %}
                        <label class="radio inline" for="thumbs_view">
                            <input onchange="setPref('view',$(this).val());" name="view_type" type="radio" style="margin: 3px 0 0 -18px;" class="radio" value="thumbs" id="thumbs_view" {% if mod == 'thumbs' %}checked="checked"{% endif %}/>
                            {{ 'reponses:: mode vignettes' | trans }}
                        </label>
                        <label class="radio inline" for="list_view">
                            <input onchange="setPref('view',$(this).val());" name="view_type" type="radio" style="margin: 3px 0 0 -18px;" class="radio" value="list" id="list_view" {% if mod == 'list' %}checked="checked"{% endif %}/>
                            {{ 'reponses:: mode liste' | trans }}
                        </label>
                    </div>
                    <div style="float:right; width:49%;">
                        <h1>{{ 'Theme' | trans }}</h1>
                        {% for color, file in css %}
                            <div title="{{ 'Selecteur de theme' | trans }}" class="colorpicker_box"
                                onclick="setCss('{{color}}');" style="width:16px;height:16px;background-color:{{ '#' ~ color ~ ';' }}">&nbsp;</div>
                        {% endfor %}
                    </div>
                </div>
                <div class="box">
                    {% set rollover_thumbnail = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'rollover_thumbnail') %}
                    <h1>{{ 'Presentation de vignettes'  | trans }}</h1>
                    <label class="radio" for="rollover_caption">
                        <input onchange="setPref('rollover_thumbnail',$(this).val());" name="rollover_thumbnail" type="radio" class="radio" value="caption" id="rollover_caption" {% if rollover_thumbnail == 'caption' %}checked="checked" {% endif %}/>
                        {{ 'Iconographe (description au rollover)' | trans }}
                    </label>
                    <label class="radio" for="rollover_preview">
                        <input onchange="setPref('rollover_thumbnail',$(this).val());" name="rollover_thumbnail" type="radio" class="radio" value="preview" id="rollover_preview" {% if rollover_thumbnail == 'preview' %}checked="checked" {% endif %}/>
                        {{ 'Graphiste (preview au rollover)' | trans }}
                    </label>
                </div>
                <div class="box">
                    {% set technical_display = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'technical_display') %}
                    <h1>{{'Display technical data'  | trans }}</h1>
                    <label class="radio" for="technical_show">
                        <input onchange="setPref('technical_display',$(this).val());" name="technical_display" type="radio" class="radio" value="1" id="technical_show" {% if technical_display == '1' %}checked="checked"{% endif %}/>
                        {{ 'In the answer grid' | trans }}
                    </label>
                    <label class="radio" for="technical_group">
                        <input onchange="setPref('technical_display',$(this).val());" name="technical_display" type="radio" class="radio" value="group" id="technical_group" {% if technical_display == 'group' %}checked="checked"{% endif %}/>
                        {{ 'After metadata' | trans }}
                    </label>
                    <label class="radio" for="technical_hide">
                        <input onchange="setPref('technical_display',$(this).val());" name="technical_display" type="radio" class="radio" value="0" id="technical_hide" {% if technical_display == '0' %}checked="checked"{% endif %}/>
                        {{ 'Do not display' | trans }}
                    </label>
                </div>
                <div class="box">
                    {% set doctype_display = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'doctype_display') %}
                    <h1>{{'Type de documents'  | trans }}</h1>
                    <label class="checkbox" for="doctype_display_show">
                        <input onchange="setPref('doctype_display',($(this).attr('checked') ? '1' :'0'));" name="doctype_display" type="checkbox" class="checkbox" value="1" id="doctype_display_show" {% if doctype_display != '0' %}checked="checked"{% endif %}/>
                        {{ 'Afficher une icone' | trans }}
                    </label>

                </div>
                <div class="box">
                    <div class="" style="float:left; width:49%;">
                        <h1>{{ 'reponses:: images par pages :' | trans }}</h1>
                        <div class="box">
                            <div id="nperpage_slider" class="ui-corner-all" style="width:100px; display:inline-block;"></div>
                            <input type="text" readonly style="width:35px;" value="{{app['settings'].getUserSetting(app.getAuthenticatedUser(), 'images_per_page')}}" id="nperpage_value"/>
                        </div>
                    </div>
                    <div style="float:right; width:49%;">
                        <h1>{{ 'reponses:: taille des images :' | trans }}</h1>
                        <div class="box">
                            <div id="sizeAns_slider" class="ui-corner-all" style="width:100px;display:inline-block;"></div>
                            <input type="hidden" value="{{app['settings'].getUserSetting(app.getAuthenticatedUser(), 'images_size')}}" id="sizeAns_value"/>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <h1>{{ 'Couleur de selection' | trans }}</h1>
                    <div id="backcolorpickerHolder" class="colorpickerbox">
                        <div class="submiter">{{ 'choisir' | trans }}</div>
                    </div>
                </div>
            </div>
            <div id="look_box_settings">
                <div class="row-fluid">
                    <div class="box">
                        <h1>{{ 'Affichage au demarrage' | trans }}</h1>
                        <form class="form-inline">
                            {% set start_page_pref = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'start_page') %}
                            <select class="span4" name="start_page" onchange="start_page_selector();">
                                <option value="LAST_QUERY" {% if start_page_pref == 'LAST_QUERY' %}selected="selected"{% endif %} >
                                    {{ 'Ma derniere question' | trans }}
                                </option>
                                <option value="QUERY" {% if start_page_pref == 'QUERY' %}selected="selected"{% endif %} >
                                    {{ 'Une question personnelle' | trans }}
                                </option>
                                <option value="PUBLI" {% if start_page_pref == 'PUBLI' %}selected="selected"{% endif %} >
                                    {{ 'Publications' | trans }}
                                </option>
                                <option value="HELP" {% if start_page_pref == 'HELP' %}}selected="selected"{% endif %} >
                                    {{ 'Aide' | trans }}
                                </option>
                            </select>
                            <input type="text" class="span4" name="start_page_value" value="{{ app['settings'].getUserSetting(app.getAuthenticatedUser(), 'start_page_query')}}" style="display:{% if start_page_pref == 'QUERY' %}inline{% else %}none{% endif %}" />
                            <input type="button" class="btn btn-inverse" value="{{'boutton::valider'  | trans }}" onclick="set_start_page();" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="PREVIEWBOX" class="PNB10" style="overflow:hidden;">
        <div class="PNB" style="right:180px;">
            <div id="PREVIEWTITLE" style="height:55px;bottom:auto;" class="PNB">
                <div class="PNB10 ui-corner-top" id='PREVIEWTITLEWRAPPER'>
                    <div style="padding-top: 0px; padding-left: 5px;">
                        <span id="PREVIEWTITLE_COLLLOGO"> </span>
                        &nbsp;
                        <span id="PREVIEWTITLE_COLLNAME"> </span>
                        &nbsp;
                        <span id="SPANTITLE"> </span>
                    </div>
                </div>
            </div>
            <div class="PNB" style="top:55px;">
                <div id="PREVIEWLEFT" class="preview_col PNB" style="width:60%;right:auto;overflow:hidden;">
                    <div id="PREVIEWCURRENT" class="ui-corner-bottom PNB10" style="top:0;height:116px;bottom:auto;">
                        <div id="PREVIEWCURRENTGLOB" style=""></div>
                    </div>
                    <div id="PREVIEWIMGCONT" class="dblclick preview_col_cont PNB10" style="overflow:hidden;top:146px;"></div>
                </div>
                <div class="gui_vsplitter gui_vsplitter2" style="left:60%;">

                </div>
                <div id="PREVIEWRIGHT" class="preview_col PNB" style="top:7px;left:60%;overflow:hidden;">
                    <div id="PREVIEWIMGDESC" class="PNB10">
                        <ul class="PNB" style="height:30px;bottom:auto;">
                            <li><a href="#PREVIEWIMGDESCINNER-BOX">{{ 'preview:: Description' | trans }}</a></li>
                            <li><a href="#HISTORICOPS-BOX">{{ 'preview:: Historique' | trans }}</a></li>
                            {% if GV_google_api is not empty %}
                            <li><a href="#popularity-BOX">{{ 'preview:: Popularite' | trans }}</a></li>
                            {% endif %}
                        </ul>
                        <div id="PREVIEWIMGDESCINNER-BOX" class="descBoxes PNB">
                            <div id="PREVIEWIMGDESCINNER" class="PNB10"></div>
                        </div>
                        <div id="HISTORICOPS-BOX" class="descBoxes PNB">
                            <div id="HISTORICOPS" class="PNB10"></div>
                        </div>
                        {% if GV_google_api is not empty %}
                        <div id="popularity-BOX" class="descBoxes PNB">
                            <div id="popularity" class="PNB10"></div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="PNB" style="width:180px;left:auto;">
            <div class="PNB10 ui-corner-all" style="height:20px;">
                <div onclick="closePreview();" style="cursor:pointer;color:#CCCCCC;font-size:14px;font-weight:bold;text-align:center;text-decoration:underline;">
                    {{ 'boutton::fermer' | trans }}
                </div>
            </div>
            <div id="PREVIEWOTHERS" style="top:40px;" class="PNB10 ui-corner-all">
                <div id="PREVIEWOTHERSINNER" style=""></div>
            </div>
        </div>
    </div>

    <div id="EDITWINDOW" style="display:none;" class="PNB10">
        <div id="idFrameE" class="PNB"></div>
    </div>

    <div id="basket_preferences" style="display:none;">
        <div class="box">
            <h1>{{ 'Presentation de vignettes de panier' | trans }}</h1>
            <div>
                {% set basket_status_display = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'basket_status_display') %}
                <label for="basket_status_display" class="checkbox">
                    <input onchange="setPref('basket_status_display',($(this).attr('checked') ? '1' :'0'));"
                    name="basket_status_display" type="checkbox" class="checkbox" value="1"
                    id="basket_status_display" {% if basket_status_display == '1' %}checked="checked"{% endif %} />
                    {{ 'Afficher les status' | trans }}
                </label>
            </div>
            <div>
                {% set basket_caption_display = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'basket_caption_display') %}
                <label for="basket_caption_display" class="checkbox">
                    <input onchange="setPref('basket_caption_display',($(this).attr('checked') ? '1' :'0'));"
                    name="basket_caption_display" type="checkbox" class="checkbox" value="1"
                    id="basket_caption_display" {% if basket_caption_display == '1' %}checked="checked"{% endif %} />
                    {{ 'Afficher la fiche descriptive' | trans }}
                </label>
            </div>
            <div>
                {% set basket_title_display = app['settings'].getUserSetting(app.getAuthenticatedUser(), 'basket_title_display') %}
                <label for="basket_title_display" class="checkbox">
                    <input onchange="setPref('basket_title_display',($(this).attr('checked') ? '1' :'0'));"
                    name="basket_title_display" type="checkbox" class="checkbox" value="1"
                    id="basket_title_display" {% if basket_title_display == '1' %}checked="checked"{% endif %} />
                    {{ 'Afficher le titre' | trans }}
                </label>
            </div>
        </div>
    </div>

    <div id="dialog_publicator" title="{{ 'action : bridge' | trans }}" style="display:none;"></div>
    <div id="modal_feed" title="{{ 'action : publier' | trans }}" style="display:none;"></div>
    <div id="dialog_dwnl" title="{{ 'action : exporter' | trans }}" style="display:none;"></div>

    {% if step %}
        <ol id="step_by_step" style="visibility: hidden;">
            /* data-id needs to be the same as the parent it will attach to */
            <li data-id="EDIT_query">
                <div>
                    <h1>
                        {{ "Rechercher"|trans }}
                    </h1>
                    <p>
                        {{ "Taper ici les termes de recherche afin de retrouver les documents souhaités."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="ADV_query">
                <div>
                    <h1>
                        {{ "Recherche Avancée"|trans }}
                    </h1>
                    <p>
                        {{ "Séléctionner les champs et les collections sur lesquels vous voulez rechercher."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="recordtype_sel">
                <div>
                    <h1>
                        {{ "Types de documents"|trans }}
                    </h1>
                    <p>
                        {{ "Séléctionner ici le type de document que vous souhaitez rechercher."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="TOOL_disktt">
                <div>
                    <h1>
                        {{ "Barre d'outils"|trans }}
                    </h1>
                    <p>
                        {{ "Utilisez la barre d'outils pour télécharger les documents ou pour agir sur ces documents."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="answers" data-options="tipLocation:left">
                <div>
                    <h1>
                        {{ "Sélection et Prévisualisation de documents"|trans }}
                    </h1>
                    <p>
                        {{ "Sélectionner les documents en cliquant dessus.
                        Pour sélectionner plusieurs documents, maintenez la touche maj enfoncée et
                        cliquez sur les documents souhaités.
                        Pour prévisualier un document cliquez dessus."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="basket_menu_trigger">
                <div>
                    <h1>
                        {{ "Paniers"|trans }}
                    </h1>
                    <p>
                        {{ "Consulter et administrer vos paniers dans cet onglet.
                        Pour créer un panier et affichez le menu déroulant en cliquant sue la
                        flèche blanche."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="answers" data-options="tipLocation:left">
                <div>
                    <h1>
                        {{ "Ajouter au panier"|trans }}
                    </h1>
                    <p>
                        {{ "Ajoutez des médias simplement en les faisant glisser vers le panier
                        désiré et en relachant au dessus."|trans }}
                    </p>
                </div>
            </li>
        </ol>
    {% endif %}

    {% if step %}
        <ol id="step_by_step" style="visibility: hidden;">
            /* data-id needs to be the same as the parent it will attach to */
            <li data-id="EDIT_query">
                <div>
                    <h1>
                        {{ "Rechercher"|trans }}
                    </h1>
                    <p>
                        {{ "Taper ici les termes de recherche afin de retrouver les documents souhaités."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="ADV_query">
                <div>
                    <h1>
                        {{ "Recherche Avancée"|trans }}
                    </h1>
                    <p>
                        {{ "Séléctionner les champs et les collections sur lesquels vous voulez rechercher."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="recordtype_sel">
                <div>
                    <h1>
                        {{ "Types de documents"|trans }}
                    </h1>
                    <p>
                        {{ "Séléctionner ici le type de document que vous souhaitez rechercher."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="TOOL_disktt">
                <div>
                    <h1>
                        {{ "Barre d'outils"|trans }}
                    </h1>
                    <p>
                        {{ "Utilisez la barre d'outils pour télécharger les documents ou pour agir sur ces documents."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="answers" data-options="tipLocation:left">
                <div>
                    <h1>
                        {{ "Sélection et Prévisualisation de documents"|trans }}
                    </h1>
                    <p>
                        {{ "Sélectionner les documents en cliquant dessus.
                        Pour sélectionner plusieurs documents, maintenez la touche maj enfoncée et
                        cliquez sur les documents souhaités.
                        Pour prévisualier un document cliquez dessus."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="basket_menu_trigger">
                <div>
                    <h1>
                        {{ "Paniers"|trans }}
                    </h1>
                    <p>
                        {{ "Consulter et administrer vos paniers dans cet onglet.
                        Pour créer un panier et affichez le menu déroulant en cliquant sue la
                        flèche blanche."|trans }}
                    </p>
                </div>
            </li>
            <li data-id="answers" data-options="tipLocation:left">
                <div>
                    <h1>
                        {{ "Ajouter au panier"|trans }}
                    </h1>
                    <p>
                        {{ "Ajoutez des médias simplement en les faisant glisser vers le panier
                        désiré et en relachant au dessus."|trans }}
                    </p>
                </div>
            </li>
        </ol>
    {% endif %}

    <script type="text/javascript">
        {% include "prod/thesaurus.js.twig" with {'search_datas': search_datas} %}
    </script>
    <script type="text/javascript" src="{{ path('minifier', { 'g' : 'prod' }) }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            p4.reg_delete="{% if app['settings'].getUserSetting(app.getAuthenticatedUser(), "warning_on_delete_story") %}true{% else %}false{% endif %}";
        });

        function pollNotifications(){
            $.ajax({
                type: "POST",
                url: "{{ path('list_notifications') }}",
                dataType: "json",
                data: {
                    module : 1,
                    usr : {{app.getAuthenticatedUser().getId()}}
                },
                error: function(){
                    window.setTimeout("pollNotifications();", 10000);
                },
                timeout: function(){
                    window.setTimeout("pollNotifications();", 10000);
                },
                success: function(data){
                    if(data)
                        manageSession(data, true);
                    var t = 120000;
                    if(data.apps && parseInt(data.apps)>1)
                        t = Math.round((Math.sqrt(parseInt(data.apps)-1) * 1.3 * 60000));
                    window.setTimeout("pollNotifications();", t);

                    return;
                }
            });
        };

        function setCss(color) {
            $("#skinCss").attr("href","/include/minify/?f=skins/prod/"+color+"/prodcolor.css");
            $.post("{{ path('save_pref') }}", {
                prop: "css",
                value: color,
                t: Math.random()
            }, function(data){
                return;
            });
            if ($.browser.msie && $.browser.version === "6.0")
                $("select").hide().show();
        }

    </script>
    <script type="text/javascript" id="bitly_loader"></script>
    {% if step %}
        <script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/joyride/jquery.cookie.js' }) }}"></script>
        <script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/joyride/modernizr.mq.js' }) }}"></script>
        <script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/joyride/jquery.joyride-2.1.js' }) }}"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#step_by_step").joyride({
                    autoStart : true,
                    modal:true,
                    expose: true
                });
            });
        </script>
    {% endif %}

{% endblock %}