{% 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/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/social-buttons.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/search.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/google-fonts.css') }}">
{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="container" name="expert">
        <div class="well well-sm">
               <div class="lead">Search Results: Found  {{ pagination.getTotalItemCount + institutions.getTotalItemCount}} matches for "{{qry}}" </div>
        </div>
        <h3>People ({{ pagination.getTotalItemCount }})</h3>
        <div id="products" class="row list-group">
            {% for item in experts %}
                <div class="item  col-xs-4 col-lg-3 list-group-item">
                        <div class="row">
                            <div class="caption">
                                <h4 class="group inner list-group-item-heading"><a href="{{ path('view_profile', {'user': item.0.idInd}) }}" class="profile-url">{{item.0.fname}} {{item.0.sname}}</a></h4>
                                <div class="col-md-4 col-lg-4">
                                    <strong>{{item.0.jobtitle}}</strong>
                                    <p class="group inner list-group-item-text">
                                       {% if item.instName %}
                                            <strong>Institute:</strong> {{item.instName}}
                                        {% endif %}
                                    </p>
                                </div>
                                <div class="col-lg-6">
                                    {% if item.0.activeng is defined and item.0.activeng != ""%}
                                    <strong>Activities:</strong><br />
                                    {{item.0.activeng|truncate(100)|raw}}
                                {% endif %}
                                </div>
                                <div class="col-lg-2">
                                    {% if item.country is defined and item.country != ""%}
                                    <strong>Country:</strong><br />
                                    {{item.country}}
                                {% endif %}
                                </div>
                            </div>

                        </div>
                <hr />
                </div>
            {% endfor %}
        </div>
    </div>
<div class="navigation">
    {{ knp_pagination_render(pagination) }}
</div>


{# Institute #}
    <div class="container" name="institution">
        <h3>Institute ({{ institutions.getTotalItemCount }})</h3>
        <div id="products" class="row list-group">
            {% for item in institutions %}
            <div class="item  col-xs-4 col-lg-3 list-group-item">
                    <div class="caption">
                        <h4 class="group inner list-group-item-heading"><a href="{{ path('view_institution', {'instId': item.id_inst}) }}" class="profile-url">{{item.inst_name}}</a> {% if item.acronym != "" %}({{item.acronym}}){% endif %}</h4>
                        <strong>{{item.inst_address|nl2br}}</strong>
                        <p class="group inner list-group-item-text">

                        </p>
                        <p></p>
                        <div class="row">

                        </div>
                    </div>
                <hr />
            </div>
            {% endfor %}
        </div>
    </div>
<div class="navigation">
    {{ knp_pagination_render(institutions) }}
</div>




{# Events #}
   {#  <div class="container">
        <h3>Events ({{ events.getTotalItemCount }})</h3>
        <div id="products" class="row list-group">
            {% for item in events %}
            <div class="item  col-xs-4 col-lg-3 list-group-item">
                <div class="thumbnail">
                   {% if item.0.idImagefile !=0 %}
                        <img class="group list-group-image" src="http://www.iode.org/components/com_oe/oe.php?option=com_oe&task=download&id={{item.0.idImagefile}}&version=1.0&lang=7&format=9" alt="" />
                    {% else %}
                        <img class="group list-group-image" src="{{ asset('assets/uploads/photo.png')}}" alt="" />
                    {% endif %}
                    <div class="caption">
                        <h4 class="group inner list-group-item-heading"><a href="" class="profile-url">{{item.title}}</a></h4>
                        <strong></strong>
                        <p class="group inner list-group-item-text">
                               {{item.shorttitle|raw|nl2br|truncate(100)}}
                        </p>
                        <p>{{item.summary|nl2br|truncate(100)|raw}}</p>
                        <div class="row">

                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
<div class="navigation">
    {{ knp_pagination_render(events) }}
</div>
 #}


{# Jobs
    <div class="container ">
        <h3>Jobs (0)</h3>
        <div id="products" class="row list-group">
            {% for item in items %}
            <div class="item  col-xs-4 col-lg-3 list-group-item">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 class="group inner list-group-item-heading"><a href="{{ path('view_profile', {'user': item.0.idInd}) }}" class="profile-url">{{item.0.fname}} {{item.0.sname}}</a></h4>
                        <strong>{{item.role}}</strong>
                        <p class="group inner list-group-item-text">
                           {% if item.instName %}
                                <strong>Institute:</strong> {{item.instName}}
                            {% endif %}
                        </p>
                        <p>{{item.0.activeng|truncate(100)}}</p>
                        <div class="row">

                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
<div class="navigation">
    {{ knp_pagination_render(pagination) }}
</div> #}
    {% include('footer.html.twig') %}
    <script src="{{asset('js/oejs.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        window.alert = function () {};
        var defaultCSS = document.getElementById('bootstrap-css');
        function changeCSS(css) {
            if (css)
                $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="' + css + '" type="text/css" />');
            else
                $('head > link').filter(':first').replaceWith(defaultCSS);
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#list').click(function (event) {
                event.preventDefault();
                $('#products .item').addClass('list-group-item');
            });
            $('#grid').click(function (event) {
                event.preventDefault();
                $('#products .item').removeClass('list-group-item');
                $('#products .item').addClass('grid-group-item');
            });
        });
    </script>


{% endblock %}