<!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>Neuen Account erstellen</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>

    <script th:src="@{/js/scrollToContent.js}"></script>
</head>

<body>
<nav th:replace="fragments/header :: header">Header</nav>
<main class="modal">
    <form class="detailflex m" th:action="@{/register}" method="POST">
        <div>
            <h1>Neuen Account erstellen</h1>
        </div>
        <div>
            <h2> Login Daten </h2>
        </div>
        <div>
            <label for="username">Email Adresse</label>
            <input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>
        </div>

        <div>
            <label for="password">Passwort</label>
            <input class="full-width" type="password" name="password" placeholder="Passwort" id="password" required>
        </div>

        <div>
            <label for="password2">Passwort wiederholen</label>
            <input class="full-width" type="password" name="password2" placeholder="Passwort" id="password2" required>
        </div>

        <div>
            <h2> Rechungs- und Lieferinformation </h2>
        </div>

        <div class="col-2">
            <div>
                <label for="salutation">Anrede</label>
                <input class="full-width" list="salutationsOpt" name="salutation" id="salutation" placeholder="Anrede"
                       required/>
                <datalist id="salutationsOpt">
                    <option value="Herr">
                    <option value="Frau">
                    <option value="Herr Dr.">
                    <option value="Frau Dr.">
                </datalist>
            </div>
            <div>
                <label for="name">Name</label>
                <input class="full-width" type="text" name="name" id="name" placeholder="Nachname Vorname" required/>
            </div>
        </div>

        <div>
            <label for="address">Anschrift</label>
            <textarea rows="5" class="full-width" type="text" name="address" id="address"
                      placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10;Land"></textarea>
        </div>
        <div>
            <button class="full-width" type="submit" name="action" value="login">Registeren</button>
            <a th:href="@{/terms}">
                Unsere AGBs finden sie hier.
            </a>
        </div>

    </form>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
