<!DOCTYPE html>
<html lang="fr" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="fragments.html :: head(#{recipe.touchup.title}, 'form')"></th:block>

    <style>
        .content button {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<!-- Fragment de l'entête -->
<header th:include="fragments.html :: header(true)"></header>
<!-- Corps de la page -->
<section>
    <div th:include="fragments.html :: messages"></div>

    <h1 th:text="#{recipe.touchup.title}"></h1>

    <form action="#" method="post">
        <div class="content">
            <div class="formWrap">
                <div class="formColumn">
                    <label for="jobNumber" th:text="#{keyword.jobNumber} + ':'"></label>
                    <button type="button" class="printPtouch" th:text="#{keyword.ptouch}"></button>
                </div>
                <div class="formColumn">
                    <input type="text" name="jobNumber" id="jobNumber" required/>
                    <button type="button" class="printPdf" th:text="#{keyword.pdf}"></button>
                </div>
            </div>
        </div>
    </form>
</section>
<!-- Fragment du pied de page -->
<footer th:include="fragments.html :: footer(null, true)"></footer>

<script>
    /*<![CDATA[*/
    $(() => {
        const form = $("form");

        $(".printPtouch").on({
            click: function () {
                if (!$("#jobNumber").val()) return;

                form.attr({
                    action: "[[@{|${baseUrl}/touchup/ptouch|}]]"
                });
                form.submit();
            }
        });

        $(".printPdf").on({
            click: function () {
                if (!$("#jobNumber").val()) return;

                form.attr({
                    action: "[[@{|${baseUrl}/touchup/pdf|}]]"
                });
                form.submit();
            }
        });
    });
    /*]]>*/
</script>
</body>
</html>
