{% extends 'base.html.twig' %}

{% block title %}OceanExpert - A Directory of Marine and Freshwater Professionals{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/ionicons.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/square/blue.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/autocomplete.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/register.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/jquery-ui.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/profile.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/advancedSearch.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/dropzone.css') }}">
    <style media="screen">
        .send-mail {
            float: right;
            margin: 10px 0;
        }

        .showLess {
            display: none;
        }
    </style>
{% endblock %}

{% block body %}

    {% include 'navbarlogin.html.twig' %}

    <div class="container-fluid">
        <div class="content">

            <h3 class="heading">Advanced Search</h3>
            <p>
                <i class="fa fa-info-circle fa-fw" aria-hidden="true"></i>
                The advanced search allows you to elaborate your search options using "<i class="fa fa-plus fa-fw" aria-hidden="true"></i>"
                and the boolean operators <strong>AND/OR</strong>.
            </p>
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    e.g. <strong>SEARCH IN</strong>: Experts  - <strong>FILTERS</strong>: Country is – <strong>KEYWORDS</strong>: Belgium<br />
                    "<i class="fa fa-plus fa-fw" aria-hidden="true"></i>" <strong>AND</strong><br />
                    <strong>SEARCH IN</strong>: Experts – <strong>FILTERS</strong>: Email contains - <strong>KEYWORDS</strong>: @unesco.org
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <img
                            src="/img/searchExample.png"
                            alt="Search Example"
                            width="300px"
                            id="searchExample"
                            onmouseover="searchExampleFullscreen()"
                            onmouseout="searchExampleSmallscreen()"/>
                </div>
            </div>

            <h3 class="heading"></h3>

            <form action="" method="GET" class="advSearch">
                <div class="row" id="searchBox">
                    {% if app.request.get('type')|length > 0 %}
                        {% set increment = 0 %}
                        {% for key,field in searchConditions %}
                            <div class="formContent">
                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                        <label
                                                for="type[{{ key }}]"
                                                class="col-sm-12">
                                            SEARCH IN:
                                        </label>
                                        <select
                                                name="type[{{ key }}]"
                                                id="type[{{ key }}]"
                                                class="form-control searchType">
                                            <option
                                                    value="all"
                                                    {% if field.type =="all" %}
                                                selected=""
                                                    {% endif %}>
                                                All
                                            </option>
                                            <option
                                                    value="experts"
                                                    {% if field.type =="experts" %}
                                                selected=""
                                                    {% endif %}>
                                                Experts
                                            </option>
                                            <option
                                                    value="institutions"
                                                    {% if field.type =="institutions" %}
                                                selected=""
                                                    {% endif %}>
                                                Institutes
                                            </option>
                                            <option
                                                    value="events"
                                                    {% if field.type =="events" %}
                                                selected=""
                                                    {% endif %}>
                                                Events
                                            </option>
                                            <option
                                                    value="documents"
                                                    {% if field.type =="documents" %}
                                                selected=""
                                                    {% endif %}>
                                                Documents
                                            </option>
                                        </select>
                                    </div>

                                    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                        <label
                                                for="filter[{{ key }}]"
                                                class="col-sm-12">
                                            FILTERS:
                                        </label>
                                        <select
                                                name="filter[{{ key }}]"
                                                id="filter[{{ key }}]"
                                                class="form-control filters">
                                            <option
                                                    value="{{ field.filter }}"
                                                    selected>
                                                {{ field.filter }}
                                            </option>
                                            {% if field.type =="experts" %}
                                                <option value="Activities include">Activities include</option>
                                                <option value="Country is">Worklocation (country) is</option>
                                                <option value="Current address contains">Worklocation address contains </option>
                                                <option value="In multiple countries">Worklocation in one of these countries</option>
                                                <option value="Created">Created between (dates included)</option>
                                                <!-- #680
                                                <option value="Current/Previous addresses contain">Current/Previous addresses contain </option>
                                                -->
                                                <option value="Degree contains">Degree contains</option>
                                                <option value="Department contains">Department contains</option>
                                                <option value="Email contains">Email contains</option>
                                                <option value="First name contains">First name contains</option>
                                                <option value="Institution name contains">Institute name contains </option>
                                                <option value="Is deceased">Is deceased</option>
                                                <option value="Is quality checked">Is quality checked</option>
                                                <option value="Is retired">Is retired</option>
                                                <option value="Job title contains">Job title contains</option>
                                                <option value="Job type is">Job type is</option>
                                                <option value="Last name contains">Last name contains</option>
                                                <option value="Member of group or sub-group">Member of group or sub-group </option>
                                                <option value="Name contains">Name contains</option>
                                                <option value="Phone/Fax contains">Phone/Fax contains</option>
                                                <option value="Quality last checked">Quality last checked</option>
                                                <option value="Sea regions of study is">Sea regions of study is </option>
                                                <option value="Subject Area is">Subject Area is</option>
                                                <option value="Unique Identifier">Unique Identifier is</option>
                                                <option value="Updated">Updated between (dates included)</option>
                                                <option value="Website URL contains">Website URL contains</option>
                                                <option value="Working languages includes">Working languages includes </option>
                                                <option value="Gender is">Gender is</option>
                                                {% if is_granted('ROLE_GLOBAL_EDITOR') %}
                                                    <option value="Comment contains">Comment contains</option>
                                                    <option value="Do Not Invite">Do Not Invite</option>
                                                    <option value="Is Active">Is Active</option>
                                                {% endif %}
                                            {% elseif field.type =="institutions" %}
                                                <option value="Activities contains">Activities contains</option>
                                                <option value="Country is">Country is</option>
                                                <option value="Created">Created between (dates included)</option>
                                                <option value="Current address contains">Current address contains </option>
                                                <!-- <option value="Current/Previous addresses contain">Current/Previous addresses contain </option> -->
                                                <option value="EDMO Code is">EDMO Code is</option>
                                                <option value="Name contains">Name contains</option>
                                                <option value="Sea regions of study is">Sea regions of study is </option>
                                                <option value="Tel/Fax contains">Tel/Fax contains</option>
                                                <option value="Type is">Type is</option>
                                                <option value="Updated">Updated between (dates included)</option>
                                                <option value="Website URL contains">Website URL contains</option>
                                            {% elseif field.type =="events" %}
                                                <option value="Title contains">Title contains</option>
                                                <option value="Type is">Type is</option>
                                                <option value="Summary contains">Summary contains</option>
                                                <option value="Address contains">Address contains</option>
                                                <option value="Country is">Country is</option>
                                                <option value="In Group">Country is</option>
                                                <option value="Starts">Starts</option>
                                                <option value="Ends">Ends</option>
                                                <option value="Updated">Updated between (dates included)</option>
                                                <option value="Created">Created between (dates included)</option>
                                            {% elseif field.type =="documents" %}
                                                <option value="Title contains">Title contains</option>
                                                <option value="Type is">Type is</option>
                                                <option value="Summary contains">Summary contains</option>
                                                <option value="Created">Created between (dates included)</option>
                                            {% endif %}
                                        </select>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                        <label
                                                for="keywords[{{ key }}]"
                                                class="col-sm-12">
                                            KEYWORDS:
                                        </label>
                                        <div class="input-group">
                                            <input
                                                    type="text"
                                                    name="keywords[{{ key }}]"
                                                    id="keywords[{{ key }}]"
                                                    class="form-control"
                                                    value="{% if field.keywords is not iterable %}{{ field.keywords|convert_encoding('UTF-8', 'iso-2022-jp') }}{% endif %}"
                                                    required="required"
                                                    title="keywords"
                                                    placeholder="Enter your search keyword(s)">
                                            {% if loop.last %}
                                                <span class="input-group-addon btn btn-primary btn-remove">
                                                    <span class="glyphicon glyphicon-minus">
                                                    </span>
                                                </span>
                                                <span class="input-group-addon btn btn-primary btn-add">
                                                    <span class="glyphicon glyphicon-plus">
                                                    </span>
                                                </span>
                                            {% else %}
                                                <span class="input-group-addon btn btn-primary btn-remove">
                                                    <span class="glyphicon glyphicon-minus">
                                                    </span>
                                                </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div
                                        class="col-xs-12 col-sm-12 col-md-12 col-lg-12 operation"
                                        {% if loop.last %}
                                    style="display:none;"
                                        {% endif %}>
                                    <div class="no-checkedselector spacer">
                                        <div class="toggle-container">
                                            <input
                                                    id="toggle-OR[{{ key }}]"
                                                    class="toggle toggle-left"
                                                    name="toggle[{{ key }}]"
                                                    value="OR"
                                                    type="radio"
                                                    {% if field.toggle=="OR" %}
                                                checked=""
                                                    {% endif %}>
                                            <label
                                                    for="toggle-OR[{{ key }}]"
                                                    class="btn btn-default">
                                                OR
                                            </label>
                                            <input
                                                    id="toggle-AND[{{ key }}]"
                                                    class="toggle toggle-right"
                                                    name="toggle[{{ key }}]"
                                                    value="AND"
                                                    type="radio"
                                                    {% if field.toggle=="AND" %}
                                                checked=""
                                                    {% endif %}>
                                            <label
                                                    for="toggle-AND[{{ key }}]"
                                                    class="btn btn-default">
                                                AND
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% set increment = key %}
                        {% endfor %}
                        <div class="incremeter">{{ increment + 1 }}</div>

                    {% else %}
                        <div class="incremeter">1</div>
                        <div class="formContent">
                            <div class="form-group">
                                <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                    <label for="type[0]" class="col-sm-12">SEARCH IN:</label>
                                    <select
                                            name="type[0]"
                                            id="type[0]"
                                            class="form-control searchType">
                                        <option
                                                value="all"
                                                selected="selected">
                                            All
                                        </option>
                                        <option
                                                value="experts">
                                            Experts
                                        </option>
                                        <option
                                                value="events">
                                            Events
                                        </option>
                                        <option
                                                value="institutions">
                                            Institutes
                                        </option>
                                        <option
                                                value="documents">
                                            Documents
                                        </option>
                                    </select>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                    <label for="filter[0]" class="col-sm-12">FILTERS:</label>
                                    <select name="filter[0]" id="filter[0]" class="form-control  filters">
                                        <option value="" disabled selected>Select your option</option>
                                    </select>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <label for="keywords[0]" class="col-sm-12">KEYWORDS:</label>
                                    <div class="input-group">
                                        <input
                                                type="text"
                                                name="keywords[0]"
                                                id="keywords[0]"
                                                class="form-control"
                                                value=""
                                                required="required"
                                                title="keywords"
                                                placeholder="Enter your search keyword(s)"/>
                                        <span
                                                class="input-group-addon btn btn-primary btn-add">
                                        <span
                                                class="glyphicon glyphicon-plus">
                                        </span>
                                    </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 operation" style="display:none;">
                                <div class="no-checkedselector spacer">
                                    <div class="toggle-container">
                                        <input
                                                id="toggle-OR[0]"
                                                class="toggle toggle-left"
                                                name="toggle[0]"
                                                value="OR"
                                                type="radio"/>
                                        <label
                                                for="toggle-OR[0]"
                                                class="btn btn-default">
                                            OR
                                        </label>
                                        <input
                                                id="toggle-AND[0]"
                                                class="toggle toggle-right"
                                                name="toggle[0]"
                                                value="AND"
                                                type="radio">
                                        <label
                                                for="toggle-AND[0]"
                                                class="btn btn-default">
                                            AND
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <input
                                type="hidden"
                                name="action"
                                value="advSearch"/>
                        <button
                                type="submit"
                                class="btn btn-primary btn-search spacer ">
                            Search <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </div>
            </form>
            <div class="heading"></div>

            {% if data is defined %}
                {% if app.request.get('filterType') is defined %}
                    {% set filterType = app.request.get('filterType')|split(',') %}
                {% endif %}

                {% if data.getParams is defined and data.getParams is not empty %}
                    <div class="row">
                        <div class="col-md-2 col-lg-2">
                            <div class="heading top-buffer10">
                                <strong>
                                    Categories
                                </strong>
                                <small class="hide-content hide-categories">
                                    hide
                                </small>
                            </div>
                            {% for catKey, category in filters.type %}
                                {% if category is defined and category > 0 %}
                                    <div class="checkbox categories">
                                        <label>
                                            {% if (filters.type|length > 1)
                                                and (
                                                        (data.getParams.action is defined
                                                            and data.getParams.action != "browse"
                                                        )
                                                        or (
                                                            data.getParams.type is defined
                                                                and data.getParams.type == "all"
                                                        )
                                                )
                                            %}
                                                <input
                                                        type="checkbox"
                                                        class="icheck"
                                                        value="{{ catKey }}"
                                                        {% if catKey in filterType %}
                                                            checked="checked"
                                                        {% endif %}
                                                />
                                                <span class="cr">
                                                    <i class="cr-icon glyphicon glyphicon-ok"></i>
                                                </span>
                                            {% endif %}
                                            {{ catKey|capitalize }}
                                            ({% if category is defined %}
                                            {{ category }}
                                        {% else %}
                                            0
                                        {% endif %})
                                        </label>
                                    </div>
                                {% endif %}
                            {% endfor %}
                            {% if filters.country is defined and filters.country is not empty %}

                                <div class="heading top-buffer10">
                                    <strong>
                                        Countries
                                    </strong>
                                    <small class="hide-content hide-countries">
                                        hide
                                    </small>
                                </div>
                                <ul class="searchCat countries">
                                    {% for country, count in filters.country %}
                                        <li>
                                            <a
                                                    href="{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterCountry': country,'page':1})) }}">
                                                {{ country }}
                                            </a>
                                            ({{ count }})
                                        </li>
                                    {% endfor %}
                                    {% if filters.country|length >20 %}
                                        {% if filters.country|length == 21 %}
                                            <div class="loadMore" onclick="loadMorefilters('countries');">[ +1 More
                                                country ]
                                            </div>
                                        {% else %}
                                            <div class="loadMore" onclick="loadMorefilters('countries');">[
                                                +{{ filters.country|length - 20 }} More countries ]
                                            </div>
                                        {% endif %}
                                        <div class="showLess" onclick="showLessfilters('countries')">[ Less countries
                                            ]
                                        </div>
                                    {% endif %}
                                </ul>
                            {% endif %}
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 ">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <h3 class="heading">{{ searchResultType }}</h3>
                                </div>
                                <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                                    {% if data.getParams is defined %}

                                        {% if searchResultText is defined %}
                                            <div class="top-padding10">{{ searchResultText | raw }}</div>
                                        {% endif %}

                                    {% endif %}
                                </div>
                                    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 top-buffer">
                                        Applied Filters:
                                        {% if appliedFilters | length > 0 %}
                                            {% for key,searchfilter in appliedFilters %}
                                                <label href="#" class="label label-primary filter-label" data-index="1"
                                                       data-value="{{ searchfilter }}">{{ searchfilter }} ×</label>
                                            {% endfor %}
                                        {% endif %}
                                        {% if appliedCountryFilters | length > 0 %}
                                            {% for key,searchfilter in appliedCountryFilters %}
                                                <label href="#" class="label label-primary countryfilter-label" data-index="1"
                                                       data-value="{{ searchfilter }}">{{ searchfilter }} ×</label>
                                            {% endfor %}
                                        {% endif %}
                                        {% if appliedCountryFilters | length == 0 and appliedFilters | length == 0%}
                                            no filters applied
                                        {% endif %}
                                    </div>

                                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                    {% if data.getTotalItemCount > 1 %}
                                        {% if sortfields is defined and sortfields|length > 0 %}
                                            <div class="pull-right form-inline">
                                                Sort Result by:
                                                <select id="sortby" class="form-control ">
                                                    {% for key, sort in sortfields|sort %}
                                                        {% if key == sortby %}
                                                            {% if app.request.get('sortby') != "" %}
                                                                <option value="{{ key }}">{{ sort }}</option>
                                                            {% else %}
                                                                <option value="{{ key }}"
                                                                        selected="selected">{{ sort }}</option>
                                                            {% endif %}
                                                        {% else %}
                                                            <option value="{{ key }}">{{ sort }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </div>
                            {% if data.getTotalItemCount is defined and data.getTotalItemCount > 0 %}
                                <div class="row spacer">
                                    {# <div class="col-md-12"> #}
                                    <div class="col-md-3 search-display">
                                        Displaying {{ data.getPaginationData.firstItemNumber }}
                                        – {{ data.getPaginationData.lastItemNumber }} results
                                        of {{ data.getTotalItemCount }}.
                                    </div>
                                    <div class="form-inline col-md-3">
                                        {% if data.getTotalItemCount >10 %}
                                            <select name="resultCnt" class="form-control  resultCnt">
                                                <option value="10">10</option>
                                                <option value="20">20</option>
                                                <option value="50">50</option>
                                                <option value="100">100</option>
                                            </select> results per page.
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6">
                                        <div class="navigation pagination-sm pull-right">
                                            {{ knp_pagination_render(data) }}
                                        </div>
                                    </div>
                                </div>

                                <div class="row list-group">
                                    <div class="col-md-12">
                                        {% for item in data %}
                                            <div class="item  col-xs-4 col-lg-4 list-group-item">
                                                <div class="thumbnail">
                                                    {% if item.type == "experts" %}
                                                        <a
                                                                href="{{ path('view_profile', {'user': item.id_ind}) }}"
                                                                class="profile-url">
                                                            <img
                                                                    class="group list-group-image lazy img-thumbnail img-responsive"
                                                                    data-original="{% if file_exists(web_path~asset('uploads/profile/profile_'~item.id_ind~'.png')) %}{{ asset('uploads/profile/profile_'~item.id_ind~'.png') }}{% endif %}"
                                                                    src="{{ asset('assets/uploads/default.png') }}"
                                                                    onError="this.src='{{ asset('assets/uploads/default.png') }}';"
                                                                    alt="profile image"/>
                                                        </a>
                                                        <div class="caption">
                                                            <p
                                                                    class="group inner list-group-item-text">
                                                                <strong>
                                                                    <a
                                                                            href="{{ path('view_profile', {'user': item.id_ind}) }}"
                                                                            {% if item.status == 2 %}
                                                                                class="profile-url text-danger tipso"
                                                                                title="Deleted record"
                                                                                data-tipped-options="skin: 'red'"
                                                                            {% elseif item.status == 0 %}
                                                                                class="profile-url text-warning tipso"
                                                                                title="Deactivated record"
                                                                                data-tipped-options="skin: 'red'"
                                                                            {% elseif item.status == 3 %}
                                                                                class="profile-url text-warning tipso"
                                                                                title="Deactivated record"
                                                                                data-tipped-options="skin: 'red'"
                                                                            {% endif %}
                                                                    >{{ item.sname | raw | upper }} {{ item.mname | raw }} {{ item.fname | raw }}
                                                                    </a>
                                                                </strong>
                                                                {% if item.quality_checked == 1 %}
                                                                    <i
                                                                            class="green fa fa-check-circle tipso"
                                                                            title="User has been verified."></i>
                                                                {% endif %}
                                                                {{ item.jobtitle }}

                                                                {% if item.retired == 1 %}
                                                                    <span class="label label-success">Retired</span>
                                                                {% endif %}

                                                                {% if item.deceased == 1 %}
                                                                    <span class="label label-danger">Deceased</span>
                                                                {% endif %}
                                                                <br/>

                                                                {% if item.use_inst_addr == 1 %}
                                                                    {% if item.inst_address !="" %}
                                                                        {{ item.inst_address }},
                                                                    {% endif %}

                                                                    {% if item.instCity !="" %}
                                                                        {{ item.instCity }},
                                                                    {% endif %}

                                                                    {% if item.country !="" %}
                                                                        <strong>{{ item.country }}</strong>
                                                                    {% endif %}

                                                                {% else %}
                                                                    {% if item.addr_1 !="" %}
                                                                        {{ item.addr_1 }},
                                                                    {% endif %}

                                                                    {% if item.addr_2 !="" %}
                                                                        {{ item.addr_2 }},
                                                                    {% endif %}

                                                                    {% if item.city !="" %}
                                                                        {{ item.city }},
                                                                    {% endif %}

                                                                    {% if item.state !="" %}
                                                                        {{ item.state }},
                                                                    {% endif %}

                                                                    {% if item.postcode !="" %}
                                                                        {{ item.postcode }},
                                                                    {% endif %}

                                                                    {% if item.country !="" %}
                                                                        <strong>{{ item.country }}</strong>
                                                                    {% endif %}
                                                                {% endif %}
                                                            </p>

                                                            {% if is_granted('ROLE_GLOBAL_EDITOR') %}
                                                                {% if item.events is defined and item.events > 0 %}
                                                                    <a
                                                                            href="#"
                                                                            class="bold">
                                                                        [Event(s): {{ item.events }} ]
                                                                    </a>
                                                                {% endif %}
                                                            {% endif %}
                                                        </div>
                                                    {% elseif item.type=="institutions" %}
                                                        {% if item.inst_logo is defined and  item.inst_logo != "" %}
                                                            {% set instUrl = asset('uploads/institutes/'~item.id_inst~'/'~item.inst_logo) %}
                                                        {% else %}
                                                            {% set instUrl = asset('assets/uploads/institute.png') %}
                                                        {% endif %}

                                                        <img
                                                                class="group list-group-image lazy  img-thumbnail img-responsive"
                                                                src="{{ instUrl }}"
                                                                data-original="{{ instUrl }}"
                                                                alt=""/>
                                                        <div class="caption">
                                                            <p class="group inner list-group-item-text">
                                                                <strong>
                                                                    <a
                                                                            href="{{ path('view_institution', {'instId': item.id_inst}) }}"
                                                                            {% if item.activated == 0 %}
                                                                                class="profile-url text-warning tipso"
                                                                                title="Deactivated record"
                                                                            {% elseif item.activated == 2 %}
                                                                                class="profile-url text-danger tipso"
                                                                                title="Deleted record"
                                                                            {% elseif item.activated == 3 %}
                                                                                class="profile-url text-danger tipso"
                                                                                title="Deleted record"
                                                                            {% else %}
                                                                                class="profile-url"
                                                                            {% endif %}
                                                                    >
                                                                        {{ item.inst_name | raw }}
                                                                    </a>
                                                                </strong>
                                                                <span class="label label-primary">{{ item.instType }}</span>
                                                                {% if item.inst_address|trim !="" %}
                                                                    <br/>{{ item.inst_address | raw }}
                                                                {% endif %}

                                                                {% if item.instCity|trim !="" %}
                                                                    <br/>{{ item.instCity | raw }}
                                                                {% endif %}

                                                                {% if item.instState|trim !="" %}
                                                                    {{ item.instState | raw }}
                                                                {% endif %}

                                                                {% if item.country|trim !="" %}
                                                                    <br/>
                                                                    <strong>{{ item.country | raw }}</strong>
                                                                {% endif %}
                                                            </p>
                                                        </div>
                                                    {% elseif item.type=="events" %}
                                                        <img
                                                                class="group list-group-image lazy  img-thumbnail img-responsive"
                                                                src="{{ asset('assets/uploads/event.png') }}"
                                                                data-original="{{ asset('assets/uploads/event.png') }}"
                                                                alt=""/>
                                                        <div class="caption">
                                                            <p class="group inner list-group-item-text">
                                                                <strong>
                                                                    <a
                                                                            href="{{ path('view_event', {'event': item.id_event}) }}"
                                                                            {% if item.activated == 2 %}
                                                                                class="profile-url text-danger tipso"
                                                                                title="Deleted record"
                                                                                data-tipped-options="skin: 'red'"
                                                                            {% elseif item.activated == 0 %}
                                                                                class="profile-url text-warning tipso"
                                                                                title="Deactivated record"
                                                                                data-tipped-options="skin: 'red'"
                                                                            {% endif %}
                                                                    >
                                                                        {{ item.name }}
                                                                    </a>
                                                                </strong>
                                                                <span class="label label-warning">{{ item.eventtype }}</span>
                                                                <br/>
                                                                {% if item.start_on is defined and  item.start_on !="" %}
                                                                    {{ item.start_on|date("d/m/Y") }} -
                                                                {% endif %}

                                                                {% if item.end_on is defined and item.end_on !="" %}
                                                                    {{ item.end_on|date("d/m/Y") }}
                                                                    <br/>
                                                                {% endif %}

                                                                {% if item.addr_1 !="" %}
                                                                    {{ item.addr_1 | raw }},
                                                                    <br/>
                                                                {% endif %}

                                                                {% if item.city !="" %}
                                                                    {{ item.city | raw }},
                                                                {% endif %}

                                                                {% if item.state !="" %}
                                                                    {{ item.state | raw }},
                                                                {% endif %}

                                                                {% if item.country !="" %}
                                                                    <strong>{{ item.country | raw }}</strong>
                                                                {% endif %}
                                                            </p>
                                                        </div>
                                                    {% elseif item.type=="documents" %}
                                                        <img
                                                                class="group list-group-image lazy  img-thumbnail img-responsive"
                                                                src="{{ asset('assets/uploads/documents.png') }}"
                                                                data-original="{{ asset('assets/uploads/documents.png') }}"
                                                                alt="documents"/>
                                                        <div class="caption">
                                                            <p class="group inner list-group-item-text">
                                                                <strong>
                                                                    <a
                                                                            href="{{ path('view_document', {'idDoc': item.id_doc}) }}">
                                                                        {{ item.title }}
                                                                        {% if item.doc_code is defined and item.doc_code !="" %}
                                                                            &nbsp;(doc code: {{ item.doc_code | raw }})
                                                                        {% endif %}
                                                                    </a>
                                                                </strong>
                                                                <span class="label label-warning">{{ item.documenttype }}</span>
                                                                <br/>
                                                            </p>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3 search-display">
                                        Displaying {{ data.getPaginationData.firstItemNumber }}
                                        – {{ data.getPaginationData.lastItemNumber }} results
                                        of {{ data.getTotalItemCount }}.
                                    </div>
                                    <div class="form-inline col-md-3">
                                        {% if data.getTotalItemCount >10 %}
                                            <select name="resultCnt" class="form-control resultCnt">
                                                <option value="10">10</option>
                                                <option value="20">20</option>
                                                <option value="50">50</option>
                                                <option value="100">100</option>
                                            </select> results per page.
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6">
                                        <div class="navigation pagination-sm pull-right">
                                            {{ knp_pagination_render(data) }}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            <div class="heading"></div>

                            {% if is_granted('ROLE_GLOBAL_EDITOR') %}
                                <button
                                        href="#compose-mail"
                                        data-toggle="modal"
                                        class="btn btn-primary send-mail"><i class="fa fa-envelope-o fa-fw"></i>
                                    Send an email to all experts in these search results
                                </button>
                            {% endif %}
                        </div>
                    </div>

                {% endif %}
            {% endif %}
        </div>

        {% if is_granted('ROLE_GLOBAL_EDITOR') %}
            <div
                    aria-hidden="true"
                    aria-labelledby="compose-mail"
                    role="dialog"
                    tabindex="-1"
                    id="compose-mail"
                    class="modal fade"
                    style="display: none;">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button
                                    aria-hidden="true"
                                    data-dismiss="modal"
                                    class="close"
                                    type="button">
                                ×
                            </button>
                            <h4 class="modal-title">Compose Email</h4>
                        </div>
                        <div class="modal-body">
                            <div role="form" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-lg-2 control-label">Sender</label>
                                    <div class="col-lg-10">
                                        {% if file_exists(web_path~asset('uploads/profile/profile_'~app.user.id~'.png')) %}
                                            <img
                                                    src="{{ asset('uploads/profile/profile_'~app.user.id~'.png') }}"
                                                    class="profile-img-sm img-circle"
                                                    alt="profile image"/>
                                        {% endif %}
                                        <label class="control-label">{{ user.fname~' '~ user.sname }}
                                            &lt;{{ app.user.email }}&gt;
                                            <br/>
                                            <div class="checkbox">
                                                <label class="no-padding" for="selfEmail">
                                                    <input type="checkbox" value="" id="selfEmail">
                                                    <span class="cr"><i
                                                                class="cr-icon glyphicon glyphicon-ok"></i></span>
                                                    Send a copy of this message to me too
                                                </label>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-2 control-label">Recipients</label>
                                    <div class="col-lg-10">
                                        <label class="control-label">All people in the search result</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-2 control-label" for="subject">Subject</label>
                                    <div class="col-lg-10">
                                        <input type="text" placeholder="" id="subject" name="subject"
                                               class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-2 control-label" for="message">Message</label>
                                    <div class="col-lg-10">
                                        <textarea rows="10" cols="30" class="form-control textarea" id="message"
                                                  name="message"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-2 control-label" for="info"></label>
                                    <div class="col-lg-10">
                                        <div style="margin-top:5px">
                                            <div class="infoHidden">
                                                <a class="showInfo" href="javascript:void(0)">[Info on inserting
                                                    names]</a>
                                            </div>
                                            <div class="infoShown">
                                                <a class="hideInfo" href="javascript:void(0)" style="float:right;">[Hide]</a>
                                                If you include these special words in your message, they will be
                                                replaced:
                                                <br/>
                                                <br/>
                                                <div class="table-responsive">
                                                    <table class="table table-condensed">
                                                        <tbody>
                                                        <tr>
                                                            <td>_FULLNAME_</td>
                                                            <td>Recipient name (first name &amp; surname)</td>
                                                        </tr>
                                                        <tr>
                                                            <td>_FNAME_</td>
                                                            <td>Recipient first name</td>
                                                        </tr>
                                                        <tr>
                                                            <td>_SNAME_</td>
                                                            <td>Recipient surname</td>
                                                        </tr>
                                                        <tr>
                                                            <td>_TITLE_</td>
                                                            <td>Recipient title</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-lg-offset-2 col-lg-10">
                                        <div class="fileUpload">
                                            <form
                                                    action="{{ path('upload_email_attachments') }}"
                                                    class="dropzone"
                                                    id="myAwesomeDropzone">
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-lg-offset-2 col-lg-10">
                                        <div class="btn-toolbar pull-right ">
                                            <button
                                                    class="btn btn-send btn-danger"
                                                    id="closeModal"
                                                    data-dismiss="modal"><i class="fa fa-times-circle"></i>
                                                Close
                                            </button>
                                            <button
                                                    class="btn btn-send btn-primary"
                                                    id="sendmail">
                                                Send <i class="fa fa-envelope-o"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        {% endif %}

    </div>

    {% include 'footer.html.twig' %}
    <script src="{{ asset('js/bootstrap-datepicker.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/dropzone.js') }}"></script>
    <script src="{{ asset('js/wysihtml5-0.3.0.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.runtime.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-dialog.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tinymce.min.js') }}" type="text/javascript"></script>

    <script type="text/javascript">
        var removeEmailAttachments = '{{ path('remove_email_attachments') }}';

        $(function ()
        {
            tinymce.init({
                selector: 'textarea',
                plugins: [
                    "advlist autolink lists link image charmap print preview anchor",
                    "searchreplace visualblocks code fullscreen",
                    "insertdatetime media table contextmenu paste imagetools powerpaste"
                ],
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
                powerpaste_allow_local_images: true,
                powerpaste_word_import: 'prompt',
                powerpaste_html_import: 'prompt',
                branding: false,
                relative_urls: false,
                convert_urls: false,
                forced_root_block: false
            });

            $(document).on('focusin', function (e) {
                if ($(e.target).closest(".mce-window").length) {
                    e.stopImmediatePropagation();
                }
            });

            Tipped.create('.tipso', {maxWidth: 250});

            $.ajax({
                url: "{{ path('get_countries') }}",
            }).done(function (response) {
                window.countries = response;
            });

            $.ajax({
                url: "{{ path('get_sea_regions') }}",
            }).done(function (response) {
                window.seaRegions = response;
            });

            $(".search").addClass('navactive');

            var i = $(".incremeter").text();

            $(document).on('click', '.btn-add', function (e) {
                e.preventDefault();
                var existingDate = false;
                var controlForm = $('#searchBox:first'),
                    currentEntry = $(this).closest('.formContent');
                var newEntry = $(currentEntry.clone(true)).appendTo(controlForm);
                newEntry.find('.select2-container').remove();

                newEntry.find('[id]').each(function () {
                    var getid = this.id.split('[')[0];
                    this.id = getid + '[' + i + ']';
                });

                newEntry.find('[name]').each(function () {
                    var getid = this.name.split('[')[0];
                    this.name = getid + '[' + i + ']';
                });

                newEntry.find('[for]').each(function () {
                    var label = $(this).attr('for').split('[')[0];
                    $(this).attr('for', label + '[' + i + ']');

                });

                $("#type\\[" + i + "\\]").val('all');
                $("#type\\[" + i + "\\]").change();
                $("#filter\\[" + i + "\\]").change();
                newEntry.find('.revert').replaceWith('<input id="keywords[' + i + ']" name="keywords[' + i + ']" class="form-control " required="required" >');
                $(newEntry).find('.incremeter').html(++i);

                newEntry.find('input:not(:radio)').val('');
                currentEntry.find('.operation').css('display', 'block');
                currentEntry.find('.btn-remove').remove();
                newEntry.find('.btn-remove').remove();

                controlForm.find('.formContent:not(:last) .btn-add')
                    .removeClass('btn-add').addClass('btn-remove')
                    .removeClass('btn-success').addClass('btn-danger')
                    .html('<span class="glyphicon glyphicon-minus"></span>');

                controlForm.find('.formContent:last .btn-add')
                    .replaceWith('<span ' +
                        'class="input-group-addon btn btn-primary btn-remove btn-danger">' +
                        '<span ' +
                        'class="glyphicon glyphicon-minus">' +
                        '</span>' +
                        '</span>' +
                        '<span ' +
                        'class="input-group-addon btn btn-primary btn-add btn-success">' +
                        '<span class="glyphicon glyphicon-plus">' +
                        '</span>' +
                        '</span>'
                    );
            }).on('click', '.btn-remove', function (e) {
                if ($('.formContent').length == 1) {
                    $('.formContent:first').find(".btn-remove").remove();
                    return false;
                }
                e.preventDefault();
                $(this).parent().nextAll('.formContent').each(function () {
                    $(this).find('.incremeter').html($(this).find('.incremeter').html() - 1);
                });

                if ($(this).siblings('.btn-add').length) {
                    var myParent = $(this).parents(".formContent");
                    myParent.siblings(".formContent:last").find(".btn-remove")
                        .replaceWith('<span ' +
                            'class="input-group-addon btn btn-primary btn-remove btn-danger">' +
                            '<span ' +
                            'class="glyphicon glyphicon-minus">' +
                            '</span>' +
                            '</span>' +
                            '<span ' +
                            'class="input-group-addon btn btn-primary btn-add btn-success">' +
                            '<span ' +
                            'class="glyphicon glyphicon-plus">' +
                            '</span>' +
                            '</span>'
                        );
                }

                $(this).parents('.formContent').remove();

                return false;
            });

            $('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {
                if (this.checked) {
                    $('input[name="' + this.name + '"].checked').removeClass('checked');
                    $(this).addClass('checked');
                    $('.toggle-container').addClass('force-update').removeClass('force-update');
                }
            });

            $('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');

            $(".resultCnt").change(function (e) {
                e.preventDefault();
                var url = " {{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'limit': null,'page':1})) }}";
                url = url + '&limit=' + $(this).val();
                window.location.href = url.replace(/&amp;/g, '&');
            });

            {% if data.getPaginationData.numItemsPerPage is defined %}
                $('.resultCnt').val("{{ data.getPaginationData.numItemsPerPage }}");
            {% endif %}

            $("#sortby").change(function (e) {
                e.preventDefault();
                var uri = $(location).attr('href');
                var re = new RegExp("([?&])sortby=.*?(&|$)", "i");
                var separator = uri.indexOf('?') !== -1 ? "&" : "?";
                if (uri.match(re)) {
                    window.location.href = uri.replace(re, '$1' + "sortby=" + $(this).val() + '$2');
                } else {
                    window.location.href = uri + separator + "sortby=" + $(this).val();
                }
            });

            {% if data.getParams.sortby is defined %}
                $('#sortby').val("{{ data.getParams.sortby }}");
            {% endif %}

            $("body").on('change', '.searchType', function (event) {
                var id = $(this).attr('id').match(/\[(.*?)\]/)[1];
                var options = $("#filter\\[" + id + "\\]");
                options.find('option').remove();
                if ($(this).val() == 'all') {
                    $(this).parents('.formContent')
                        .find(".revert")
                        .replaceWith('<input ' +
                            'id="keywords[' + id + ']" ' +
                            'name="keywords[' + id + ']" ' +
                            'class="form-control" ' +
                            'required="required" ' +
                            'placeholder="Enter your search keywords">'
                        );
                } else if ($(this).val() == 'experts') {
                    var expertOptions = {
                        "First name contains": "First name contains",
                        "Last name contains": "Last name contains",
                        // #680 "Current/Previous addresses contain": "Current/Previous addresses contain",
                        "Phone/Fax contains": "Phone/Fax contains",
                        "Email contains": "Email contains",
                        "Website URL contains": "Website URL contains",
                        "Country is": "Worklocation (country) is",
                        "Current address contains" : "Worklocation address contains",
                        "In multiple countries": "Worklocation in one of these countries",
                        "Sea regions of study is": "Sea regions of study is",
                        "Member of group or sub-group": "Member of group or sub-group",
                        "Gender is": "Gender is",
                        "Job type is": "Job type is",
                        "Job title contains": "Job title contains",
                        "Department contains": "Department contains",
                        "Institution name contains": "Institution name contains",
                        "Subject Area is": "Subject Area is",
                        "Activities include": "Detailed Activities include",
                        "Working languages includes": "Working languages includes",
                        "Degree contains": "Degree contains",
                        "Is retired": "Is retired",
                        "Is deceased": "Is deceased",
                        "Is quality checked": "Is quality checked",
                        "Unique Identifier": "Unique Identifier is",
                        "Quality last checked": "Quality last checked",
                        "Updated": "Updated between (dates included)",
                        "Created": "Created between (dates included)"
                    };

                    {% if is_granted('ROLE_GLOBAL_EDITOR') %}
                        $.extend(expertOptions, {
                            "Is Active": "Is Active",
                            "Do Not Invite": "Do Not Invite",
                            "Comment contains": "Comment contains"
                        });
                    {% endif %}

                    //expertOptions = sortObject(expertOptions);
                    options.append("<option value='Name contains' selected>Name contains</option>");
                    $.each(expertOptions, function (index, val) {
                        options.append($("<option/>", {
                            value: index,
                            text: val
                        }));
                    });

                } else if ($(this).val() == 'institutions') {
                    options.find('option').remove();
                    var institutionOptions = {
                        "Current address contains": "Current address contains",
                        // #680"Current/Previous addresses contain": "Current/Previous addresses contain",
                        "Country is": "Country is",
                        "Sea regions of study is": "Sea regions of study is",
                        "Type is": "Type is",
                        "Activities contains": "Activities contains",
                        "Tel/Fax contains": "Tel/Fax contains",
                        "Website URL contains": "Website URL contains",
                        "EDMO Code is": "EDMO Code is",
                        "Updated": "Updated between (dates included)",
                        "Created": "Created between (dates included)",
                    };
                    institutionOptions = sortObject(institutionOptions);
                    options.append("<option value='Name contains' selected>Name contains</option>");
                    $.each(institutionOptions, function (index, val) {
                        options.append($("<option/>", {
                            value: index,
                            text: val
                        }));
                    });
                } else if ($(this).val() == 'events') {
                    options.find('option').remove();
                    var eventOptions = {
                        "Title contains": "Title contains",
                        "eType is": "Type is",
                        "Summary contains": "Summary contains",
                        "Keywords contain": "Keywords contain",
                        "Address contains": "Address contains",
                        "Country is": "Country is",
                        "Date between": "Date between",
                        "Updated": "Updated between (dates included)",
                        "Created": "Created between (dates included)"
                    };
                    sortObject(eventOptions);
                    $.each(eventOptions, function (index, val) {
                        options.append($("<option/>", {
                            value: index,
                            text: val
                        }));
                    });
                } else if ($(this).val() == 'documents') {
                    options.find('option').remove();
                    var documentOptions = {
                        "Title contains": "Title contains",
                        "Document type is": "Document Type is",
                        "Document code is": "Document code is",
                        "Summary contains": "Summary contains",
                        "Keywords contain": "Keywords contain",
                        "Updated": "Updated between (dates included)",
                        "Created": "Created between (dates included)"
                    };
                    sortObject(documentOptions);
                    $.each(documentOptions, function (index, val) {
                        options.append($("<option/>", {
                            value: index,
                            text: val
                        }));
                    });
                } else if ($(this).val() == 'jobs') {
                    options.find('option').remove();
                    var jobOptions = {
                        "Title contains": "Title contains",
                        "Type is": "Type is",
                        "Description contains": "Description contains",
                        "Country is": "Country is",
                        "Sea regions of study is": "Sea regions of study is"
                    };
                    $.each(jobOptions, function (index, val) {
                        options.append($("<option/>", {
                            value: index,
                            text: val
                        }));
                    });
                }
                $(this).parents(".formContent").find(".filters").change();
            });

            var filterData = {
                'Job type is': "{{ path('get_job_types') }}",
                'Sea regions of study is': "{{ path('get_sea_regions') }}",
                'Member of group or sub-group': "{{ path('get_member_groups') }}",
                'Country is': "{{ path('get_countries') }}",
                'Subject Area is': "{{ path('get_subject_area') }}",
                'Type is': "{{ path('get_institution_types') }}",
                'eType is': "{{ path('get_event_types') }}",
                'Document type is': "{{ path('get_document_types') }}",
            };

            var multipleOptions = {
                'In multiple countries': "{{ path('get_countries') }}",
            }

            var dateFilter = {
                'Updated': 'Updated between (dates included)',
                'Created': 'Created between (dates included)',
                'Date between': 'Date between',
                'Quality last checked': 'Quality last checked'

            }

            $(".filters").change(function(event) {

                var id = $(this).attr('id').match(/\[(.*?)\]/)[1];
                var oldOption = $("#revert\\[" + id + "\\]");
                if (oldOption.length == 1) {
                    oldOption.replaceWith('<input ' +
                        'id="keywords[' + id + ']" ' +
                        'name="keywords[' + id + ']" ' +
                        'class="form-control " ' +
                        'required="required" ' +
                        'placeholder="Enter your search keyword(s)">'
                    );
                }

                var options = $("#keywords\\[" + id + "\\]");

                if (($(this).val() in filterData)) {
                    options.replaceWith('<select ' +
                        'id="keywords[' + id + ']" ' +
                        'name="keywords[' + id + ']" ' +
                        'class="form-control  revert" ' +
                        'required="required">' +
                        '</select>'
                    );
                    var newOption = $("#keywords\\[" + id + "\\]");
                    if (($(this).val() == "Country is")
                        && (typeof countries !== 'undefined')
                    ) {
                        $.each(countries, function (index, val) {
                            newOption.append($("<option/>", {
                                value: val.id,
                                text: val.name
                            }));
                        });
                    } else if (($(this).val() == "Sea regions of study is")
                        && (typeof seaRegions !== 'undefined')
                    ) {
                        $.each(seaRegions, function (index, val) {
                            newOption.append($("<option/>", {
                                value: val.id,
                                text: val.name
                            }));
                        });
                    } else {
                        $.ajax({
                            url: filterData[$(this).val()],
                        })
                            .done(function (response) {
                                $.each(response, function (index, val) {
                                    newOption.append($("<option/>", {
                                        value: val.id,
                                        text: val.name
                                    }));
                                });
                            });
                    }
                } else if (($(this).val() in multipleOptions)) {
                    options.replaceWith('<select ' +
                        'id="keywords[' + id + ']" ' +
                        'name="keywords[' + id + '][]" ' +
                        'class="form-control revert select2" ' +
                        'required="required" ' +
                        'multiple>' +
                        '</select>'
                    );
                    var newOption = $("#keywords\\[" + id + "\\]");
                    if (($(this).val() === "In multiple countries")
                        && (typeof countries !== 'undefined')
                    ) {
                        $.each(countries, function (index, val) {
                            newOption.append($("<option/>", {
                                value: val.id,
                                text: val.name
                            }));
                        });
                    }

                    if (!$(".select2").hasClass("select2-hidden-accessible")) {
                        $(".select2").select2({width: null});
                    }
                } else if ($(this).val() === 'Is retired'
                    || $(this).val() === 'Is deceased'
                    || $(this).val() === "Is quality checked"
                    || $(this).val() == "Is Active"
                ) {
                    options.replaceWith('<select ' +
                        'id="keywords[' + id + ']" ' +
                        'name="keywords[' + id + ']" ' +
                        'class="form-control revert" ' +
                        'required="required">' +
                        '<option value="1">' +
                        'Yes' +
                        '</option>' +
                        '<option value="0">' +
                        'No' +
                        '</option>' +
                        '</select>'
                    );
                } else if ($(this).val() === 'Gender is') {
                    options.replaceWith('<select ' +
                        'id="keywords[' + id + ']" ' +
                        'name="keywords[' + id + ']" ' +
                        'class="form-control revert" ' +
                        'required="required">' +
                        '   <option value="male">Male</option>' +
                        '   <option value="female">Female</option>' +
                        '   <option value="na">Other</option>' +
                        '   <option value="">Prefer not to say</option>' +
                        '</select>');
                } else if ($(this).val() === 'Do Not Invite') {
                    options.replaceWith('<input id="keywords[' + id + ']" name="keywords[' + id + ']" class="form-control " readonly>');

                } else if ($(this).val() === 'Updated'
                    || $(this).val() === 'Created'
                    || $(this).val() === 'Quality last checked'
                    || $(this).val() == 'Date between'
                ) {
                    var oldOption = $("#revert\\[" + id + "\\]");
                    if (oldOption.length == 1) {
                        oldOption.replaceWith('<input id="keywords[' + id + ']" name="keywords[' + id + ']" class="form-control " required="required">');
                        options = $("#keywords\\[" + id + "\\]");
                    }
                    options.replaceWith(
                        '<span id="revert[' + id + ']">' +
                        '<span class="col-xs-6">' +
                        '<input type="text" name="startDate[' + id + ']" id="keywords[' + id + ']" class="form-control datepicker" value="" required="required" title="keywords" placeholder="From date">' +
                        '</span>' +
                        '<span class="col-xs-6">' +
                        '<input type="text" name="endDate[' + id + ']" id="keywords2[' + id + ']" class="form-control datepicker" value="" required="required" title="keywords" placeholder="To date">' +
                        '<input type="hidden" id="" name="keywords[' + id + ']" class="form-control " value="">' +
                        '</span>' +
                        '</span>'
                    );

                    $('.datepicker').datepicker({
                        format: "dd/mm/yyyy",
                        autoclose: true,
                        todayHighlight: true,
                        maxDate: '0'
                    });
                } else {
                    options.replaceWith('<input ' +
                        'id="keywords[' + id + ']" ' +
                        'name="keywords[' + id + ']" ' +
                        'class="form-control " ' +
                        'required="required" ' +
                        'placeholder="Enter your search keyword(s)">'
                    );
                }
            });

            /**
             * one of the filter for a category (left menu on search results) has been clicked
             */
            $('.icheck').change(function () {
                if ($(this).is(":checked")) {
                    if ($(this).val() == 'experts') {
                        var url = "{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'filterType': 'experts,' ~ app.request.get('filterType')})) }}";
                    }
                    if ($(this).val() == 'institutions') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': 'institutions,' ~ app.request.get('filterType')})) }}";
                    }
                    if ($(this).val() == 'events') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': 'events,' ~ app.request.get('filterType')})) }}";
                    }
                    if ($(this).val() == 'documents') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': 'documents,' ~ app.request.get('filterType')})) }}";
                    }
                    //get rid of that ugly trailing comma
                    url = url.replace(/,$/, "");
                } else {
                    if ($(this).val() == 'experts') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': app.request.get('filterType')|replace({ ('experts'): '' }) })) }}";
                    }
                    if ($(this).val() == 'institutions') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': app.request.get('filterType')|replace({ ('institutions'): '' }) })) }}";
                    }
                    if ($(this).val() == 'events') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': app.request.get('filterType')|replace({ ('events'): '' }) })) }}";
                    }
                    if ($(this).val() == 'documents') {
                        var url = "{{ path(app.request.attributes.get('_route'),app.request.query.all|merge({'filterType': app.request.get('filterType')|replace({ ('documents'): '' }) })) }}";
                    }
                }
                url = url.replace(/%2C\s*$/, "");
                window.location.href = url.replace(/&amp;/g, '&');

            });

            $(".hide-categories").click(function (event) {
                event.preventDefault();
                $(".categories").toggle("slow");

            });
            $(".hide-countries").click(function (event) {
                event.preventDefault();
                $(".countries").toggle("slow");

            });

            $(".filter-label").click(function (e) {
                e.preventDefault();
                var data = $(this).data();
                var url = " {{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'filterType': null,'page':1})) }}";
                window.location.href = url.replace(/&amp;/g, '&');
            });

            $(".countryfilter-label").click(function (e) {
                e.preventDefault();
                var data = $(this).data();
                var url = " {{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'filterCountry': null,'page':1})) }}";
                window.location.href = url.replace(/&amp;/g, '&');
            });

            {% if app.request.get('type')|length > 0 %}

            {% for key,field in searchConditions %}
            if (($("#filter\\[{{ key }}\\]").val() in multipleOptions)) {
                $("#type\\[{{ key }}\\]").change();
                $("#type\\[{{ key }}\\]").val("{{ field.type }}");
                $("#filter\\[{{ key }}\\]").val("{{ field.filter }}");

                setTimeout(function () {
                    $("#filter\\[{{ key }}\\]").change();
                    var selectedCountries = "{{ field.keywords|join(',') }}";
                    if (!$("#keywords\\[{{ key }}\\]").hasClass("select2-hidden-accessible")) {
                        $("#keywords\\[{{ key }}\\]").select({width: null});
                    }
                    $("#keywords\\[{{ key }}\\]").select2("val", selectedCountries.split(','));
                }, 2000);

            } else if (($("#filter\\[{{ key }}\\]").val() in filterData)) {
                $("#type\\[{{ key }}\\]").change();
                $("#type\\[{{ key }}\\]").val("{{ field.type }}");
                $("#filter\\[{{ key }}\\]").val("{{ field.filter }}");
                $("#filter\\[{{ key }}\\]").change();
                $(document).ajaxComplete(function () {
                    {% if field.keywords is not iterable %}
                    $("#keywords\\[{{ key }}\\]").val(decodeHtml("{{ field.keywords }}"));
                    {% endif %}
                });
            } else {
                $("#type\\[{{ key }}\\]").change();
                $("#filter\\[{{ key }}\\]").val("{{ field.filter }}");
                $("#filter\\[{{ key }}\\]").change();
                {% if field.keywords is not iterable %}
                $("#keywords\\[{{ key }}\\]").val(decodeHtml("{{ field.keywords }}"));
                {% endif %}
            }
            var options = $("#keywords\\[{{ key }}\\]");
            if (($("#filter\\[{{ key }}\\]").val() in dateFilter)) {

                var oldOption = $("#revert\\[{{ key }}\\]");
                if (oldOption.length == 1) {
                    oldOption.replaceWith('<input id="keywords[{{ key }}]" name="keywords[{{ key }}]" class="form-control ">');
                    options = $("#keywords\\[{{ key }}\\]");
                }
                options.replaceWith(
                    '<span id="revert[{{ key }}]">' +
                    '<span class="col-xs-6">' +
                    '<input type="text" name="startDate[{{ key }}]" id="keywords[{{ key }}]" class="form-control datepicker" value="{{ field.startDate }}" required="required" title="keywords" placeholder="From date">' +
                    '</span>' +
                    '<span class="col-xs-6">' +
                    '<input type="text" name="endDate[{{ key }}]" id="keywords2[{{ key }}]" class="form-control datepicker" value="{{ field.endDate }}" required="required" title="keywords" placeholder="To date">' +
                    '<input type="hidden" id="" name="keywords[{{ key }}]" class="form-control " value="">' +
                    '</span>' +
                    '</span>'
                );
                $('.datepicker').datepicker({
                    format: "dd/mm/yyyy",
                    autoclose: true,
                    todayHighlight: true,
                    maxDate: '0'
                });
            }
            {% endfor %}
            {% endif %}

        });

        $('.countries li:lt(20)').show();
        $('.showLess').hide();

        function loadMorefilters(className) {
            var size_li = $("." + className + " li").size();
            var x = 20;
            var remaining = size_li - 20;
            x = (x + remaining <= size_li) ? x + remaining : size_li;
            $('.' + className + ' li:lt(' + x + ')').show('slow');
            $('.' + className).find('.loadMore').hide();
            $('.' + className).find('.showLess').show();
        }

        function showLessfilters(className) {
            $('.' + className + ' li').not(':lt(20)').hide('slow');
            $('.' + className).find('.showLess').hide();
            $('.' + className).find('.loadMore').show();
        }

        jQuery.fn.extend({
            toggleText: function (a, b) {
                var isClicked = false;
                var that = this;
                this.click(function () {
                    if (isClicked) {
                        that.text(a);
                        isClicked = false;
                    } else {
                        that.text(b);
                        isClicked = true;
                    }
                });
                return this;
            }
        });
        $(".hide-categories").toggleText("hide", "show");
        $(".hide-countries").toggleText("hide", "show");

        function sortObject(o) {
            var sorted = {},
                key, a = [];

            for (key in o) {
                if (o.hasOwnProperty(key)) {
                    a.push(key);
                }
            }

            a.sort();

            for (key = 0; key < a.length; key++) {
                sorted[a[key]] = o[a[key]];
            }
            return sorted;
        }

        function decodeHtml(html) {
            var txt = document.createElement("textarea");
            txt.innerHTML = html;
            return txt.value;
        }

        Dropzone.options.myAwesomeDropzone = {
            init: function () {
                this.on('success', function (file, response) {
                    $("#message").after($('<input type="hidden" name="file[]" class="file" value="' + response + '">'));
                });

                this.on('queuecomplete', function () {
                    // Invoked when all files finished uploading
                    // Now just submit the form. It will send the filenames along since
                    // they are added as hidden input fields.
                });

                this.on('removedfile', function (file, response) {
                    $('.file:input[value="' + file.fid + '"]').remove();
                });
            },
            maxFilesize: 10,
            maxFiles: 15,
            autoDiscover: true,
            accept: function (file, done) {
                var thumbnail = $('.dropzone').find(".dz-preview:last");
                thumbnail.removeClass('dz-file-preview').addClass('dz-image-preview');
                switch (file.type) {
                    case 'application/pdf':
                        thumbnail.find('img').attr('src', '{{ asset("img/pdf-icon.png") }}');
                        break;
                    case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
                        thumbnail.find('img').attr('src', '{{ asset("img/word-icon.png") }}');
                        break;
                    case 'application/msword':
                        thumbnail.find('img').attr('src', '{{ asset("img/word-icon.png") }}');
                        break;
                    case 'application/vnd.ms-excel':
                        thumbnail.find('img').attr('src', '{{ asset("img/excel-icon.png") }}');
                        break;
                    case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
                        thumbnail.find('img').attr('src', '{{ asset("img/excel-icon.png") }}');
                        break;
                    case 'application/vnd.ms-powerpoint':
                        thumbnail.find('img').attr('src', '{{ asset("img/PowerPoint-icon.png") }}');
                        break;
                    case 'application/application/zip, application/octet-stream':
                        thumbnail.find('img').attr('src', '{{ asset("img/zip-icon.jpg") }}');
                        break;
                    case 'text/csv':
                        thumbnail.find('img').attr('src', '{{ asset("img/csv-icon.jpg") }}');
                        break;
                    case 'text/plain':
                        thumbnail.find('img').attr('src', '{{ asset("img/txt-icon.png") }}');
                        break;
                    case 'application/zip':
                        thumbnail.find('img').attr('src', '{{ asset("img/zip-icon.jpg") }}');
                        break;
                }

                done();
            },
        };

        $('[class=showInfo]').on('click', function () {
            $(document).find('[class=infoHidden]').hide();
            $(document).find('[class=infoShown]').show();
            return false;
        });

        $('[class=hideInfo]').on('click', function () {
            $(document).find('[class=infoHidden]').show();
            $(document).find('[class=infoShown]').hide();
            return false;
        });

        {% if is_granted('ROLE_GLOBAL_EDITOR') %}
        $("#sendmail").click(function () {
            $this = $(this);
            var subject = $("#subject").val();
            var message = tinyMCE.get('message').getContent();
            selfEmail = $("#selfEmail").is(":checked");
            var file = $('input:hidden.file').serialize();
            var error = false;
            if ($.trim(subject) == "") {
                $("#subject").parents('.form-group').addClass('has-error');
                errorsubject = true;
            } else {
                $("#subject").parents('.form-group').removeClass('has-error');
                errorsubject = false;
            }
            if ($.trim(message) == "") {
                $("#message").parents('.form-group').addClass('has-error');
                $("#message").siblings(".mce-tinymce").css('border-color', 'red');
                errormessage = true;
            } else {
                $("#message").parents('.form-group').removeClass('has-error');
                $("#message").siblings(".mce-tinymce").css('border-color', 'rgb(210, 214, 222)');
                errormessage = false;
            }
            if (!errormessage && !errorsubject) {
                $this.prop("disabled", true);
                $this.html("<i class='fa fa-spin fa-cog'></i> Sending</button>");
                $.ajax({
                    url: "{{ path('email_queue') }}",
                    data: {
                        userid: "{{ app.user.id }}",
                        emailUsers: "{{ emailUsers|join(', ') }}",
                        email: "{{ app.user.email }}",
                        selfmail: selfEmail,
                        subject: subject,
                        message: message,
                        file: file,
                        searchstring: window.location.href
                    },
                    type: "POST",
                    success: function (response) {
                        $this.html("Send <i class='fa fa-envelope-o'></i>");
                        $(".dz-default.dz-message").css("opacity", 1);
                        $("#selfEmail").prop("checked", false);
                        $("#subject").val("");
                        tinymce.get("message").setContent('');
                        $('div.dz-success').remove();
                        $("#message").siblings(".file").remove();
                        $this.prop("disabled", false);
                        $("#compose-mail").modal("hide");
                        BootstrapDialog.alert({
                            title: 'Email Received Successfully.',
                            message: 'Your email is successfully received. It will now be queued and sent out to the recipients shortly.',
                            type: BootstrapDialog.TYPE_SUCCESS,
                            closable: false,
                            draggable: false,
                            buttonLabel: 'OK',
                        });
                    }
                });
            }
        });

        {% endif %}

        function searchExampleFullscreen() {
            img = document.getElementById('searchExample')
            img.src = "/img/searchExample.png"
            img.style = "position:fixed;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);z-index:10;"
        }

        function searchExampleSmallscreen() {
            img = document.getElementById('searchExample')
            img.src = "/img/searchExample.png"
            img.style = "width:300px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"
        }
    </script>
{% endblock %}