<!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">


    <div class="alert alert-info alert-dismissible fade show mt-3">
        <div>
        <p>
            Challenges in which you need to call your hacker machine WebWolf offers a simple httpd
            server functionality which only logs the incoming request. You can use the following URL:
            http://webwolf/landing/* and the incoming request will be available below.
        </p>
        <p>
            This is by no means a substitution of httpd but it offers enough functionality to callback to a safe
            environment and does not require you to host your own httpd server on your local machine.
        </p>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>


    <h3>Requests</h3>
    <div th:each="trace,iter : ${traces}" class="card-group mt-1" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="card">
            <div class="card-heading" role="tab" th:id="'heading' + ${iter.index}">
                <strong class="card-title">
                    <a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion"
                       th:href="'#collapse' + ${iter.index}" aria-expanded="false" th:aria-controls="'collapse' + ${iter.index}">
                        <i class="bi bi-chevron-down"></i> <!-- FontAwesome icon -->
                        <span th:utext="${trace.date}"/> | <span th:utext="${trace.path}"/>
                    </a>
                </strong>
            </div>
            <div th:id="'collapse' + ${iter.index}" class="card-collapse collapse" role="tabcard"
                 th:aria-labelledby="'heading' + ${iter.index}">
                <div class="card-body">
                    <div>
                        <pre th:utext="${trace.json}"/>
                    </div>
                </div>
            </div>
        </div>
    </div>



</div>
</body>
</html>
