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

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

@js => {
<script>
    const path = "@path";
    const isShared = "@isShared";
</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 class="navigation">
        <i class="icon ion-md-home"></i>
        @for (int i = 0; i < path.split("/").length - 1; i++) {
        <a href='@(new String(new char[path.split("/").length - i - 1]).replace("\0", "../"))'>@path.split("/")[i]</a>
        <i class='icon ion-ios-arrow-forward'></i>
        }
        @if (path.split("/").length > 0) {
        <a href="">@(path.split("/")[path.split("/").length - 1])</a>
        }
    </h2>

    <table id="table">
        <colgroup>
            <col/>
            <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">Download</th>
            <th data-asc="true">Delete</th>
        </tr>
        <tr data-href="../">
            <td></td>
            <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="downloadButton">
                    <a class="download" download="@fileArray[0]" href="@fileArray[0]?raw"><i class="icon ion-md-download"></i></a>
                </button>
            </td>

            <td>
                <button class="delete"><i class="icon ion-md-trash"></i></button>
            </td>
        </tr>
        }
        </tbody>
    </table>
</div>
}