{% extends '@syndexAcademic/main_layout.html.twig' %}

{% trans_default_domain "Academia" %}

{% block metaKeywords %}
    {{ 'universities.keywords'|trans }}
{% endblock %}
{% block metaDescription %}{{ 'universities.index.description'|trans({}, 'Academia') }}{% endblock %}
{% block og_title %}{{ 'universities.main-title'|trans({}, 'Academia') }}{% endblock %}
{% block og_description %}{{ 'universities.index.description'|trans({}, 'Academia') }}{% endblock %}
{% block og_image_width %}300{% endblock %}
{% block og_image_height %}300{% endblock %}
{% block og_url %}{{ app.request.scheme ~'://' ~ app.request.httpHost ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}{% endblock %}

{% block title %}
    {{ 'universities.main-title'|trans({}, 'Academia') }} {{ (selectedCountry)? 'in'|trans ~ " " ~ ((app.request.locale == 'en')? selectedCountry.englishName:selectedCountry.arabicName) }}
{% endblock %}

{% block body %}
    {{ parent() }}
    <section id="academia-section" class="academia-section">
        <div class="container">
            <label for="coutry_list">
                {{ 'universities.filter.country'|trans }}
            </label>
            <select id="coutry_list">
                <option value="0"> {{ 'all'|trans }} </option>
                {% for country in countries %}
                    <option value="{{ country.englishName }}" {% if selectedCountry and selectedCountry.id == country.id %} selected {% endif %}>{{ (app.request.locale == 'ar')? country.arabicName:country.englishName }} {{ country.cnt }}</option>
                {% endfor %}
            </select>
            {% if selectedCountry %}
                <div class="metadata-item">
                    {{ 'universities.from'|trans }} {{   (app.request.locale == 'en')? selectedCountry.englishName:selectedCountry.arabicName }}
                </div>
            {% endif %}
            <!-- Nav tabs -->
            <div class="tab-content academic-tabs">

                <div  role="tabpanel" class="tab-pane active universities-home-page" id="scholar-tab">
                    <div class="row">
                        <div id="scholar_result">
                            <div id="ajaxRequestContent">
                                {% include '@syndexAcademic/UniversityIndex/search.html.twig' with {'results':results , 'maxRank':maxRank} %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    <script defer>
        var el = document.getElementById('coutry_list');
        $('#coutry_list').select2({
            placeholder: "اختر بلدك",
            width:'100'
        });
        $('#coutry_list').on('change', function (e) {
            if(el.value == 0)
                window.location = '{{ path('syndex_universities_search') }}';
            else{
                var path = '{{ path('syndex_universities_filter', {"country": "country"}) }}'
                path = path.replace("country" , el.value)
                window.location = path;
            }
        });
    </script>
{% endblock %}