{% set my_files_controller = 'App\\Controller\\Modules\\Files\\MyFilesController' %}
{% set KEY_FILE_NAME          = constant(my_files_controller~"::KEY_FILE_NAME") %}
{% set KEY_FILE_SIZE          = constant(my_files_controller~"::KEY_FILE_SIZE") %}
{% set KEY_FILE_EXTENSION     = constant(my_files_controller~"::KEY_FILE_EXTENSION") %}
{% set KEY_FILE_FULL_PATH     = constant(my_files_controller~"::KEY_FILE_FULL_PATH") %}
{% set KEY_FILE_MODIFIED_DATE = constant(my_files_controller~"::KEY_FILE_MODIFIED_DATE") %}
{% set bytes_in_mb            = 1048576 %}

{% set file_tagger_service = 'App\\Services\\Files\\FileTagger' %}
{% set KEY_TAGS            = constant(file_tagger_service~"::KEY_TAGS") %}

<table id="MyFilesListTable" class="table table-striped table-bordered" cellspacing="0" data-table="true" data-table-checkboxes="true" width="100%">
    <thead>
    <tr>
        <td class="table-head-checkbox-cell"></td>   {# checkbox #}
        <td class="table-head-icon-cell"></td>    {# Icon#}
        <td class="d-none"></td>        {# filepath used for mass acction - remove #}
        <td class="d-none"></td>        {# subdirectory used for mass acction - remove #}
        <td>{{ 'files.table.name' | trans }}</td>
        <td>{{ 'files.table.extension' | trans }}</td>
        <td>{{ 'files.table.size' | trans }}</td>
        <td class="table-head-tags-cell">{{ 'files.table.tags' | trans }}</td>
        <td>{{ 'datatables.table.actions' | trans }}</td>
    </tr>
    </thead>
    <tbody>

    {% for file in files %}
        <tr class="trash-parent editable-parent save-parent"
            data-type="MyFiles"
            data-toggle-popover="true"                                {# popover attr #}
            data-content="
            <div>
                <b>{{ 'files.popover.modified' | trans }}</b>: {{ file[KEY_FILE_MODIFIED_DATE] }}
            </div>
            "                                                         {# popover attr #}
            data-placement="top"                                      {# popover attr #}
        >
            <td>
                {% include 'page-elements/components/forms/input-rounded-checkbox.twig'%}
            </td>                                                                                   {# checkbox #}
            <td data-content-editable="false">
                {% include 'modules/my-files/components/file-icon.html.twig' with {'extension': file[KEY_FILE_EXTENSION]} %}
            </td>
            <td class="mass-action-remove-file-path file-path d-none">{{ file[KEY_FILE_FULL_PATH] }}</td>     {# filepath used for mass acction - remove #}
            <td class="mass-action-remove-file-subdirectory subdirectory-path d-none">{{ subdirectory_path }}</td>    {# subdriectory used for mass acction - remove #}
            <td class="{{ KEY_FILE_NAME }}">
                {{ file[KEY_FILE_NAME] }}
            </td>
            <td contenteditable="false" data-content-editable="false">
                {{ file[KEY_FILE_EXTENSION] }}
            </td>
            <td class="{{ KEY_FILE_SIZE }}" contenteditable="false" data-content-editable="false">
                {% set size_in_mb = file[KEY_FILE_SIZE] / bytes_in_mb %}
                {{ size_in_mb | number_format(2) }}
            </td>

            <td class="table-body-tags-cell">
                {# cannot be set disabled here as it messes up inputs #}
                <input class="{{ KEY_TAGS }}" type="text" data-value="{{ file.tags }}"/>
            </td>

            {% include 'modules/common/components/table-cells/actions.html.twig' with {
                "trash"    : true,
                "edit"     : true,
                "save"     : true,
                "download" : true,
                "download_action"            : path('download_file'),
                "download_file_path"         : file[KEY_FILE_FULL_PATH],
                "download_file_input_name"   : KEY_FILE_FULL_PATH,
                "download_file_subdirectory" : subdirectory_path
            }%}

        </tr>
    {% endfor %}

    </tbody>
</table>

{% include 'modules/common/components/datatable-mass-actions.html.twig' with {
    "remove_files"               : true,
    "copy_files"                 : true,
    "data_target_table_selector" : "#MyFilesListTable"
}%}