{% extends 'base.html' %}
{% block title %}تأیید شماره موبایل{% endblock %}
{% block content %}
<div class="auth-wrapper">
  <div class="auth-card">
    <h2>تأیید <span>شماره موبایل</span></h2>
    <p style="color:var(--text-muted);">کد ۶ رقمی ارسال‌شده به {{ phone }} را وارد کنید.</p>
    <form method="post">
      {% csrf_token %}
      <div class="form-group">
        <label for="id_code">کد یک‌بارمصرف</label>
        <input id="id_code" name="code" class="form-control otp-input" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]{6}" autofocus required>
        {{ form.code.errors }}
      </div>
      <button class="btn-gold" type="submit" style="width:100%;justify-content:center;">ورود امن</button>
    </form>
    <form method="post" action="{% url 'courses:resend_otp' %}" class="resend-form">
      {% csrf_token %}
      <button id="resendButton" class="link-button" type="submit" disabled>ارسال دوباره کد <span id="resendTimer">۶۰</span></button>
    </form>
  </div>
</div>
{% endblock %}
{% block extra_js %}<script>let seconds=60;const timer=document.getElementById('resendTimer'),button=document.getElementById('resendButton');const tick=setInterval(()=>{seconds--;timer.textContent=new Intl.NumberFormat('fa-IR').format(seconds);if(seconds<=0){clearInterval(tick);timer.textContent='';button.disabled=false}},1000)</script>{% endblock %}