<!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="stylesheet" href="{% static 'login-style.css' %}" "></head>
    <link rel="icon" href="{% static 'favicon.ico' %}">
<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="login-box">
            <h2>Log In to Eversync</h2>
            
            {% if form.errors and form.non_field_errors %}
                <div class="error-message">
                    Your username and password didn't match. Please try again.
                </div>
            {% endif %}

            {% if next %}
                {% if user.is_authenticated %}
                    <div class="error-message">
                        Your account doesn't have access to this page. To proceed,
                        please login with an account that has access.
                    </div>
                {% else %}
                    <div class="error-message">
                        Please login to see this page.
                    </div>
                {% endif %}
            {% endif %}

            <form method="post" action="{% url 'login' %}">
                {% csrf_token %}
                <div class="form-group">
                    {{ form.login.label_tag }}
                    {{ form.login }}
                </div>
                <div class="form-group">
                    {{ form.password.label_tag }}
                    {{ form.password }}
                </div>
                <input type="submit" value="Log In" class="login-button">
                <input type="hidden" name="next" value="{{ next }}">

                <div class="divider"></div>

                <p style="text-align: center;">
                    Don't have an account?
                    <a href="{% url 'register' %}" class="create-account" style="margin-left: 4px; text-decoration: none;">Register</a>
                </p>                
        </div>
    </div>
</body>
</html> 