{% if google_client_id %}
<div style="display: flex; align-items: center; gap: 10px; margin: 18px 0;">
    <hr style="flex: 1; border: none; border-top: 1px solid var(--border, #ddd);">
    <span style="color: var(--muted); font-size: 0.85rem;">{{ t.auth_or_divider }}</span>
    <hr style="flex: 1; border: none; border-top: 1px solid var(--border, #ddd);">
</div>

<div id="g_id_onload"
     data-client_id="{{ google_client_id }}"
     data-callback="handleGoogleCredentialResponse"
     data-auto_prompt="false">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left"
     data-width="320"
     style="display: flex; justify-content: center; margin-bottom: 6px;">
</div>
<p id="google-signin-error" class="field-error" style="display: none; text-align: center;"></p>

<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
    function handleGoogleCredentialResponse(response) {
        var errEl = document.getElementById('google-signin-error');
        function getCsrfToken() {
            var match = document.cookie.match(/csrftoken=([^;]+)/);
            return match ? match[1] : '';
        }
        var body = new URLSearchParams();
        body.set('credential', response.credential);
        fetch('{% url "accounts:google_signin" %}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRFToken': getCsrfToken() },
            body: body.toString(),
        })
            .then(function (r) { return r.json().then(function (data) { return { ok: r.ok, data: data }; }); })
            .then(function (result) {
                if (result.ok && result.data.redirect) {
                    window.location.href = result.data.redirect;
                } else if (errEl) {
                    errEl.textContent = '{{ t.auth_google_signin_failed|escapejs }}';
                    errEl.style.display = 'block';
                }
            })
            .catch(function () {
                if (errEl) {
                    errEl.textContent = '{{ t.auth_google_signin_failed|escapejs }}';
                    errEl.style.display = 'block';
                }
            });
    }
</script>
{% endif %}