{% set firstView = fsc.views | first %}
{% set doc = firstView.model %}
{% set currentView = fsc.getCurrentView() %}

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            {% if fsc.permissions.allowUpdate %}
                <form action="{{ doc.url() }}" method="post" enctype="multipart/form-data"
                      onsubmit="animateSpinner('add')">
                    {{ formToken() }}
                    <input type="hidden" name="activetab" value="{{ currentView.getViewName() }}"/>
                    <input type="hidden" name="action" value="add-file"/>
                    <div class="card border-success shadow mb-3">
                        <div class="card-body p-3">
                            <h5 class="card-title">
                                <i class="fa-solid fa-folder-plus fa-fw"></i> {{ trans('add') }}
                            </h5>
                            <div class="mb-3">
                                <textarea name="observations" class="form-control"
                                          placeholder="{{ trans('observations') }}"></textarea>
                            </div>
                            {% for includeView in getIncludeViews('DocFiles', 'formAddBody') %}
                                {% include includeView['path'] %}
                            {% endfor %}
                            <div class="row align-items-end">
                                <div class="col">
                                    <p class="text-muted mb-2">
                                        {{ trans('help-server-accepts-filesize', {'%size%': currentView.model.getMaxFileUpload()}) }}
                                    </p>
                                    <input type="file" name="new-files[]" class="form-control" multiple required/>
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn btn-success">
                                        <i class="fa-solid fa-save fa-fw" aria-hidden="true"></i> {{ trans('save') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            {% endif %}

            <div id="docs-container" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
                {% for docfile in currentView.cursor %}
                    {% set file = docfile.getFile() %}
                    {% if file %}
                    <div class="col" data-doc-id="{{ docfile.id }}">
                        <form action="{{ doc.url() }}" method="post" enctype="multipart/form-data"
                              onsubmit="animateSpinner('add')">
                            {{ formToken() }}
                            <input type="hidden" name="activetab" value="{{ currentView.getViewName() }}"/>
                            <input type="hidden" name="id" value="{{ docfile.id }}"/>
                            <input type="hidden" name="action" value=""/>
                            <div class="card shadow h-100">
                                {% if file.isImage() %}
                                    <a href="{{ file.url('download-permanent') }}" target="_blank">
                                        <img src="{{ file.url('download') }}" class="card-img-top"
                                             alt="{{ file.filename }}" loading="lazy">
                                    </a>
                                {% else %}
                                    <div class="p-3">
                                        <a href="{{ file.url('download-permanent') }}" target="_blank"
                                           class="btn w-100 btn-lg btn-secondary" aria-label="{{ trans('download') }} {{ file.filename }}">
                                            {% if file.isPdf() %}
                                                <i class="fa-regular fa-file-pdf fa-fw" aria-hidden="true"></i>
                                            {% elseif file.isVideo() %}
                                                <i class="fa-regular fa-file-video fa-fw" aria-hidden="true"></i>
                                            {% elseif file.isArchive() %}
                                                <i class="fa-regular fa-file-archive fa-fw" aria-hidden="true"></i>
                                            {% else %}
                                                <i class="fa-regular fa-file fa-fw" aria-hidden="true"></i>
                                            {% endif %}
                                            <span class="text-break">{{ file.filename | raw }}</span>
                                        </a>
                                    </div>
                                {% endif %}
                                <div class="card-body p-3">
                                    <div class="mb-3">
                                        <label for="observations-{{ docfile.id }}" class="visually-hidden">{{ trans('observations') }}</label>
                                        <textarea name="observations" id="observations-{{ docfile.id }}" class="form-control"
                                                  placeholder="{{ trans('observations') }}">{{ docfile.observations | raw }}</textarea>
                                    </div>
                                    {% for includeView in getIncludeViews('DocFiles', 'formEditBody') %}
                                        {% include includeView['path'] %}
                                    {% endfor %}
                                    <p class="card-text text-muted small">
                                        {% if docfile.nick %}
                                            <i class="fa-solid fa-user" aria-hidden="true"></i> {{ docfile.nick }}
                                        {% endif %}
                                        <i class="fa-solid fa-calendar-alt ms-3" aria-hidden="true"></i> {{ docfile.creationdate }}
                                        <i class="fa-solid fa-hard-drive ms-3" aria-hidden="true"></i> {{ bytes(file.size) }}
                                    </p>
                                </div>
                                <div class="card-footer p-2" style="cursor: move;">
                                    <div class="d-flex justify-content-between align-items-center">
                                        {% if fsc.permissions.allowDelete %}
                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-outline-danger dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false"
                                                        aria-label="{{ trans('delete-options') }}">
                                                    <i class="fa-solid fa-trash-alt" aria-hidden="true"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <button type="button"
                                                                onclick="this.form.action.value='unlink-file';this.form.onsubmit();this.form.submit();"
                                                                class="dropdown-item">
                                                            <i class="fa-solid fa-unlink fa-fw" aria-hidden="true"></i> {{ trans('unlink-file') }}
                                                        </button>
                                                    </li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <button type="button"
                                                                onclick="if(confirm('{{ trans('confirm-delete') }}')) { this.form.action.value='delete-file';this.form.submit(); }"
                                                                class="dropdown-item text-danger">
                                                            <i class="fa-regular fa-trash-alt fa-fw" aria-hidden="true"></i> {{ trans('delete-file') }}
                                                        </button>
                                                    </li>
                                                </ul>
                                            </div>
                                        {% endif %}
                                        {% if fsc.permissions.allowUpdate %}
                                            <button type="button" class="btn btn-sm btn-primary"
                                                    onclick="this.form.action.value='edit-file';this.form.onsubmit();this.form.submit();">
                                                <i class="fa-solid fa-save fa-fw" aria-hidden="true"></i> {{ trans('save') }}
                                            </button>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#docs-container').sortable({
            cursor: "move",
            tolerance: "pointer",
            opacity: 0.65,
            stop: (event, ui) => {

                const orden = Array.from(event.target.children).map(doc => doc.dataset.docId);

                if (orden.length > 0) {

                    const url = new URL(window.location.href);
                    url.searchParams.append('action', 'sort-files');

                    $.ajax({
                        method: "POST",
                        url,
                        data: {orden},
                        dataType: "json",
                        success: function (data) {
                            if (data.status !== 'ok') {
                                alert(data.message);
                            }
                        },
                        error: function (msg) {
                            alert(msg.status + " " + msg.responseText);
                        }
                    });
                }
            },
        });
    });
</script>
