{% extends 'base.html' %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

{% block content %}
    <div class="vh-100 d-flex justify-content-center align-items-center p-5" id="login-content">
        <div class="col-md-5 p-5 shadow-sm border rounded-5 border-primary bg-white">
           
            <div class="social-login">
                <a href="{% url 'social:begin' 'google-oauth2' %}" class="social-login-link" data-tooltip="Login with Google">
                    Login with <i class="fab fa-google social-login-icon"></i>oogle
                </a>
                <a href="{% url 'social:begin' 'linkedin-oauth2' %}" class="social-login-link" data-tooltip="Login with LinkedIn">
                    Login with Linked<i class="fab fa-linkedin-in social-login-icon"></i>
                </a>
                <a href="{% url 'social:begin' 'facebook' %}" class="social-login-link" data-tooltip="Login with Facebook">
                    Login with <i class="fab fa-facebook-f social-login-icon"></i>acebook
                </a>
                
            </div>
            <h2 class="text-center mb-4 text-primary">Login</h2>
            {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                        <div {% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
            <form action="" method="post">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input type="text" class="form-control border border-primary" id="username"
                           aria-describedby="username" name="username" placeholder="Enter Username" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control border border-primary" name="password"
                           placeholder="Password" required>
                </div>
                <div class="d-grid">
                    <button class="btn btn-primary" type="submit">Login</button>
                </div>
            </form>
            <div class="mt-3">
                <p class="mb-0  text-center">Don't have an account? <a href="{% url 'accounts:register' %}"
                                                                       class="text-primary fw-bold">Sign
                    Up</a></p>
            </div>
        </div>
    </div>
{% endblock %}