{% set layout = "ClarolineCoreBundle:Workspace:layout.html.twig" %}

{% if isDesktop() %}
    {% set layout = "ClarolineCoreBundle:Desktop:layout.html.twig" %}
{% endif %}

{% extends layout %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/ujmexo/css/tableLayout.css') }}" type="text/css" rel="stylesheet"/>
{% endblock %}

{% block title %} {{ 'docManage' | trans }} {% endblock %}

{% block section_content %}

    <div class="panel-heading">
        <h3 class="panel-title">{{ 'docManage' | trans }}</h3>
    </div>

    <div class="panel-body">
        <a href="{{ path('ujm_question_index') }}" class="btn btn-primary">
            <i class="fa fa-arrow-left"></i> {{ 'back' | trans }}
        </a>
        
        <br/>
        
        <div id="searchDocuments" class="input-group" style="width: 350px; margin-top: 20px;">
            <input type="text" class="form-control" id="labelToFind" placeholder="{{ 'search'|trans({}, 'platform') }}"
                onkeydown="if (event.keyCode == 13) { searchDoc('{{ path('ujm_question_searchDocuments') }}', 1);return false; }">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="searchDocbutton"
                    onClick="searchDoc('{{ path('ujm_question_searchDocuments') }}', 1);">
            <i class="fa fa-search"></i></button>
            </span>
        </div>
        
        <hr/>
        
        <div id="sorting">
            {% if divResultSearch is defined %}
                {{ 'result' | trans }} :
                {{ divResultSearch | raw }}
            {% else %}

                {% if listDoc is not empty %}
                    <table class="table table-striped table-bordered table-condensed" id="table">
                        <thead>
                            <tr style="background-color: lightsteelblue;">
                                <th class="classic" onclick="SortQuestions('kind', 'table');"
                                    onmouseover="this.style.color = '#0099FF'; body.style.cursor = 'pointer';"
                                    onmouseout="this.style.color = 'black'; body.style.cursor = 'default';">
                                    <i class="fa fa-chevron-up" id="upT" style="display: none;"></i>
                                    <i class="fa fa-chevron-down" id="downT" style="display: none;"></i>
                                    {{ 'type' | trans }}
                                </th>
                                <th class="classic">{{ "preview" | trans }}</th>
                                <th class="classic" onclick="SortQuestions('Label', 'table');"
                                    onmouseover="this.style.color = '#0099FF'; body.style.cursor = 'pointer';"
                                    onmouseout="this.style.color = 'black'; body.style.cursor = 'default';">
                                    <i class="fa fa-chevron-up" id="upL" style="display: none;"></i>
                                    <i class="fa fa-chevron-down" id="downL" style="display: none;"></i>
                                    {{ 'label' | trans }}
                                </th>
                                <th class="classic">{{ 'actions' | trans }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% set i = 0 %}
                            {% for myDoc in listDoc %}
                                <tr>
                                    <td class="classic">
                                        {% if myDoc.type == ".png" or myDoc.type == ".jpeg"
                                            or myDoc.type == ".jpg" or myDoc.type == ".gif" or myDoc.type == ".bmp" %}
                                            <i class="fa fa-picture-o"></i>
                                        {% elseif myDoc.type == ".mp3" or myDoc.type == ".wav" %}
                                            <i class="fa fa-music"></i>
                                        {% elseif myDoc.type == ".avi" or myDoc.type == ".mpeg"
                                            or myDoc.type == ".wmv" or myDoc.type == ".flv" or myDoc.type == ".mov" %}
                                            <i class="fa fa-film"></i>
                                        {% else %}
                                            <i class="fa fa-file"></i>
                                        {% endif %}
                                    </td>

                                     <td class="classic">
                                         {% if myDoc.type == ".png" or myDoc.type == ".jpeg"
                                            or myDoc.type == ".jpg" or myDoc.type == ".gif" or myDoc.type == ".bmp" %}
                                            <img src="{{ asset(myDoc.url) }}" width="100px" height="100px"/>
                                        {% elseif myDoc.type == ".mp3" or myDoc.type == ".wav" %}
                                            <a class="btn btn-default" data-toggle="tooltip" title="{{ 'play' | trans }}"
                                               href="{{ asset(myDoc.url) }}" onclick="window.open(this.href, 'ListenSong',
                                                'height=200, width=300, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=no, status=no');
                                                return false;">
                                                <i class="fa fa-play"></i>
                                            </a>
                                        {% elseif myDoc.type == ".avi" or myDoc.type == ".mpeg"
                                            or myDoc.type == ".wmv" or myDoc.type == ".flv" or myDoc.type == ".mov" %}
                                            <a class="btn btn-default" data-toggle="tooltip" title="{{ 'play' | trans }}"
                                               href="{{ asset(myDoc.url) }}">
                                                <i class="fa fa-play"></i>
                                            </a>
                                        {% else %}
                                            <a class="btn btn-default" data-toggle="tooltip" title="{{ 'download' | trans }}"
                                               href="{{ asset(myDoc.url) }}">
                                                <i class="fa fa-download"></i>
                                            </a>
                                        {% endif %}
                                    </td>

                                    <td class="classic" id="docLabel{{ i }}">
                                        {{ myDoc.label }}
                                    </td>

                                    <td class="classic">
                                        <a class="btn btn-default" data-toggle="tooltip" title="{{ 'edit' | trans }}"
                                            onclick="ChangeName('{{ path('ujm_document_change_name') }}', '{{ i }}');">
                                            <i class="fa fa-pencil"></i>
                                        </a>

                                        {% if allowToDel[myDoc.id] %}
                                        <a class="btn btn-default" data-toggle="tooltip" title="{{ 'delete' | trans }}"
                                           id="delete_document"
                                           href="{{ path('ujm_document_del', { 'idDoc': myDoc.id }) }}"
                                           >
                                            <i class="fa fa-trash-o"></i>
                                        </a>
                                        {% endif %}
                                        
                                    </td>
                                </tr>
                                {% set i = i + 1 %}
                            {% endfor %}
                        </tbody>
                    </table>

                    <div>
                        {% if pagerDoc.haveToPaginate %}
                            <div class="text-center panel-footer">
                                {{ pagerfanta(pagerDoc, 'twitter_bootstrap_translated',
                                    {'routeName': 'ujm_question_manage_doc'}) }}
                            </div>
                        {% endif %}
                    </div>
                {% else %}
                    <div class="alert alert-info">{{ 'noDocFound'|trans }} ...</div>
                {% endif %}
            {% endif %}
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('bundles/ujmexo/js/addImage.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/ujmexo/js/manageDoc.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/ujmexo/js/sortAndSearch.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/ujmexo/js/ext/malsup.js') }}"></script>
    {% include "UJMExoBundle:Partial:modal/confirmDelDoc.html.twig" %}
{% endblock %}