<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title, styleName)">
    <title th:text="${title}"></title>
    <meta charset="UTF-8"/>
    <!--    <link rel="stylesheet" th:href="@{|${baseUrl}/css/bootstrap/bootstrap.min.css|}"/>-->
    <link rel="stylesheet" th:href="@{|${baseUrl}/css/main.css|}"/>
    <link rel="stylesheet" th:href="@{|${baseUrl}/css/menu.css|}"/>
    <link rel="stylesheet" th:href="@{|${baseUrl}/css/flex.css|}"/>
    <link rel="stylesheet" th:href="@{|${baseUrl}/js/libs/jquery-ui-1.12.1/jquery-ui.min.css|}"/>

    <link rel="stylesheet" th:if="${styleName != null}" th:href="@{|${baseUrl}/css/${styleName}.css|}">
</head>
<body>

<div th:fragment="header(showPrinterIcon)">
    <nav>
        <div class="dropdown">
            <button class="dropbtn" onclick="window.location.href='/'" th:text="#{menu.explore}">
            </button>
        </div>
        <div class="dropdown">
            <button class="dropbtn" th:text="#{menu.add}"></button>
            <div class="dropdown-content">
                <a th:href="@{|${baseUrl}/company/creator|}" th:text="#{keyword.company}"></a>
                <a th:href="@{|${baseUrl}/material/creator|}" th:text="#{keyword.material}"></a>
                <a th:href="@{|${baseUrl}/recipe/creator|}" th:text="#{keyword.recipe}"></a>
                <a th:href="@{|${baseUrl}/materialType/creator|}" th:text="#{material.type}"></a>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn" th:text="#{menu.edit}"></button>
            <div class="dropdown-content">
                <a th:href="@{|${baseUrl}/material/editor|}" th:text="#{keyword.material}"></a>
                <a th:href="@{|${baseUrl}/recipe/editor|}" th:text="#{keyword.recipe}"></a>
                <a th:href="@{|${baseUrl}/materialType/editor|}" th:text="#{material.type}"></a>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn" th:text="#{menu.delete}"></button>
            <div class="dropdown-content">
                <a th:href="@{|${baseUrl}/company/remover|}" th:text="#{keyword.company}"></a>
                <a th:href="@{|${baseUrl}/material/remover|}" th:text="#{keyword.material}"></a>
                <a th:href="@{|${baseUrl}/recipe/remover|}" th:text="#{keyword.recipe}"></a>
                <a th:href="@{|${baseUrl}/materialType/remover|}" th:text="#{material.type}"></a>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn" onclick="window.location.href='/inventory'" th:text="#{menu.inventory}"></button>
        </div>
        <div class="dropdown">
            <button class="dropbtn" th:text="#{menu.others}"></button>
            <div class="dropdown-content">
                <a th:href="@{|${baseUrl}/touchup|}" th:text="#{recipe.touchup}"></a>
                <a href="#" th:text="#{recipe.exportAllXLS}"
                   onclick="return confirmDatabaseExport()"></a>
                <a th:href="@{|${baseUrl}/lbx/Templates.zip|}" th:text="#{keyword.ptouchTemplate}"></a>
                <a th:href="@{|${baseUrl}/updates|}" th:text="#{keyword.updates}"></a>
            </div>
        </div>
    </nav>
    <div class="spacer"></div>
    <div class="header-right">
        <img th:if="${showPrinterIcon}" alt="print status" id="printStatusIcon"
             th:src="@{|${baseUrl}/icons/printerError.svg|}"/>
        <img alt="logo" id="logo" th:src="@{|${baseUrl}/logo.png|}" onclick="location.href = '/'"/>
    </div>
</div>

<div th:fragment="messages">
    <div th:include="fragments.html :: error"></div>
    <div th:include="fragments.html :: success"></div>
    <div th:include="fragments.html :: warning"></div>
    <div th:include="fragments.html :: confirm"></div>
    <div th:include="fragments.html :: prompt"></div>
    <div th:include="fragments.html :: filter"></div>
</div>

<div th:fragment="error">
    <div class="messageBox" id="errorBox">
        <div class="messageBoxContainer">
            <div class="messageBoxMessageContainer">
                <img th:src="@{|${baseUrl}/icons/error.svg|}" alt="error icon"/>
                <p th:if="${error != null && !error.isEmpty()}"
                   th:text="#{${error}(${responseArg1}, ${responseArg2})}"></p>
                <p th:if="${error == null || error.isEmpty()}"></p>
            </div>
        </div>
    </div>
</div>

<div th:fragment="success">
    <div class="messageBox" id="successBox">
        <div class="messageBoxContainer">
            <div class="messageBoxMessageContainer">
                <img th:src="@{|${baseUrl}/icons/success.svg|}" alt="success icon"/>
                <p th:if="${success != null && !success.isEmpty()}"
                   th:text="#{${success}(${responseArg1}, ${responseArg2})}"></p>
                <p th:if="${success == null || success.isEmpty()}"></p>
            </div>
        </div>
    </div>
</div>

<div th:fragment="warning">
    <div class="messageBox" id="warningBox">
        <div class="messageBoxContainer">
            <div class="messageBoxMessageContainer">
                <img th:src="@{|${baseUrl}/icons/warning.svg|}" alt="warning icon"/>
                <p th:if="${warning != null && !warning.isEmpty()}"
                   th:text="#{${warning}(${responseArg1}, ${responseArg2})}"></p>
                <p th:if="${warning == null || warning.isEmpty()}"></p>
            </div>
        </div>
    </div>
