<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">

    <title>Manuelle Buchung</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
</head>

<body>
<nav th:replace="fragments/header :: header">Header</nav>
<div class="sidebar-layout content-width">
    <nav></nav>
    <div>
        <h1>Manuelle Buchung</h1>
    </div>
</div>
<main class="sidebar-layout content-width">
    <nav th:replace="fragments/intern :: sidebar"></nav>
    <div class="content-width">
        <form class="detailgrid" method="post" th:action="@{/intern/warehouse/addManual}">
            <div class="m">
                <label for="amount">Artikelnummer</label>
                <input placeholder="Nr." class="full-width" type="text" name="articleId" value="" list="articles"/>
                <datalist id="articles">
                    <option th:each="article: ${articles}" th:value="${article.id + ' - ' + article.title}"/>
                </datalist>
            </div>
            <div class="s">
                <label for="amount">Anzahl</label>
                <input type="number" step="1" name="amount" value="0"/>
            </div>
            <div class="l">
                <label for="reason">Grund:</label>
                <input placeholder="Grund" class="full-width" type="text" name="reason" value=""/>
            </div>

            <div class="s">
                <fieldset>
                    <label for="source">Von</label>
                    <fieldset>
                        <input type="radio" id="s-no" name="sourceIsSlot" value="false" required>
                        <label for="s-no">Hinzufügen</label>
                    </fieldset>
                    <fieldset>
                        <input type="radio" id="s-main" name="sourceIsSlot" value="true" required>
                        <label for="s-main">Lagerplatz</label>
                        <input placeholder="Nr." type="text" name="sourceSlot" value="" list="slots"/>
                        <datalist id="slots">
                            <option th:each="slot: ${slots}" th:value="${slot.slotNum}"/>
                        </datalist>
                    </fieldset>
                </fieldset>
            </div>

            <div class="s">
                <fieldset>
                    <label for="destination">Nach</label>
                    <fieldset>
                        <input type="radio" id="d-no" name="destinationIsSlot" value="false" required>
                        <label for="d-no">Entfernen</label>
                    </fieldset>
                    <fieldset>
                        <input type="radio" id="d-main" name="destinationIsSlot" value="true" required>
                        <label for="d-main">Lagerplatz</label>
                        <input placeholder="Nr." type="text" name="destinationSlot" value="" list="slots"/>
                    </fieldset>
                </fieldset>
            </div>

            <div class="l">
                <p>
                    Manuelle Buchungen können nicht rückgängig gemacht werden! <br/>
                    Es können jedoch Gegenbuchungen erstellt werden.
                </p>
                <button type="submit">Buchung tätigen</button>
                <button type="reset">Zurücksetzen</button>
            </div>
        </form>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
