{% extends 'base.html' %}
{% load socialaccount %}
{% block title %}Login — Chiez Stores{% endblock %}

{% block extra_css %}
<style>
    .google-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 12px 20px;
        margin-top: 14px;
        border: 1.5px solid #dadce0;
        border-radius: 6px;
        background: #fff;
        color: #3c4043;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .google-btn:hover {
        background: #f8f9fa;
        border-color: #c6c6c6;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .google-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .google-btn svg {
        flex-shrink: 0;
    }

    .auth-page {
        min-height: calc(100vh - 140px);
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--cream) 0%, #e8ddd0 100%);
        padding: 40px 20px;
    }

    .auth-card {
        background: var(--white);
        border-radius: 6px;
        box-shadow: var(--shadow-lg);
        padding: 50px;
        width: 100%;
        max-width: 440px;
    }

    .auth-logo {
        font-family: var(--font-display);
        font-size: 2rem;
        letter-spacing: 0.15em;
        text-align: center;
        margin-bottom: 6px;
    }

    .auth-logo span {
        color: var(--gold);
    }

    .auth-subtitle {
        text-align: center;
        font-size: 13px;
        color: var(--warm-gray);
        margin-bottom: 36px;
    }

    .auth-title {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 300;
        text-align: center;
        margin-bottom: 28px;
    }

    .auth-divider {
        text-align: center;
        margin: 20px 0;
        position: relative;
    }

    .auth-divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--light-gray);
    }

    .auth-divider span {
        background: var(--white);
        padding: 0 12px;
        font-size: 12px;
        color: var(--mid-gray);
        position: relative;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .auth-footer {
        text-align: center;
        margin-top: 24px;
        font-size: 13px;
        color: var(--warm-gray);
    }

    .auth-footer a {
        color: var(--gold);
        font-weight: 500;
    }

    .form-control.is-invalid {
        border-color: #c0392b;
    }

    .field-error {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 5px;
        font-size: 12px;
        color: #c0392b;
        line-height: 1.4;
    }

    .field-error::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #c0392b;
        flex-shrink: 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="auth-card">
        <div class="auth-logo">Chiez<span>.</span></div>
        <div class="auth-subtitle">Welcome back</div>
        <div class="auth-title">Sign In</div>

        <form method="POST">
            {% csrf_token %}
            {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}

            <div class="form-group">
                <label class="form-label">Username or Email</label>
                <input type="text" name="username"
                       class="form-control {% if errors.username %}is-invalid{% endif %}"
                       placeholder="Enter username or email"
                       value="{{ form_data.username|default:'' }}"
                       autofocus>
                {% if errors.username %}
                    <span class="field-error">{{ errors.username }}</span>
                {% endif %}
            </div>

            <div class="form-group">
                <label class="form-label" style="display:flex;justify-content:space-between">
                    Password
                    <a href="{% url 'users:forgot_password' %}" style="color:var(--gold);font-size:11px">Forgot Password?</a>
                </label>
                <div style="position:relative">
                    <input type="password" name="password" id="passwordInput"
                           class="form-control {% if errors.password %}is-invalid{% endif %}"
                           placeholder="Enter your password"
                           style="padding-right:44px">
                    <button type="button" onclick="togglePwd()"
                            style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--warm-gray);font-size:14px">
                        <i class="fas fa-eye" id="eyeIcon"></i>
                    </button>
                </div>
                {% if errors.password %}
                    <span class="field-error">{{ errors.password }}</span>
                {% endif %}
            </div>

            <button type="submit" class="btn btn-primary btn-full btn-lg" style="margin-top:8px">Sign In</button>
        </form>

        <div class="auth-divider"><span>or</span></div>

        <a href="{% url 'users:google_auth' %}" class="google-btn" id="googleSignInBtn">
            <svg width="18" height="18" viewBox="0 0 48 48">
                <path fill="#EA4335"
                    d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
                <path fill="#4285F4"
                    d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
                <path fill="#FBBC05"
                    d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
                <path fill="#34A853"
                    d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
            </svg>
            <span id="googleBtnText">Continue with Google</span>
        </a>

        <div class="auth-footer">
            Don't have an account? <a href="{% url 'users:register' %}">Create one →</a>
        </div>

        <div style="margin-top:30px;padding:16px;background:var(--cream);border-radius:4px;font-size:12px;color:var(--warm-gray);text-align:center">
            <i class="fas fa-shield-alt" style="color:var(--gold)"></i>
            Your information is safe and secure with us.
        </div>

    </div>
</div>
{% endblock %}


{% block extra_js %}
<script src="https://accounts.google.com/gsi/client" async></script>


<script>
    function togglePwd() {
        const input = document.getElementById('passwordInput');
        const icon  = document.getElementById('eyeIcon');
        input.type  = input.type === 'password' ? 'text' : 'password';
        icon.className = input.type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
    }
</script>
{% endblock %}