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

{% block title %}
    {{ 'library.title'|trans({},'Academia') }}
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/libraryStyle.css') }}"/>
{% endblock %}
{% block body %}
    {{ parent() }}
    <div class="container containerMargin">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-xs-12 col-md-10">
                <div class="row">
                    <div class=" col-sm-3 col-md-3"></div>
                    <div class="col-xs-12 col-sm-6 col-md-6">
                        <div class=" tabs">
                            <ul class="nav library-tabs">
                                <li class="active"><a data-toggle="tab" href="#myReseaches">{{  'library.myResearches'|trans({},'Academia') }}</a></li>
                                <li><a data-toggle="tab" href="#myFavorites">{{  'library.myFavorites'|trans({},'Academia') }}</a></li>
                                <li><a data-toggle="tab" href="#myFollowing">{{ 'library.myFollowings'|trans({},'Academia') }}</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div id="remove_result" class="alert " hidden>
                    </div>
                    <div class="tab-content">
                        <div id="myReseaches" class="tab-pane fade in active">
                            {% include('@syndexAcademic/library/researches.html.twig') %}
                        </div>
                        <div id="myFavorites" class="tab-pane fade ">
                            {% include('@syndexAcademic/library/favorite.html.twig') %}
                        </div>
                        <div id="myFollowing" class="tab-pane fade ">
                            {% include('@syndexAcademic/library/follow.html.twig') %}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div id="confirmModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header customModalTitle">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title ">{{ 'userProfile.confirmModal.label'|trans({},'Academia') }}</h4>
                </div>
                <div class="modal-body">
                    <p>{{ 'userProfile.confirmModal.message'|trans({},'Academia') }}</p>
                    <input type="hidden" id="deletionSlug">
                    <input type="hidden" id="deletionType">
                </div>
                <div class="modal-footer">
                    <a id="confirmButton" class="btn backButton" data-dismiss="modal">{{ 'userProfile.confirmModal.confirm'|trans({},'Academia') }}</a>
                    <a href="#" class="btn closeButton" data-dismiss="modal">{{ 'userProfile.confirmModal.dismiss'|trans({},'Academia') }}</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('bundles/syndexacademic/js/library.js') }}"></script>
{% endblock %}