source: Git/target/classes/templates/favoriteList.html@ f25e8dd

<style>
    .card{
        background-size: 200px 300px;
        background-repeat: no-repeat;
        float:left;
        margin: 7px;
        min-height: 270px;
        border-radius: 10px;
        padding: 20px;
        color: white;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
    }

    .card h4{
        text-align: center;
        background-color: rgba(255,255,255,0.7);
        border-radius: 5px;
    }

    .card h3{
        position: absolute;
        top: 85%;
        margin:auto;
        width: 100%;
        left: 0%;
        border-radius: 10px;
        text-align: center;
        background-color: rgba(255,255,255,0.7);
    }
</style>


<div class="container mb-4" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
    <div class="row">
        <div class="col-12" th:if="${movies.size() > 0}">
            <div class="table-responsive">
                <a th:each="movie: ${movies}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
                    <div class="col-2 card" th:style="'background:url(' + ${movie.getImageUrl()} + ');'">
                        <h4 th:text="${movie.getTitle()}"></h4>
                        <h3 th:text="${movie.getImdbRating()}"></h3>
                    </div>
                </a>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col">Наслов</th>
                        <th scope="col">Опис</th>
                        <th scope="col">Датум издавање</th>
                        <th scope="col">Допаѓања</th>
                        <th scope="col">Занрови</th>
                        <th scope="col">Актери</th>
                        <th scope="col">Режисер</th>



                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="movie : ${movies}" class="elements">
                        <td th:text="${movie.getTitle()}"></td>
                        <td th:text="${movie.getDescription()}"></td>
                        <td th:text="${movie.getAiringDate()}"></td>
                        <td th:text="${movie.getLikes() != null  ? movie.getLikes().size() : 0}">

                        </td>
                        <td class="genre">
                            <div th:each="g: ${movie.getGenres()}" th:text="${g.getGenre().genreType }"></div>
                        </td>
                        <td>
                            <div th:each="a: ${movie.getActors()}" th:text="${a.getPerson().getName()} "></div>
                        </td>
                        <td th:text="${movie.getDirector() != null ? movie.getDirector()?.getName() + ' '+ movie.getDirector()?.getSurname() : 'Не е додаен директор'}"></td>

                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>