<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="~{fragments/header :: header-css}"/>
</head>
<body>

<div th:replace="~{fragments/header :: header}"/>

<script type="text/javascript" th:src="@{/js/fileUpload.js}"></script>

<div class="container mt-1">
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <div>
            <p>
                Upload a file which you need to host as an attacker.
            </p>
            <p>
                Each file will be available under the following url:
                <span th:text="${webwolf_url}">http://localhost:9090/WebWolf/</span>/files/{username}/{filename}.
            </p>
            <p>
                You can copy and paste the location from the table below.
            </p>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <div class="card">
        <div class="card-body">
            <h5 class="card-title"><strong>Upload a file</strong></h5>
            <form th:action="@{/fileupload}" method="post" enctype="multipart/form-data">
                <fieldset>
                    <div class="mb-3">
                        <input type="file" class="form-control" name="file"/>
                    </div>
                    <div class="mb-3">
                        <button type="submit" class="btn btn-md btn-primary">Upload files</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>


<div class="container mt-3">

    <table class="table">
        <thead class="thead-inverse">
        <tr>
            <th>Filename</th>
            <th>Size</th>
            <th>Creation time</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="f : ${files}">
            <td><a th:id="fileLink" th:href="@{'/' + ${f.link}}" th:text="${f.name}">link</a>
            </td>
            <td th:text="${f.size}">size</td>
            <td th:text="${f.creationTime}">creation time</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
