
<div class="" id="sms-verification-form">

{%  if error %}
<div class="bg-red-50 border border-red-200 text-red-700 rounded-lg p-4 mb-2">
  <p class="text-sm">{{ error }}</p>
</div>
{% endif %}

  <!-- heading -->
<div>
  {% csrf_token %}
  {% if not phone %}
    <div>
      <div class="flex items-center space-x-3">
        <div class="relative flex-1">
          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <i aria-hidden="true" data-lucide="mail" class="w-4 h-4 text-gray-400"></i>
          </div>
          {{ add_form.phone_number }}
          {{ add_form.phone_number_hidden }}
        </div>
        <div class="flex-[0_0_30%]">
          <button
            type="button"                     {# ⭐ not "submit" #}
            hx-post="{{ post_url }}"
            hx-target="#sms-verification-form"            {# swap just the widget #}
            hx-swap="outerHTML"
            hx-indicator="#add-phone-spinner"
            hx-include="#sms-verification-form"
            class="w-full whitespace-nowrap inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-md"
          >
            Send Code
          </button>
        </div>
      </div>
    </div>
    
       <p class="text-xs text-gray-500 mt-2">Once created, your agent will contact you at this number.</p>
  {% elif not phone.is_verified %}
    {# ---------- existing number but not verified card ---------- #}
    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
      {# keep most of your markup intact #}
      {% if not phone.is_verified %}
          {{ verify_form.phone_number }}
          {{ verify_form.verification_code.label_tag }}
          {{ verify_form.verification_code }}
          <div class="mt-2 flex items-center gap-3">
            <button
                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md"
                type="button"
                hx-post="{{ post_url }}"
                hx-target="#sms-verification-form"
                hx-swap="outerHTML"
                hx-indicator="#verify-phone-spinner"
                hx-include="#sms-verification-form"
            >
              Verify
            </button>

            <button
                id="resend-code-btn"
                type="button"
                class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
                hx-post="{{ post_url }}"
                hx-target="#sms-verification-form"
                hx-swap="outerHTML"
                hx-include="#sms-verification-form"
                hx-vals='{"resend_code": "1"}'
                {% if cooldown_remaining and cooldown_remaining > 0 %}disabled{% endif %}
            >
              {% if cooldown_remaining and cooldown_remaining > 0 %}
                  Resend in <span id="resend-timer" data-remaining="{{ cooldown_remaining }}">{{ cooldown_remaining }}</span>s
              {% else %}
                Resend code
              {% endif %}
            </button>

            {# Allow user to cancel verification and change number #}
            <button
                type="button"
                class="px-4 py-2 bg-red-50 text-red-700 border border-red-200 rounded-md hover:bg-red-100"
                hx-post="{{ post_url }}"
                hx-target="#sms-verification-form"
                hx-swap="outerHTML"
                hx-include="#sms-verification-form"
                hx-vals='{"delete_phone": "1"}'
            >
              Cancel
            </button>
          </div>
      {% endif %}
    </div>
  {% else %}
    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <div class="flex-shrink-0">
              <i aria-hidden="true" data-lucide="phone" class="h-5 w-5 text-gray-400"></i>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900 phone-number-static phone-number-to-format">{{ phone.phone_number }}</p>
              <p class="text-xs text-green-600">✓ Verified on {{ phone.verified_at|date:"M d, Y" }}</p>
            </div>
          </div>
          <div class="flex items-center space-x-1">
            <input type="hidden" name="delete_phone" value="1">
            <button
              type="button"                     {# ⭐ not “submit” #}
              hx-post="{{ post_url }}"
              hx-target="#sms-verification-form"            {# swap just the widget #}
              hx-swap="outerHTML"
              hx-indicator="#delete-phone-spinner"
              hx-include="#sms-verification-form"
              class="inline-flex items-center px-3 py-1.5 text-xs font-semibold
                     text-white bg-red-600 rounded hover:bg-red-700"
            >
              Delete
            </button>
          </div>
        </div>
    </div>
  {% endif %}
</div>

</div>

<!-- note you need to include the sms forms js in your base template, if we did it here, it'd try to reload on htmx swap -->
