<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>eCommerce - Account Settings</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
    <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
</head>
<body>
    <nav th:replace="fragments/header :: header">Header</nav>
    <main class='content-width'>
        <div class="content-width">
            <h1> Account Settings </h1>


            <form class="formgrid" th:action="@{/updateAccountSettings}" th:object="${customer}" method="post">

                <div class="l">
                    <h2>General Settings</h2>
                    <p class="l">
                        <label for="username">Username *</label>
                        <input class="linestyle full-width" type="text" id="username" th:field="*{username}"  th:value="${username}" />
                    </p>
                    <p class="l">
                        <label for="fullname">Full Name *</label>
                        <input class="linestyle full-width" type="text" id="fullname" th:value="${fullname}" />
                    </p>
                    <p class="l">
                        <label for="email">Email Address *</label>
                        <input class="linestyle full-width" type="text" id="email" th:value="${email}" />
                    </p>
                    <p class="l">
                        <label for="password">Password *</label>
                        <input class="linestyle full-width" type="password" id="password" th:field="*{password}" th:value="${password}" />
                    </p>
                </div>

                <div class="l">
                    <h2>Shipment Settings</h2>
                    <p class="l">
                        <label for="street">Street + Hous No. *</label>
                        <input class="linestyle full-width" type="text" id="street" th:value="${street}" />
                    </p>

                    <div class="l">
                        <p class="m">
                            <label for="city">City *</label>
                            <input class="linestyle full-width" type="text" id="city" th:value="${city}" />
                        </p>
                        <p class="s">
                            <label for="zipcode">ZIP Code *</label>
                            <input class="linestyle full-width" type="text" id="zipcode" th:value="${zipcode}" />
                        </p>
                    </div>

                    <p class="l">
                        <label for="country">Country *</label>
                        <input class="linestyle full-width" type="text" id="country" th:value="${country}" />
                    </p>
                </div>

                <div class="l">
                    <h2>Payment Settings</h2>
                    <h3>TODO</h3>
                </div>

                <div class="spacer"></div>

                <div class="l">
                    <button type="submit" name="action" value="updateAccountSettings">Änderungen speichern</button>
                    <button type="reset">Zurücksetzen</button>
                </div>
            </form>
        </div>
    </main>
    <footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>