{% extends "labeler_base.html" %}
{% block title %}Register{% endblock %}
{% block content %}
<canvas id="three-canvas" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></canvas>
<div class="register-form">
    <h2>Register</h2>
    <form method="post">
        <div class="form-group">
            <label for="first_name">First Name</label>
            <input type="text" id="first_name" name="first_name" required>
        </div>
        <div class="form-group">
            <label for="last_name">Last Name</label>
            <input type="text" id="last_name" name="last_name" required>
        </div>
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
            <label for="company">Company (Optional)</label>
            <input type="text" id="company" name="company">
        </div>
        <button type="submit">Register</button>
    </form>
    <p>Already have an account? <a href="{{ url_for('auth.login') }}">Login</a></p>
</div>
<style>
    .register-form {
        max-width: 700px;
        margin: 50px auto;
        padding: 20px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        border-radius: 8px;
        position: relative;
        z-index: 1;
    }

    .register-form h2 {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }

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

    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #333;
    }

    .form-group input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .form-group input[required] {
        border-color: #999; /* Optional: subtle indication of required fields */
    }

    button[type="submit"] {
        width: 100%;
        padding: 10px;
        background: #3498db;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    button[type="submit"]:hover {
        background: #2980b9; /* Darker shade on hover */
    }

    .register-form p {
        text-align: center;
        margin-top: 15px;
        color: #333;
    }

    .register-form p a {
        color: #3498db;
        text-decoration: none;
    }

    .register-form p a:hover {
        text-decoration: underline;
    }
</style>
{% endblock %}