<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{default}" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="/webjars/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<div layout:fragment="content">
    <div class="d-flex float-start my-1">
        <form th:action="@{/index/filter}" class="d-flex">
            <div class="mx-3"><input type="text" th:name="searchValue" id="search" class="form-control" required /></div>
            <button type="submit" class="btn btn-outline-primary text-center mx-2">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </form>
        <form th:action="@{/index/userPosts}" id="myForm" class="d-flex">
            <div class="mx-3">
                <select id="selectBox" th:name="userId">
                    <option value="" disabled selected>Select your option</option>
                    <option th:each="value: ${users}" th:selected="${selectBox} == ${value}" th:text="${value.login}" th:value="${value.Id}">
                    </option>
                </select>
            </div>
        </form>
    </div>
    <div class="my-5">
        <!--здесь тоже надо сделать нормальный вывод-->
        <div class="container-fluid">
            <div th:each="post, iterator: ${posts}" class="card border-dark mb-3 d-flex flex-row text-black justify-content-between">
                <div>
                    <img class="col" style="width:300px;height:200px" th:src="${post.image}"/>
                </div>
                <div class="d-flex flex-grow-1 flex-column">
                    <div class="flex-grow-1 mx-2">
                        <h th:text="${post.heading}"></h>
                    </div>
                    <div class="flex-grow-1 mx-2">
                        <p th:text="${post.content}"></p>
                    </div>
                    <div class="flex-grow-1 mx-2">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Пользователь</th>
                                <th scope="col">Текст</th>
                                <th scope="col"></th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr th:each="comment, iterator: ${post.comments}">
                                    <th scope="row" th:text="${iterator.index} + 1"/>
                                    <td th:text="${comment.user}" style="width: 60%"/>
                                    <td th:text="${comment.text}" style="width: 60%"/>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex flex-row justify-content-end ">
                        <a th:href=@{/index/{id}(id=${post.id})} class='btn btn-outline-primary mx-2'><i class="fa-solid fa-envelopes-bulk"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<th:block layout:fragment="scripts">
    <script>
        $(document).ready(function() {
            $('#selectBox').on('change', function() {
                this.form.submit();
            });
        });
    </script>
</th:block>
</html>