<!DOCTYPE html>
<html th:replace="~{modele-page :: layout(${article.nom},~{::link} , ~{::#container-main})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div class="container-fluid" id="container-main">
    <div class="row mt-3 justify-content-center">
        <div class="col-12 col-md-8 col-lg-6"> <!-- Utilisation de classes Bootstrap pour rendre la colonne responsive -->
            <div class="card" >
                <div class="card-header" th:if="${#dates.format(article.dateFinEnch, 'yyyy-MM-dd')} > ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}">
                    <h4 th:text="'Article - offre en cours'"></h4>
                </div>
                <div class="card-header" th:unless="${#dates.format(article.dateFinEnch, 'yyyy-MM-dd')} > ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}">
                    <h4 th:if="${maxEncherePseudo} != null" th:text="#{article.details.winBy} + ' ' + (${#authentication.getName() == maxEncherePseudo ? #{article.details.winByYou} : maxEncherePseudo})"></h4>
                    <h4 th:unless="${maxEncherePseudo} != null" th:text="#{article.details.noWin}"></h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 col-md-4">
                            <img th:src="${article.lienImg}" alt="Image de l'article" class="img-fluid rounded">
                        </div>
                        <div class="col-12 col-md-8">
                            <div class="mt-2 d-flex flex-column align-items-center">
                                <h1 th:text="${article.nom}"></h1>
                            </div>
                            <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                <strong><label class="col-form-label" th:text="#{article.details.label.description}"></label></strong>
                                <span class="d-inline-block text-wrap text-sm text-justify" style="max-width: 60%;" th:text="${article.desc}"></span>
                            </div>
                            <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                <strong><label class="col-form-label" th:text="#{article.details.label.seller}"></label></strong>
                                <a th:href="@{/profil/showProfil(userPseudo=${username.pseudo})}" class="text-decoration-none">
                                    <span th:text="${username.pseudo}"></span>
                                </a>
                            </div>
                            <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                <strong><label class="col-form-label" th:text="#{article.details.label.category}"></label></strong>
                                <span th:text="${cate}"></span>
                            </div>
                            <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                <strong><label class="col-form-label" th:text="#{article.details.label.sale_price}"></label></strong>
                                <span th:text="${article.prixInitial}"></span>
                            </div>
                            <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                <strong><label class="col-form-label" th:text="#{article.details.lastof}"></label></strong>
                                <span th:text="${maxEnchere} ? ${maxEnchere} : 'Aucune offre en cours'"></span>
                            </div>

                            <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                <strong><label class="col-form-label" th:text="#{article.details.label.end_date}"></label></strong>
                                <span th:text="${article.dateFinEnch}"></span>
                            </div>
                            <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                <strong><label class="col-form-label" th:text="#{article.details.label.pickup}"></label></strong>
                                <span th:text="${retrait} ? ${retrait.rue} + ' ' + ${retrait.code_postale} + ' ' + ${retrait.ville} : #{article.details.address.unknown}"></span>
                            </div>
                            <form th:if="${!isArticleCurrentUser} and ${#dates.format(article.dateFinEnch, 'yyyy-MM-dd')} > ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}" th:action="@{/enchere/incEnchere}" method="post" th:object="${enchere}" class="mt-2 d-flex flex-row align-items-end justify-content-between">
                                <input type="hidden" id="articleId" name="articleId" th:value="${article.id}">
                                <label for="montantEnchere" th:text="#{article.details.label.amount}"></label>
                                <input type="number" th:field="*{montantEnchere}" id="montantEnchere" step="0.01" min="0">
                                <span style="color: red;" th:if="${errors != null}">
                                    <ul>
                                        <li th:each="erreur: ${errors[0]}" th:text="${erreur.defaultMessage}"></li>
                                    </ul>
                                </span>
                                <button type="submit" class="btn btn-primary" th:text="#{article.details.button.bid}"></button>
                            </form>
                            <div class="mt-5 d-flex justify-content-end align-items-center">
                                <a class="btn btn-secondary mr-2" href="/enchere" th:text="#{edit.article.back}"></a>
                                <a th:if="${#strings.equals(user.getPseudo(), article.pseudoUtilisateur)} and ${#dates.format(article.dateDebutEnch, 'yyyy-MM-dd')} > ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}" class="btn btn-primary" th:href="@{/article/edit(id=${article.id})}" th:text="#{edit.article.update}"></a>
                                <form th:if="${#dates.format(article.dateFinEnch, 'yyyy-MM-dd')} < ${#dates.format(#dates.createNow(), 'yyyy-MM-dd')} and ${#strings.equals(user.getPseudo(), article.pseudoUtilisateur)}" th:action="@{/enchere/enchereDone}" method="post">
                                    <input type="hidden" id="id" name="id" th:value="${article.id}">
                                    <button type="submit" class="btn btn-primary" th:text="#{article.details.retrait}"></button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <hr class="mt-2" th:if="${isArticleCurrentUser}">
                    <div class="mt-2" th:if="${isArticleCurrentUser}">
                        <h5 th:text="#{article.details.ench}"></h5>
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th th:text="#{article.details.pseudo}"></th>
                                <th th:text="#{article.details.mountench}">Montant Enchère</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="enchere : ${encheres}">
                                <td>
                                    <a th:href="@{/profil/showProfil(userPseudo=${enchere.pseudoUtilisateur})}" class="text-decoration-none">
                                        <span th:text="${enchere.pseudoUtilisateur}"></span>
                                    </a>
                                </td>
                                <td>
                                    <span th:text="${enchere.montantEnchere}"></span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
