{% load socialaccount %}\n{% get_providers as socialaccount_providers %}\n<!-- Login Modal -->\n<div id=\"login-modal\" uk-modal>\n <div class=\"uk-modal-dialog custom-modal uk-padding\">\n <button class=\"uk-modal-close-default uk-close-large uk-padding-small\" type=\"button\" uk-close aria-label=\"Close\">\n </button>\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <h2 class=\"uk-text-large uk-text-bold\">Log in to Readux</h2>\n </div>\n <!-- Modal Content -->\n <div class=\"sso-text color-black uk-text-medium\">Login via one of the following services:</div>\n <!-- SSO Buttons -->\n <div class=\"sso-buttons\">\n {% for provider in socialaccount_providers %}\n {% if provider.id not in user.socialaccount_list or user.is_anonymous %}\n <form action=\"{% provider_login_url provider.id next=request.path process=\"login\" %}\" method=\"post\">\n {% csrf_token %}\n <button class=\"uk-button sso-button sso-button--{{ provider.id }}\" type=\"submit\">\n <span uk-icon=\"{{ provider.id }}\" class=\"sso-button__icon\"></span>\n <span>Continue with {{ provider.name }}</span>\n </button>\n </form>\n {% elif provider.id not in user.socialaccount_list and user.is_authenticated %}\n <form action=\"{% provider_login_url provider.id next=request.path process=\"connect\" %}\" method=\"post\">\n {% csrf_token %}\n <button class=\"uk-button sso-button sso-button--{{ provider.id }}\" type=\"submit\">\n <span uk-icon=\"{{ provider.id }}\" class=\"sso-button__icon\"></span>\n <span>Continue with {{ provider.name }}</span>\n </button>\n </form>\n {% endif %}\n {% endfor %}\n </div>\n <!-- Divider -->\n <hr class=\"uk-divider-icon uk-margin-top\">\n <p class=\"uk-text-center uk-text-muted uk-text-small uk-margin-small-bottom\">Or sign in with your local account:</p>\n <!-- Local Login Form -->\n <form class=\"uk-form-stacked\" method=\"POST\" action=\"{% url 'account_login' %}\">\n {% csrf_token %}\n <input type=\"hidden\" name=\"next\" value=\"{{ request.path }}\" />\n <div class=\"uk-margin-small\">\n <label class=\"uk-form-label\" for=\"modal-login-username\">Username</label>\n <input id=\"modal-login-username\" name=\"login\" type=\"text\" class=\"uk-input\" placeholder=\"Username\" autocomplete=\"username\" required />\n </div>\n <div class=\"uk-margin-small\">\n <label class=\"uk-form-label\" for=\"modal-login-password\">Password</label>\n <input id=\"modal-login-password\" name=\"password\" type=\"password\" class=\"uk-input\" placeholder=\"Password\" autocomplete=\"current-password\" required />\n </div>\n <div class=\"uk-flex uk-flex-between uk-flex-middle uk-margin-small-top\">\n <label class=\"uk-flex uk-flex-middle\" style=\"gap: 0.4rem; font-size: 0.875rem;\">\n <input type=\"checkbox\" name=\"remember\" class=\"uk-checkbox\" />\n <span>Remember me</span>\n </label>\n <a href=\"{% url 'account_reset_password' %}\" class=\"uk-text-small uk-link-muted\">Forgot password?</a>\n </div>\n <button class=\"uk-button uk-width-1-1 uk-margin-small-top\" style=\"background-color:#1D3557;color:#fff;border:none;\" type=\"submit\">Sign In</button>\n </form>\n <!-- Help Link -->\n <div class=\"uk-text-center uk-margin-top\">\n Need help? <a href=\"#\" class=\"text-anchor-blue\">Contact us</a>\n </div>\n </div>\n</div>\n