{% if not islogged %}
    <div  id="d_social_login" class="d-social-login d-social-login--{{ size }}">
        <style>
            {% for provider in providers %}
            .d-social-login__button--{{ provider['id'] }} {
                background-color: {{ provider['background_color'] }}
            }

            .d-social-login__button--{{ provider['id'] }}:hover {
                background-color: {{ provider['background_color_hover'] }}
            }

            .d-social-login__button--{{ provider['id'] }}:active {
                background-color: {{ provider['background_color_active'] }}
            }

            {% endfor %}
        </style>

        {% if (error) %}
            <div class="alert alert-warning">{{ error }}</div>
        {% endif %}

        <div class="d-social-login__button-list">
            {% if title%}
                <span class="d-social-login__label">{{ title }}</span>
            {% endif %}
            {% for key,provider in providers %}
                {% if (provider['enabled']) %}
                    <a class="d-social-login__button d-social-login__button--{{ provider['id'] }}"
                       href="index.php?route=extension/module/d_social_login/login&provider={{ key }}">
                        <span class="d-social-login__button__icon">
                            <img src="{{ provider['icon'] }}" />
                            <div class="la-ball-clip-rotate d-social-login__button__icon__preloader"><div></div></div>
                        </span>
                        <span class="d-social-login__button__label">{{ title }}</span>
                    </a>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <script>
    $('#d_social_login').on('click', '.d-social-login__button', function(){
        $(this).addClass('d-social-login__button--loading');
    });
    </script>
{% endif %}
