{% macro recaptcha(captcha_required, scale1, scale2) %}
    {% if captcha_required %}
        <style type="text/css">
            .captcha-error {
                font-weight: bold;
                color: darkred;
                padding: 3px 0 10px;
            }
            @media screen and (max-width: 420px) {
                #rc-imageselect, .g-recaptcha {
                    transform: scale({{ scale1 }});
                    -webkit-transform: scale({{ scale1 }});
                    transform-origin: 0 0;
                    -webkit-transform-origin: 0 0;
                }
            }
            @media screen and (max-width: 360px) {
                #rc-imageselect, .g-recaptcha {
                    transform: scale({{ scale2 }});
                    -webkit-transform: scale({{ scale2 }});
                    transform-origin: 0 0;
                    -webkit-transform-origin: 0 0;
                }
            }
            .g-recaptcha {
                margin: 0 auto;
                width: 304px;
            }
        </style>
        {% for flashMessage in app.session.flashbag.get('error') %}
            <div class="captcha-error">{{ flashMessage|trans }}</div>
        {% endfor %}
        <div class="g-recaptcha" data-sitekey="{{ recaptcha_public }}"></div>
        <script src="https://www.google.com/recaptcha/api.js"></script>
    {% endif %}
{% endmacro %}