{% extends "base.html" %}
{% block title %}
    Login
{% endblock title %}
{% block content %}
    <h4 id="page-title">Login</h4>
    {% if form.errors %}
        <ul id="error-list">
            {% for field, errors in form.errors.items %}
                {% for error in errors %}<li>{{ error }}</li>{% endfor %}
            {% endfor %}
        </ul>
    {% endif %}
    <form id="login-form" method="post">
        {% csrf_token %}
        <label for="{{ form.username.id_for_label }}">Username</label>
        <input type="text"
               name="username"
               id="{{ form.username.id_for_label }}"
               value="{{ form.username.value|default:'' }}"
               required>
        <label for="{{ form.password.id_for_label }}">Password</label>
        <input type="password"
               name="password"
               id="{{ form.password.id_for_label }}"
               required>
        <button id="login-button" type="submit">Login</button>
    </form>
    <p>
        Don't have an account? <a id="signup-link" href="{% url 'accounts:signup' %}">Sign up here</a>
    </p>
    <style>
    .form-control {
        border-left: none;
    }

    .input-group-text {
        background-color: #f8f9fa;
        border-right: none;
    }
    </style>
{% endblock content %}