{% load i18n socialaccount %}
{% if providers %}
  {% providers_media_js %}
  <div class="mt-6 space-y-3">
    {% for provider in providers %}
      {% if social_next_url %}
        {% provider_login_url provider.id next=social_next_url as social_login_url %}
      {% else %}
        {% provider_login_url provider.id as social_login_url %}
      {% endif %}
      <a href="{{ social_login_url }}"
         aria-label="{{ action_text }} with {{ provider.label }}"
         data-social-provider="{{ provider.id }}"
         data-social-surface="{{ surface }}"
         data-analytics-cta-id="auth_{{ surface }}_social_{{ provider.analytics_label }}"
         data-analytics-placement="auth_{{ surface }}"
         data-analytics-intent="social_auth"
         data-analytics-auth-provider="{{ provider.id }}"
         data-analytics-auth-surface="{{ surface }}"
         {% if social_popup_mode %}data-auth-social-popup="true"{% endif %}
         {% if social_next_url %}data-auth-popup-complete-url="{{ social_next_url }}"{% endif %}
         {% if surface == "login" %}data-social-auth-link{% else %}data-social-signup-link{% endif %}
         class="w-full inline-flex justify-center items-center gap-x-2 rounded-lg border border-gray-200 bg-white text-gray-800 text-sm font-medium py-3 shadow-2xs hover:bg-gray-50">
        {% if provider.id == "linkedin" %}
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.94 8.5H3.56V20H6.94V8.5Z" fill="#0A66C2"/>
            <path d="M5.25 7.03C6.4 7.03 7.34 6.09 7.34 4.93C7.34 3.77 6.4 2.84 5.25 2.84C4.09 2.84 3.16 3.77 3.16 4.93C3.16 6.09 4.09 7.03 5.25 7.03Z" fill="#0A66C2"/>
            <path d="M20.84 20V13.74C20.84 10.39 19.05 8.83 16.66 8.83C14.72 8.83 13.85 9.89 13.36 10.64V8.5H9.98C10.03 9.92 9.98 20 9.98 20H13.36V13.58C13.36 13.23 13.39 12.88 13.48 12.63C13.76 11.93 14.4 11.2 15.46 11.2C16.86 11.2 17.43 12.26 17.43 13.81V20H20.84Z" fill="#0A66C2"/>
          </svg>
        {% elif provider.id == "microsoft" %}
          <svg class="w-4 h-4" viewBox="0 0 21 21" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 1H10V10H1V1Z" fill="#F25022"/>
            <path d="M11 1H20V10H11V1Z" fill="#7FBA00"/>
            <path d="M1 11H10V20H1V11Z" fill="#00A4EF"/>
            <path d="M11 11H20V20H11V11Z" fill="#FFB900"/>
          </svg>
        {% elif provider.id == "google" %}
          <svg class="w-4 h-4" viewBox="0 0 46 47" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
            <path d="M45.5 24.0146C45.5 22.2076 45.3525 20.8125 45.0241 19.3906H23.4648V28.4649H35.7291C35.4886 30.4614 34.1641 33.5183 31.2241 35.5358L31.1821 35.8129L38.0279 41.1813L38.5072 41.2285C42.5569 37.4992 45.5 31.4204 45.5 24.0146Z" fill="#4285F4"/>
            <path d="M23.4648 46.999C29.7679 46.999 34.8626 45.0039 38.5072 41.2285L31.2241 35.5358C29.3525 36.8544 26.8318 37.7123 23.4648 37.7123C17.3026 37.7123 12.0849 33.9831 10.2357 28.645L9.97733 28.6661L2.91761 34.1784L2.82373 34.4375C6.44344 41.999 14.3474 46.999 23.4648 46.999Z" fill="#34A853"/>
            <path d="M10.2357 28.645C9.74903 27.2087 9.46551 25.6693 9.46551 24.0948C9.46551 22.5203 9.74903 20.9809 10.2129 19.5446L10.2002 19.2542L3.02785 13.625L2.82373 13.7528C1.21902 16.9232 0.25 20.4085 0.25 24.0948C0.25 27.7811 1.21902 31.2664 2.82373 34.4368L10.2357 28.645Z" fill="#FBBC05"/>
            <path d="M23.4648 9.50305C27.7704 9.50305 30.5803 11.3591 32.2598 12.8985L38.6524 6.73554C34.8424 3.32286 29.7679 1.19092 23.4648 1.19092C14.3474 1.19092 6.44344 6.19094 2.82373 13.7524L10.2129 19.5442C12.0849 14.2058 17.3026 9.50305 23.4648 9.50305Z" fill="#EB4335"/>
          </svg>
        {% elif provider.id == "facebook" %}
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 12.07C24 5.4 18.63 0 12 0C5.37 0 0 5.4 0 12.07C0 18.1 4.39 23.09 10.12 24V15.56H7.08V12.07H10.12V9.41C10.12 6.39 11.91 4.72 14.66 4.72C15.98 4.72 17.36 4.96 17.36 4.96V7.93H15.84C14.34 7.93 13.88 8.87 13.88 9.83V12.07H17.22L16.69 15.56H13.88V24C19.61 23.09 24 18.1 24 12.07Z" fill="#1877F2"/>
            <path d="M16.69 15.56L17.22 12.07H13.88V9.83C13.88 8.87 14.34 7.93 15.84 7.93H17.36V4.96C17.36 4.96 15.98 4.72 14.66 4.72C11.91 4.72 10.12 6.39 10.12 9.41V12.07H7.08V15.56H10.12V24C10.73 24.09 11.36 24.14 12 24.14C12.64 24.14 13.27 24.09 13.88 24V15.56H16.69Z" fill="white"/>
          </svg>
        {% endif %}
        {{ action_text }} with {{ provider.label }}
      </a>
    {% endfor %}
  </div>
  {% if show_password_divider %}
    <div class="my-6 flex items-center text-xs text-gray-400 uppercase before:flex-1 before:border-t before:border-gray-200 before:me-6 after:flex-1 after:border-t after:border-gray-200 after:ms-6">{{ divider_text }}</div>
  {% endif %}
{% endif %}