{% set my_video_controller = 'App\\Controller\\Modules\\Video\\MyVideoController' %}
{% set imageHandler        = 'App\\Services\\Files\\ImageHandler' %}
{% set FileTagger          = 'App\\Services\\Files\\FileTagger' %}
{% set dialogs_action      = 'App\\Action\\Core\\DialogsAction' %}
{% set modules_controller  = 'App\\Controller\\Modules\\ModulesController' %}

{% set KEY_FILE_FULL_PATH   = constant(my_video_controller~"::KEY_FILE_FULL_PATH") %}
{% set KEY_FILE_NAME        = constant(my_video_controller~"::KEY_FILE_NAME") %}
{% set KEY_TAGS             = constant(FileTagger~"::KEY_TAGS") %}

{% set KEY_FILE_CURRENT_PATH = constant(dialogs_action~"::KEY_FILE_CURRENT_PATH") %}
{% set KEY_MODULE_NAME       = constant(dialogs_action~"::KEY_MODULE_NAME") %}
{% set KEY_MODULE_NAME       = constant(dialogs_action~"::KEY_MODULE_NAME") %}
{% set KEY_IS_UPDATE_ACTION  = constant(dialogs_action~"::KEY_IS_UPDATE_ACTION") %}
{% set MODULE_NAME_VIDEO     = constant(modules_controller~"::MODULE_NAME_VIDEO") %}

{% if ajax_render == false %}
    {% set template= "base.html.twig" %}
{% else %}
    {% set template= "blank.html.twig" %}
{% endif %}

    {% extends template %}

