@page
@model WorkFlowCheck.Web.Pages.BaseStock.ImageFiles.ImageFilesPageModel
@using WorkFlowCheck.Common.Helper
@using WorkFlowCheck.Common.DTO
@{
    ViewData["Title"] = "Képek";
}
<h1>@ViewData["Title"]</h1>

<div class="card shadow p-4">
    <table id="tbImageFilesPage" class="table table-bordered table-hover table-sm" style="width:100%">
        <thead class="table-primary">
            <tr>
                <th>ID</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(ImageFileDTO.FileName), typeof(ImageFileDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(ImageFileDTO.CreateDate), typeof(ImageFileDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(ImageFileDTO.FileSize), typeof(ImageFileDTO))</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tfoot class="table-light">
            <tr>
                <th>ID</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(ImageFileDTO.FileName), typeof(ImageFileDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(ImageFileDTO.FileSize), typeof(ImageFileDTO))</th>
                <th>@DisplayNameHelper.GetDisplayName(nameof(ImageFileDTO.CreateDate), typeof(ImageFileDTO))</th>
                <th>Action</th>
            </tr>
        </tfoot>
    </table>
</div>

@section Scripts {
    <script>
        const table = new DataTable('#tbImageFilesPage', {
                ajax: {
                        url: "@Url.Page("./ImageFilesPage", "LoadImageFiles")",
                        type: "GET",
                        dataSrc : "data"
                },
                columns: [
                    { data: "id" },
                    { data: "fileName" },
                    { data: "createDate" },
                    { data: "fileSize" },
                    { data: null, render: function (data, type, row) {
                         return renderActionButtonsDownloadImages(row.id);
                    }}
                ],
                columnDefs: [
                    {
                        "targets": 0,
                        "visible": false
                    },
                    {
                        "targets": 2,
                        "className": "text-start"
                    },
                    {
                        "targets": 3,
                        "className": "text-end"
                    },
                    {
                        "targets": 4,
                        "className": "text-center",
                        "width": "10%"
                    }
                ],

                processing:true,
                language: { url: '//cdn.datatables.net/plug-ins/2.2.2/i18n/hu.json',}
        });

        $('#tbImageFilesPage').on('click', '.download-btn', function ()
        {
            const row = table.row($(this).closest('tr')).data();
            window.location.href = `@Url.Page("/BaseStock/ImageFiles/ImageFilesPage")?handler=DownloadFile&filename=${row.fileName}`;
        });
    </script>
}