@if (files2Chk != null && files2Chk.Count() > 0)
{
    <div class="w-100 text-end">
        <button @onclick="()=>doSave()" class="btn btn-success">Save</button>
    </div>
}

<div class="d-flex justify-content-between my-2">
    <div class="col-5 text-center fw-bold border-bottom border-secondary" style="font-size: 1.5rem;">
        New Data
    </div>
    <div class="col-2 text-center"><button class="btn btn-dark" @onclick="()=>doScan()">Scan Dir New</button></div>
    <div class="col-5 text-center fw-bold border-bottom border-secondary" style="font-size: 1.5rem;">
        Current Data
    </div>
</div>
@if (isLoading)
{
    <ProgressDisplay Title="@titleMsg" CurrVal="@sendDataVal" MaxVal="@sendDataMaxVal" ExpTimeMSec="8000"></ProgressDisplay>
}
else if (files2Chk != null && files2Chk.Count() > 0)
{
    <table class="table table-striped">
        <thead>
            <tr class="row">
                <th class="col-1"></th>
                <th class="col-1">Type</th>
                <th class="col-1">Folder</th>
                <th class="col-1">Sile</th>
                <th class="col-1">Size</th>
                <th class="col-2 text-center">
                    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Select or Unselect all" @bind="@selUns">
                </th>
                <th class="col-1">Type</th>
                <th class="col-1">Folder</th>
                <th class="col-1">File</th>
                <th class="col-1">Size</th>
                <th class="col-1"></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in files2Chk)
            {
                <tr class="row">
                    <td class="col-1">
                        <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)"><i class="fa-solid fa-magnifying-glass"></i></button>
                        @* @if (item.Value.status == Core.Enum.fileStatus.mod || true)
                {
                <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item)"><i class="fa-solid fa-magnifying-glass"></i></button>
                }
                else
                {
                <button class="btn btn-sm btn-secondary" disabled><i class="fa-solid fa-magnifying-glass"></i></button>
                } *@
                    </td>
                    @if (item.Value.status == Core.Enum.fileStatus.add || item.Value.status == Core.Enum.fileStatus.mod)
                    {
                        <td class="col-1">
                            @item.Key.Split("\\")[0]
                        </td>
                        <td class="col-1">
                            @item.Key.Split("\\")[1]
                        </td>
                        <td class="col-1">
                            @item.Key.Split("\\")[2]
                        </td>
                        <td class="col-1">
                            @($"{item.Value.FileDim / 1024} kb")
                        </td>
                    }
                    else
                    {
                        <td class="col-4" colspan="4"></td>
                    }
                    <td class="col-2 text-center">
                        <button class="btn @btnCssClass(item.Value.status, item.Value.action)" @onclick="()=>changeDoAct(item)">@btnTxt(item.Value.status) &nbsp; <i class="@btnIcon(item.Value.status)"></i></button>
                    </td>
                    @if (item.Value.status == Core.Enum.fileStatus.rem || item.Value.status == Core.Enum.fileStatus.mod)
                    {
                        <td class="col-1">
                            @item.Key.Split("\\")[0]
                        </td>
                        <td class="col-1">
                            @item.Key.Split("\\")[1]
                        </td>
                        <td class="col-1">
                            @item.Key.Split("\\")[2]
                        </td>
                        <td class="col-1">
                            @($"{item.Value.FileDim / 1024} kb")
                        </td>
                    }
                    else
                    {
                        <td class="col-4" colspan="4"></td>
                    }
                    <td class="col-1 text-end">
                        <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)"><i class="fa-solid fa-magnifying-glass"></i></button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}
else if (files2Chk == null || files2Chk.Count() == 0)
{
    <div class="alert alert-info text-dark">
        <div class="w-100 text-center fs-4"><i class="fa-solid fa-arrow-up"></i></div>
        <div class="w-100 text-center fs-4">@scanMsg</div>
    </div>
}

<!-- Modal -->
<div class="modal fade" id="fileDiffModal" tabindex="-1" aria-labelledby="fileDiffModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="min-width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="fileDiffModalLabel">Component Comparer</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <DiffView oldText="@txtSx" newText="@txtDx"></DiffView>
            </div>
            <div class="modal-footer">
                @if (actFile.Key != null)
                {
                    <button class="btn @btnCssClass(actFile.Value.status, actFile.Value.action)" @onclick="()=>changeDoAct(actFile)" title="Accept New Data">@btnTxt(actFile.Value.status) &nbsp; <i class="@btnIcon(actFile.Value.status)"></i></button>
                }
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" title="Modal Close">Close</button>
            </div>
        </div>
    </div>
</div>