</div>

<div th:fragment="confirm">
    <div class="messageBox" id="confirmBox">
        <div class="messageBoxContainer">
            <div class="messageBoxMessageContainer">
                <img th:src="@{|${baseUrl}/icons/confirm.svg|}" alt="confirm icon"/>
                <p th:if="${confirm != null && !confirm.isEmpty()}"
                   th:text="#{${confirm}(${responseArg1}, ${responseArg2})}"></p>
                <p th:if="${confirm == null || confirm.isEmpty()}"></p>
            </div>
            <div class="confirmButtonsContainer">
                <button type="button" class="confirmCancel" th:text="#{keyword.cancel}"></button>
                <button type="button" class="confirmContinue" th:text="#{keyword.continue}"></button>
            </div>
        </div>
    </div>
</div>

<div th:fragment="prompt">
    <div class="messageBox" id="promptBox">
        <div class="messageBoxContainer">
            <div class="messageBoxMessageContainer">
                <img th:src="@{|${baseUrl}/icons/confirm.svg|}" alt="confirm icon"/>
                <p th:if="${prompt != null && !prompt.isEmpty()}"
                   th:text="#{${prompt}(${responseArg1}, ${responseArg2})}"></p>
                <p th:if="${prompt == null || prompt.isEmpty()}"></p>
            </div>
            <div class="confirmInputContainer">
                <input type="text" class="noPlaceholder" id="confirmInput"/>
            </div>
            <div class="confirmButtonsContainer">
                <button type="button" class="confirmCancel" th:text="#{keyword.cancel}"></button>
                <button type="button" class="confirmContinue" th:text="#{keyword.continue}"></button>
            </div>
        </div>
    </div>
</div>

<div th:fragment="filter">
    <div id="filter"></div>
</div>

<div th:fragment="separator">
    <td colspan="2">
        <hr/>
    </td>
</div>

<div th:fragment="footer(link, showLang)">
    <th:block th:if="${showLang}">
        <a th:if="${link == null}" th:href="@{''(lang=__${#locale.toString() == 'en' ? 'fr' : 'en'}__)}"
           th:text="#{footer.lang}"></a>
        <a th:unless="${link == null}" th:href="@{${link + '?lang=__${#locale.toString() == 'en' ? 'fr' : 'en'}__'}}"
           th:text="#{footer.lang}"></a>
    </th:block>

    <!--    <script th:src="@{|${baseUrl}/js/libs/bootstrap/bootstrap.min.js|}"></script>-->
    <script th:src="@{|${baseUrl}/js/libs/jquery-3.4.1.min.js|}"></script>
    <script th:src="@{|${baseUrl}/js/libs/jquery-ui-1.12.1/jquery-ui.min.js|}"></script>
    <script th:src="@{|${baseUrl}/js/libs/axios.min.js|}"></script>
    <script th:src="@{|${baseUrl}/js/main.js|}"></script>
    <script>
        /*<![CDATA[*/
        const simdutNotFoundText = formatMessage("[[#{material.simdutFile.notFound}]]");
        const changesNotSavedText = formatMessage("[[#{recipe.warning.changesNotSaved}]]");
        const exportAllWarningText = formatMessage("[[#{recipe.warning.exportAll}]]");
        const askPasswordText = formatMessage("[[#{password.ask}]]");
        const invalidPasswordText = formatMessage("[[#{password.notValid}]]");
        const generalErrorText = formatMessage("[[#{error.serverError}]]");
        const researchNotFound = formatMessage("[[#{warning.noResult}]]");
        const recipeNotApproved = formatMessage("[[#{recipe.warning.notApproved}]]");
        const askChangePage = formatMessage("[[#{warning.askChangePage}]]");
        const printOkTitle = formatMessage("[[#{recipe.print.status.ok}]]");
        const printErrorTitle = formatMessage("[[#{recipe.print.status.error}]]");

        const referer = "[[${referer}]]";
        const baseUrl = "[[${baseUrl}]]";
        /*]]>*/
    </script>
</div>

<div th:fragment="mainTableButtons">
    <td class="centerTd">
        <button class="returnButton" type="button" th:text="#{keyword.back}"></button>
    </td>
    <td class="centerTd">
        <button type="submit" th:text="#{keyword.save}"></button>
    </td>
</div>

<div th:fragment="formEndButtons">
    <div class="formEndButtons">
        <button class="returnButton" type="button" th:text="#{keyword.back}"></button>
        <button class="submitButton" type="submit" th:text="#{keyword.save}"></button>
    </div>
</div>

<script th:fragment="printStrings">
    const noBaseError = formatMessage("[[#{recipe.print.error.noBase}]]");
    const bpacNotInstalledError = formatMessage("[[#{recipe.print.error.bpacNotInstalled}]]");
    const printError = formatMessage("[[#{recipe.print.error}]]");
    const confirmPrintMessage = formatMessage("[[#{recipe.print.confirm}]]");
    const printingMessage = formatMessage("[[#{recipe.print.printing}]]");
</script>

<script th:fragment="iconsPath">
    const recipeNotApprovedIconPath = "[[@{|${baseUrl}/icons/warning.svg|}]]"
    const materialLowQuantityIconPath = "[[@{|${baseUrl}/icons/bucket.svg|}]]"
</script>

</body>
</html>
