{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Depot Management System</title>
    <link rel="stylesheet" href="{% static '/styles/styles.css' %}"/>
</head>
<body>
    <div class="background-image"></div>
    <div class="wave"></div>

    <div class="login-container">
        <!-- Left side - Login Form -->
        <div class="login-form-section">
            <div>
                <h1>Container Depot</h1>
                <p class="subtitle">Sign in to access the management system</p>
            </div>

            <form id="loginForm" method="post" action="{% url 'login' %}"
>
               {% csrf_token %}
               {{ form }}
                <div>
                    <button type="submit" class="submit-button" >
                        Sign In
                    </button>
                </div>
                

            </form>

            <div>
                <p>Need help? Contact system administrator</p>
            </div>
        </div>

        <!-- Right side - Info -->
        <div class="info-section">
            <div>
                <h2>Container Depot Management System</h2>

                <div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                            </svg>
                        </div>
                        <div>
                            <h3>Line Operators</h3>
                            <p class="feature-text">Manage container preinfo and expedition orders</p>
                        </div>
                    </div>

                    <div class="feature-item">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                        </div>
                        <div>
                            <h3>Barrier Staff</h3>
                            <p class="feature-text">Process container arrivals and departures</p>
                        </div>
                    </div>

                    <div class="feature-item">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                        </div>
                        <div>
                            <h3>Depot Management</h3>
                            <p class="feature-text">View inventory and generate reports</p>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="version-info">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                    </svg>
                    <span>Version 1.0.0</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>