{% block body %}

    <main class='main-content bgc-grey-100' id="myVideoModuleMainWrapper">

        {% if not is_main_dir %}
            <div class="masonry-item col-md-12 mB-10 my-video-module-masonry-not-main-dir">
                <div class="bgc-white p-10 bd">
                    <span>
                        {% include 'page-elements/components/widgets/remove-folder.twig' with {
                            'folder_path'           : subdirectory_path,
                            'upload_module_dir'     : upload_module_dir,
                            'files_count_in_tree'   : files_count_in_tree,
                            'popoverContent'        : "video.popover.removeFolder"|trans
                        } %}
                    </span>
                </div>
            </div>
        {% endif %}

        <div id='mainContent'>

            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12">
                        <div class="bgc-white bd bdrs-3 p-20 mB-20 d-flex flex-column">
                            <h4 class="c-grey-900 mB-20 align-self-center">{{ 'video.labels.headers.main' | trans }}</h4>
                            {% include "page-elements/components/editable-module-content.twig" with {
                                id                : (module_data is not null ? module_data.getId() : null),
                                record_type       : constant('App\\Entity\\Modules\\ModuleData::RECORD_TYPE_DIRECTORY'),
                                module            : constant('App\\Controller\\Modules\\ModulesController::MODULE_NAME_VIDEO'),
                                record_identifier : upload_path,
                                description       : (module_data is not null ? module_data.getDescription() : "")
                            }%}
                            <div class="my-video-module-topbar-wrapper">

                                {# Topbar #}
                                <div class="row">
                                    {# Tags #}
                                    <div class="row col-8">
                                        <div class="col-12@sm tags-group-wrap">
                                            <div class="tags-group">
                                                <p class="tags-label">{{ 'video.labels.tags' | trans }}</p>
                                                <div class="btn-group shuffler-tags-options d-flex flex-wrap">
                                                    {# Buttons here will be generated via JS #}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {# Search #}
                                    <div class="row col-4 flex-row-reverse">
                                        <div class="row flex-row-reverse">
                                            <div class="">
                                                <div class="form-group">
                                                    <label for="filters-search-input" class="filter-label">{{ 'video.labels.search' | trans }}</label>
                                                    <input
                                                            class="textfield filter__search js-shuffle-search form-control"
                                                            type="search"
                                                            id="filters-search-input"
                                                            placeholder="Search by title" >
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                {#
                                    the leading "/" in twig tpl must be added
                                    because to display video from upload dir it needs to have "/"
                                #}
                                <div class="row my-shuffle-container" id="aniimated-thumbnials">
                                    {% for video in all_video %}

                                        {% set tags = ( "" == video[KEY_TAGS] ? "[]" : video[KEY_TAGS] ) %}
                                        {% set tags_list = jsonDecode(tags) | join(', ') %}

                                        <div class="col-4@sm grid-item"              {# shuffle attr #}
                                             data-groups="{{ tags }}"                {# shuffle attr #}
                                             data-date-created="2016-08-12"          {# shuffle attr #}
                                             data-title="{{ video[KEY_FILE_NAME] }}" {# shuffle attr #}
                                            >

                                            <div class="video-wrapper">
                                                <video
                                                        id="video_{{ loop.index0 }}"
                                                        class="video-js"
                                                        controls
                                                        preload="auto"
                                                        width="440"
                                                        height="184"
                                                        data-toggle-popover="true"                     {# popover attr #}
                                                        data-content="                                 {# popover attr #}
                                                         <p style='display: flex;'>
                                                         <span>
                                                            {{ video[KEY_FILE_NAME] }}
                                                         </span>
                                                         <hr/>
                                                            <span>
                                                                <b>Tags:&nbsp;</b>
                                                            </span>
                                                                <span style='word-break: break-all;'>{{ tags_list }}</span>
                                                        </p>
                                                     "
                                                >
                                                    <source src="/{{ video[KEY_FILE_FULL_PATH] }}"/>
                                                </video>

                                                <div class="d-flex justify-content-between">
                                                    <div class="issue-card-actions-left">
                                                        <span>
                                                            {% include 'page-elements/components/forms/input-rounded-checkbox.twig' with {
                                                                "wrapperStyles"         : "padding: 5px;",
                                                                "labelStyle"            : "left: 13px;",
                                                                "classes"               : "pointer",
                                                                "inputDataValue"        : video[KEY_FILE_FULL_PATH],
                                                                "additionalAttributes"  : "
                                                                    data-is-mass-action-checkbox
                                                                    data-value=\'" ~ video[KEY_FILE_FULL_PATH] ~ "\'
                                                                "
                                                            }%}
                                                        </span>
                                                    </div>

                                                    <div class="issue-card-actions-center">
                                                        <p class="text-center">
                                                            {{ substring(video[KEY_FILE_NAME])  }}
                                                        </p>
                                                    </div>

                                                    <div class="issue-card-actions-right">
                                                        <span
                                                                data-entity-detials-action="true"
                                                                data-dialog-call-request-url="{{ path('dialog_body_tags_update') }}"
                                                                data-dialog-call-request-method="POST"
                                                                data-dialog-call-request-post-parameters='{
                                                                    "{{ KEY_FILE_CURRENT_PATH }}" : "{{ video[KEY_FILE_FULL_PATH] }}",
                                                                    "{{ KEY_MODULE_NAME }}"       : "{{ MODULE_NAME_VIDEO }}",
                                                                    "{{ KEY_IS_UPDATE_ACTION }}"  : true
                                                                }'
                                                                data-call-dialog-on-click="true"
                                                                data-dialog-name="tagsUpdate"

                                                                data-toggle-popover="true"                             {# popover attr #}
                                                                data-content="{{ 'video.popover.editTags' | trans }}"> {# popover attr #}
                                                            <i class="fas fa-tags fa-lg pointer mT-3"></i>
                                                        </span>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="widgets-wrapper">

                {% include 'page-elements/components/widgets/plus-icon.twig' with {
                    'widgetName'     : "my-files-upload-widget",
                    'id'             : "my-files-upload-widget",
                    'popoverContent' : "video.popover.addFiles"|trans
                } %}

                {% include 'page-elements/components/widgets/new-folder-icon.twig' with {
                    'widgetName'     : "new-folder-widget",
                    'id'             : "my-video-new-folder-widget",
                    'style'          : "margin-top: 10px; background-color: #0062cc; opacity: .5;",
                    'popoverContent' : "video.popover.addFolder"|trans
                } %}

                {% include 'page-elements/components/upload-modules/settings.twig' with {
                    reloaded_menu_node         : constant("App\\Action\\System\\AppAction::MENU_NODE_MODULE_NAME_MY_VIDEO"),
                    popover_translation_string : "files.popover.settings"
                } %}

                <div class="widget action pointer mass-action disabled"
                     data-entity-detials-action="true"                                       {# dialog attr #}
                     data-dialog-call-request-url="{{ path('dialog_body_files_removal') }}"  {# dialog attr #}
                     data-dialog-call-request-method="POST"                                  {# dialog attr #}
                     data-dialog-call-request-post-parameters=''                             {# dialog attr #}
                     data-call-dialog-on-click="true"                                        {# dialog attr #}
                     data-dialog-name="massActionFilesRemoval"                               {# dialog attr #}
                     data-toggle-popover="true"                                              {# popover attr #}
                     data-content="{{ 'massActions.removeFiles.label' | trans }}"            {# popover attr #}
                >
                    <div class="fontawesome-centered">
                        <i class="far fa-trash-alt"></i>
                    </div>
                </div>

                <div class="widget action pointer mass-action disabled"
                     data-entity-detials-action="true"                                       {# dialog attr #}
                     data-dialog-call-request-url="{{ path('dialog_body_data_transfer') }}" {# dialog attr #}
                     data-dialog-call-request-method="POST"                                  {# dialog attr #}
                     data-dialog-call-request-post-parameters=''                             {# dialog attr #}
                     data-call-dialog-on-click="true"                                        {# dialog attr #}
                     data-dialog-name="massActionDataTransferVideoModule"                    {# dialog attr #}
                     data-toggle-popover="true"                                              {# popover attr #}
                     data-content="{{ 'massActions.transferFiles.label' | trans }}"          {# popover attr #}
                >
                    <div class="fontawesome-centered ">
                        <i class="fa fa-random"></i>
                    </div>
                </div>

            </div>

        </div>
    </main>

{% endblock body %}