{% if USE_SOCIAL %}
{% load socialaccount %}

  <div class="flex justify-evenly space-x-2 w-64 md:w-80 mt-3 mb-3">
    <span class="bg-gray-300 h-px flex-grow t-2 relative top-2"></span>
    <span class="flex-none uppercase text-xs text-gray-400 font-semibold">or</span>
    <span class="bg-gray-300 h-px flex-grow t-2 relative top-2"></span>
  </div>

  {% for provider in ENABLED_PROVIDERS %}
    {% if provider == "google" %}
      <a href="{% provider_login_url 'google' %}" 
         class="btn bg-white text-black border border-gray-300 w-64 md:w-80 flex items-center justify-center gap-2 mb-4">
        <!-- Google SVG -->
        <svg aria-label="Google logo" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <g>
                <path d="m0 0H512V512H0" fill="#fff"></path>
                <path fill="#34a853" d="M153 292c30 82 118 95 171 60h62v48A192 192 0 0190 341"></path>
                <path fill="#4285f4" d="m386 400a140 175 0 0053-179H260v74h102q-7 37-38 57"></path>
                <path fill="#fbbc02" d="m90 341a208 200 0 010-171l63 49q-12 37 0 73"></path>
                <path fill="#ea4335" d="m153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55"></path>
            </g>
        </svg>
        Continue with Google
      </a>
    {% elif provider == "github" %}
      <a href="{% provider_login_url 'github' %}" 
         class="btn bg-black text-white border-black w-64 md:w-80 flex items-center justify-center gap-2 mb-4">
        <!-- GitHub SVG -->
        <svg aria-label="GitHub logo" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="white" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 
            9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,
            16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,
            17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 
            6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 
            14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,
            11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,
            21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"></path>
        </svg>
        Continue with GitHub
      </a>
    {% elif provider == "discord" %}
      <a href="{% provider_login_url 'discord' %}" 
         class="btn bg-indigo-600 text-white w-64 md:w-80 flex items-center justify-center gap-2">
        <!-- Discord SVG -->
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
             viewBox="0 0 24 24"> … </svg>
        Continue with Discord
      </a>
    {% elif provider == "twitter" %}
      <a href="{% provider_login_url 'twitter' %}"
        class="btn bg-black text-white border-black">
        <svg aria-label="X logo" width="16" height="12" viewBox="0 0 300 271" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"/></svg>
        Continue with X
    </a>
    {% endif %}
  {% endfor %}
{% endif %}