{% comment %}
Cotton Turnstile Widget Component
Converts existing Cloudflare Turnstile widget to use Django Cotton's component system
{% endcomment %}

<!-- Cotton Turnstile Widget Component -->
<c-vars
  site_key="site_key"
  widget_classes="widget_classes|default:'turnstile'"
  widget_id="widget_id|default:'turnstile-widget'"
  theme="theme|default:'auto'"
/>

<script
  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
  async
  defer
></script>

<div class="{{ widget_classes }}">
  <div
    id="{{ widget_id }}"
    class="cf-turnstile"
    data-sitekey="{{ site_key }}"
  ></div>
</div>

<script>
  // Apply theme to the Turnstile widget based on the retrieved theme
  document.addEventListener("DOMContentLoaded", function () {
    const turnstileWidget = document.getElementById("{{ widget_id }}");
    if (turnstileWidget) {
      turnstileWidget.setAttribute("data-theme", "{{ theme }}");
    }
  });
</script>