{{ define "content" }}
<link rel="stylesheet" href="/static/css/register.css">
<div class="icon-wrapper">
    <img src="/static/icon.png" alt="icon" class="icon">
</div>
<h1 class="modal-title">
    Welcome to Home Guard
</h1>
<h3 class="modal-description">
    Create an account to access home services and tools.
</h3>
<form method="POST" action="/api/v1/register" class="form">
    <div class="input-group">
        <div class="input-icon">
            <img src="/static/icons/user.png" alt="user">
        </div>
        <input class="input-field" type="text" name="full_name" placeholder="Full Name*">
    </div>
    <div class="input-group">
        <div class="input-icon">
            @
        </div>
        <input class="input-field" type="email" name="email" placeholder="Email*">
    </div>
    <div class="input-group">
        <div class="input-icon">
            <img src="/static/icons/telephone.png" alt="user">
        </div>
        <input class="input-field" type="tel" name="phone" placeholder="Phone Number">
    </div>
    <div class="input-group">
        <div class="input-icon">
            <img src="/static/icons/padlock.png" alt="user">
        </div>
        <input class="input-field" type="password" name="password" placeholder="Password*">
    </div>
    <div class="input-group">
        <div class="input-icon">
            <img src="/static/icons/padlock.png" alt="user">
        </div>
        <input class="input-field" type="password" name="repeat_password" placeholder="Repeat Password*">
    </div>
    
    <div class="checkbox-group">
        <input type="checkbox" name="terms_and_conditions">
        <div>
            <p>By checking this checkbox I submit, that read and accepted terms and conditions of this service and home lab.</p>
        </div>
    </div>

    <div class="validation_box" id="validationBox">
        <p class="validation_box__msg" id="validationMsg">
        </p>
    </div>

    <div class="success_box" id="successBox">
        <p class="success_box__msg" id="successMsg">
        </p>
    </div>

    <button class="button primary register-btn" type="submit">
        Register
    </button>

    <div class="login_link">
        Already have an account? <a href="/login">Login</a>
    </div>
</form>
<script src="/static/js/register.js"></script>
{{ end }}