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

{% block title %}
OceanExpert | {{ documentData.customParameters.title }}
{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('css/admin-style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.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.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/profile.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/zebra_tooltips.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/dataTables.bootstrap.css') }}">
{% endblock %}

{% block body %}
{% include('navbarlogin.html.twig') %}
<div class="wrapper">
    <div class="content-wrapper">
        {% block content %}
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                <h3 class="heading">{{ documentData.customParameters.title }}</h3>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <div class="top-padding10">
                    Displaying {{ documentData.getPaginationData.firstItemNumber }}
                    – {{ documentData.getPaginationData.lastItemNumber }} results of {{ documentData.getTotalItemCount }}.
                </div>
            </div>
            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                <div class="form-inline">
                    <label
                            for="maxItemPerPage">
                        Documents per page:
                    </label>
                    <select id="maxItemPerPage" class="form-control ">
                        {% for key, limit in documentData.customParameters.limits %}
                            {% if documentData.params.limit is defined and key == documentData.params.limit %}
                                <option id="{{ key }}" selected>{{ limit }}</option>
                            {% else %}
                                <option id="{{ key }}">{{ limit }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <form method="get">
                    <div class="form-inline">
                        <label
                                for="search"
                                class="col-sm-6 control-label label-search">
                            Search document title:
                        </label>
                        <div class="col-sm-6 float-right">
                            <input
                                    type="text"
                                    class="form-control"
                                    id="search"
                                    placeholder="Search"
                                    name="search"
                                    value="{{  app.request.get('search') }}" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="clearfix"></div>
            <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
                <p>
                    Below you can see the list of all documents that are stored in OceanExpert.
                </p>
                <p>
                    To find the document(s) you are looking for you have these options:
                </p>
                <ul>
                    <li>
                        You can browse through the list (sort the documents by clicking on ID, Title or Date in the table header or footer).
                    </li>
                    <li>
                        Use one of the <a
                                href="{{ path('view_all_doclists') }}"
                                target="_blank">
                            Document Lists
                        </a> of IOC documents for a particular IOC programme (e.g. <a
                                href="{{ path('view_doclist', {'idDoclist':6}) }}"
                                target="_blank">
                            IODE Session reports
                        </a>).
                    </li>
                    <li>
                        The search box at the top right of this page gives you the possibility to search for documents
                        that contain a certain word in their title.<br />
                        Note that this is a very simple search and you need to enter complete words that appear as such in the title<br />
                        (e.g. <em>'national contact manual'</em> will work, <em>'national manual'</em> will not work for a document
                        with the title <em>'IOC National Contact Manual (National Focal Points contact list)'</em> ).
                    </li>
                    <li>
                        For more advanced search queries, you can use the <a
                                href="https://oceanexpert.org/advancedSearch"
                                target="_blank">
                            Search page
                        </a> that enables you to do a more elaborated search for availlable documents
                        (e.g. using boolean operators "AND" or "OR").
                    </li>
                </ul>
            </div>
            <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
                <div class="box-body">
                    <table
                            id="allDocument"
                            class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>{{ knp_pagination_sortable(documentData, 'ID', 'd.idDoc') }}</th>
                                <th>{{ knp_pagination_sortable(documentData, 'Title', 'd.title') }}</th>
                                <th>{{ knp_pagination_sortable(documentData, 'Date', 'd.createdAt') }}</th>
                                <th>Doclist(s)</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for document in documentData.items %}
                            <tr>
                                <td>
                                    <a
                                            href="{{ path('view_document', {'idDoc': document.idDoc}) }}"
                                            target="_blank">
                                        {{ document.idDoc }}
                                    </a>
                                </td>
                                <td>
                                    <a
                                            href="{{ path('view_document', {'idDoc': document.idDoc}) }}"
                                            target="_blank">
                                        {{ document.title }}
                                    </a>
                                </td>
                                <td>
                                    {{ document.createdAt|date("d/m/Y") }}
                                </td>
                                <td>
                                    {# if document.idDoc and doclistDocuments[document.idDoc] and doclistDocuments[document.idDoc][0] and doclistDocuments[document.idDoc][0]['idDoclist'] #}
                                    {% if document.idDoc and doclistDocuments[document.idDoc] is defined %}
                                        {% for doclist in doclistDocuments[document.idDoc] %}
                                            {% if doclists[doclist['idDoclist']] is defined %}
                                                <a
                                                        href="{{ path('view_doclist', {'idDoclist': doclist['idDoclist']}) }}"
                                                        target="_blank">
                                                    {{ doclists[doclist['idDoclist']] }}
                                                </a>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                        <tfoot>
                        <tr>
                            <th>{{ knp_pagination_sortable(documentData, 'ID', 'd.idDoc') }}</th>
                            <th>{{ knp_pagination_sortable(documentData, 'Title', 'd.title') }}</th>
                            <th>{{ knp_pagination_sortable(documentData, 'Date', 'd.createdAt') }}</th>
                            <th>Doclist(s)</th>
                        </tr>
                        </tfoot>
                    </table>
                    <div class="col-md-6 pull-right">
                        <div class="navigation pagination-sm pull-right">
                            {{ knp_pagination_render(documentData) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        {% endblock %}
    </div>
</div>

    {% include "footer.html.twig" %}
    <script src="{{ asset('js/app.min.js') }}"></script>
    <script src="{{asset('js/icheck.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/validator.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery-ui.js')}}" type="text/javascript"></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/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script type="text/javascript" >

        function updateQueryStringParameter(uri, key, value) {
            var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
            var separator = uri.indexOf('?') !== -1 ? "&" : "?";
            if (uri.match(re)) {
                return uri.replace(re, '$1' + key + "=" + value + '$2');
            } else {
                return uri + separator + key + "=" + value;
            }
        }

        $('#maxItemPerPage').change(function(){
            var item = $('#maxItemPerPage').find(":selected").text();
            var uri = window.location.href;
            window.location.href = updateQueryStringParameter(uri, "limit", item );
        });

        /**
         * perform the requested action in the admin section for the given user id
         * reload the page after this action
         *
         * @param action requested action (approveUsers, disApproveUsers, deleteUser, hardDeleteUser)
         * @param idDoc id of the users on which to perform the action
         */
        function userAction(action, idDoc)
        {
            var ajaxUrlStart = '/admin/';
            var ajaxUrl = ajaxUrlStart.concat(action);
            $.ajax({
                type: "POST",
                url: ajaxUrl,
                data: JSON.stringify({id:idDoc}),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false, //_async,
                success: function (result) {
                    window.location.reload(true);
                }
            });
        }
    </script>
{% endblock %}