@import java.util.ArrayList
@args (ArrayList files, String path)

@css => {
<link href="/css/files.css" rel="stylesheet">
}

@js => {
<script>const path = "@path";</script>
<script src="/js/imagePreview.js"></script>
<script src="/js/files.js"></script>
}

@layout.template(files.size() + " Files", css, js) -> {
<div class="drop" id="drop">
    <h2>
        <!-- TODO: Add functionality to breadcrumb navigation -->
        <i class="icon ion-md-home"></i>
        @for (int i = 0; i < path.split("/").length - 1; i++) {
        @path.split("/")[i] <i class='icon ion-ios-arrow-forward'></i>
        }
        @path.split("/")[path.split("/").length - 1]
    </h2>

    <table id="table">
        <colgroup>
            <col/>
            <col/>
            <col/>
            <col/>
            <col/>
        </colgroup>

        <thead>
        <tr>
            <th data-asc="true"></th>
            <th data-asc="true">Name</th>
            <th data-asc="true">Size</th>
            <th data-asc="true">Last modified</th>
            <th data-asc="true">Share</th>
            <th data-asc="true">Delete</th>
        </tr>
        <tr data-href="../">
            <td></td>
            <td>../</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </thead>

        <tbody>
        @for (String[] fileArray : files) {
        @if (fileArray[3] == "true") {
        <tr data-href="@fileArray[0]">
            } else {
        <tr data-path="@fileArray[0]">
            }

            <!-- TODO: Add more icons (more specific file types) -->
            @if (fileArray[4] == "true") {
            <td><i class="icon ion-md-folder"></i></td>
            } else if (fileArray[3] == "false") {
            <td><i class="icon ion-md-code"></i></td>
            } else {
            <td><i class="icon ion-md-document"></i></td>
            }

            <td>@fileArray[0]</td>
            <td data-size="@fileArray[5]">@fileArray[1]</td>
            <td data-date="@fileArray[6]">@fileArray[2]</td>
            <td>
                <button class="share"><i class="icon ion-md-share"></i></button>
            </td>
            <td>
                <button class="delete"><i class="icon ion-md-trash"></i></button>
            </td>
        </tr>
        }
        </tbody>
    </table>
</div>
}