{% extends "esign/base.html" %}
{% block content %}

<!-- Modal Trigger (Hidden, auto open) -->
<button type="button" class="btn btn-primary d-none" id="openTokenModal" data-bs-toggle="modal" data-bs-target="#tokenModal">
  Open Modal
</button>

<!-- Security Token Modal -->
<div class="modal fade" id="tokenModal" tabindex="-1" aria-labelledby="tokenModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="tokenModalLabel">Enter Security Token</h5>
      </div>
      <div class="modal-body">
        
        {% if error %}
          <div class="alert alert-danger">{{ error }}</div>
        {% endif %}

        <form method="post">
          {% csrf_token %}
          <div class="mb-3">
            <label for="security_token" class="form-label">Security Token</label>
            <input type="password" class="form-control" id="security_token" name="security_token" required>
          </div>
          <button type="submit" class="btn btn-primary">Verify & Continue</button>
        </form>

      </div>
    </div>
  </div>
</div>

<script>
  // Page load hote hi modal khol do
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("openTokenModal").click();
  });
</script>

{% endblock %}