<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
    <title><spring:message code="label.addAppUser"/></title>
    <!-- Captcha Google -->
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <style>
        body {
            background-color: #343a40;

        }
        .form-center{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {

            width: 400px;
            padding: 20px;
            margin-top: 50px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        }

        .header {
            text-align: right;
            padding: 10px;
        }

        .header a {
            background-color: #fff;
            padding: 5px 10px;
            margin-right: 5px;
            border-radius: 3px;
            color: #000;
            text-decoration: none;
        }

        .header a:hover {
            background-color: #e9e9e9;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-signin input[type="text"],
        .form-signin input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 16px;
            background-color: #fff;
        }

        .form-error {
            color: red;
            margin-top: 5px;
        }

        .btn-signin {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        .btn-signin:hover {
            background-color: #0069d9;
        }
        .form-group.address {
            display: flex;
            flex-direction: column;
        }

        .form-group.address label {
            margin-bottom: 5px;
        }

        .form-group.address select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 16px;
            background-color: #fff;
            height: 100px; /* Adjust the height as needed */
        }

    </style>
</head>
<body>

<div class="header">
    <span>
        <a href="?lang=pl">pl</a> | <a href="?lang=en">en</a> | <a href="?lang=de">de</a>
    </span>
</div>
<div class="form-center">
<div class="container">
    <h1>Register:</h1>

    <form:form method="post" action="/register" modelAttribute="appUser" class="form-signin">
        <form:hidden path="id"/>
        <div class="form-group">
            <form:label path="login">Login</form:label>
            <form:input path="login" class="form-control"/>
            <form:errors path="login" class="form-error"/>
        </div>
        <div class="form-group">
            <form:label path="password">Password</form:label>
            <form:input path="password" type="password" class="form-control"/>
            <form:errors path="password" class="form-error"/>
        </div>
        <div class="form-group">
            <form:label path="enabled">Enabled</form:label>
            <form:checkbox path="enabled"/>
            <form:errors path="enabled" class="form-error"/>
        </div>
        <div class="form-group">
            <form:label path="firstName">First Name</form:label>
            <form:input path="firstName" class="form-control"/>
            <form:errors path="firstName" class="form-error"/>
        </div>
        <div class="form-group">
            <form:label path="lastName">Last Name</form:label>
            <form:input path="lastName" class="form-control"/>
            <form:errors path="lastName" class="form-error"/>
        </div>
        <div class="form-group">
            <form:label path="email">Email</form:label>
            <form:input path="email" class="form-control"/>
            <form:errors path="email" class="form-error"/>
        </div>
        <div class="form-group">
            <form:label path="telephone">Telephone</form:label>
            <form:input path="telephone" class="form-control"/>
            <form:errors path="telephone" class="form-error"/>
        </div>
        <div class="form-group">
            <form:label path="pesel.PESEL">PESEL</form:label>
            <form:input path="pesel.PESEL" class="form-control"/>
            <form:errors path="pesel" class="form-error"/>
        </div>
        <form:hidden path="appUserRole" value="3" />
        <div class="form-group address">
            <form:label path="address"><spring:message code="label.address" /></form:label>
            <form:select path="address">
                <c:forEach items="${addressesList}" var="address">
                    <option value="${address.id}" ${address.id == selectedAddress ? 'selected="selected"' : ''}>${address.street}</option>
                </c:forEach>
            </form:select>
            <form:errors path="address" cssClass="error-message" />
        </div>


        <div class="g-recaptcha" data-sitekey="6LecyigmAAAAACaS3sPkEZPVxJzT7jUmX_Zl4r3o"></div>

        <button type="submit" class="btn btn-primary btn-block btn-signin">Register</button>
    </form:form>
</div>
</div>
</body>
</html>