<!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>
</head>
<body>

<div layout:fragment="content">
    <div class="d-flex float-start my-1">
        <div class="mx-3"><input type="text" id="search" class="form-control" required /></div>
        <div class="mx-3">
            <select id="selectBox">
                <option th:each="value: ${users}" th:selected="${selectBox} == ${value}">
                    <span th:text="${value.firstName}"></span>
                </option>
            </select>
        </div>
        <div>
            <a class="btn btn-outline-primary text-center mx-2"
               th:href="@{/post/add/{userId}(userId=${6352})}">
                <!--Сам понимаешь что здесь надо сделать-->
                +
            </a>
        </div>
    </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"></table>
                    </div>
                    <div class="d-flex flex-row justify-content-end ">
                        <a class="btn btn-outline-primary text-center mx-2"
                           th:href="@{/post/edit/{id}(id=${post.id})}">
                            <i class="fa fa-pencil" aria-hidden="true"></i> Изменить
                        </a>
                        <button href="#"
                                class="btn btn-outline-primary mx-3"><i class="fa-sharp fa-solid fa-trash"></i></button>
                        <a th:href=@{/post/{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>

    </script>
</th:block>
</html>