<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Eversync</title>
    {% load static %}
    <link rel="icon" href="{% static 'favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'register-style.css' %}" "></head>
</head>
<body>
    <div class="header">
        <div class="header-content">
            <img target="/" src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px;">
            <a href="/" class="logo">eversync</a>
        </div>
    </div>
    
    <div class="container">
        <div class="register-box">
            <h2>Create Your Eversync Account</h2>
            
            {% if form.errors %}
                <div class="error-message">
                    <ul>
                        {% for field in form %}
                            {% for error in field.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        {% endfor %}
                        {% for error in form.non_field_errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                        </ul>
                </div>
            {% endif %}

            <form method="post" class="form-with-validation" action="/register/">
                {% csrf_token %}
                
                <div class="form-group">
                    {{ form.username.label_tag }}
                    {{ form.username }}
                </div>

                <div class="form-group">
                    {{ form.password1.label_tag }}
                    {{ form.password1 }}
                </div>
                <div class="form-group">
                    {{ form.password2.label_tag }}
                    {{ form.password2 }}
                </div>
            
                <input type="submit" value="Register" class="register-button">
                
                <div class="divider"></div>

                <p style="text-align: center; margin-left: 4px;">Already have an account? <a href="{% url 'login' %}" style="text-decoration: none;" class="login-link">Log In</a></p>
            </form>
        </div>
    </div>
</body>
</html>