{% extends "base.html" %}
{% block content %}
<div id="page-data"
     data-url-deploy-begin="{{ url_for('deploy_begin', _external=True, _scheme='https') }}"
     data-url-deploy-verify="{{ url_for('deploy_verify', _external=True, _scheme='https') }}"
     data-url-fido2-register-begin="{{ url_for('fido2_register_begin', _external=True, _scheme='https') }}"
     data-url-fido2-register-complete="{{ url_for('fido2_register_complete', _external=True, _scheme='https') }}"></div>
<div class="login-wrapper">
  <div class="deploy-card">
    <h1>Token Enrollment</h1>
    {% if not deploy_optional %}
    <p class="deploy-desc">Your account requires a new authentication token.</p>
    {% endif %}

    <!-- Step 1: Choose token type and start -->
    <div id="step-start">
      {% if deploy_token_types|length > 1 %}
      <p class="deploy-hint" style="margin-bottom:14px;">Choose your preferred authentication method:</p>
      <div class="token-choice">
        {% for tt in deploy_token_types %}
        <button type="button" class="btn btn-secondary token-choice-btn" data-token-type="{{ tt }}" id="btn-{{ tt }}">
          {% if tt == "totp" %}
          Authenticator App (TOTP)
          {% elif tt == "fido2" %}
          Security Key (FIDO2)
          {% else %}
          {{ tt|upper }}
          {% endif %}
        </button>
        {% endfor %}
      </div>
      {% else %}
      <button type="button" id="deployBtn" data-token-type="{{ deploy_token_types[0] }}" class="btn btn-primary" style="width:100%;">
        {% if deploy_token_types[0] == "fido2" %}
        Register Security Key
        {% else %}
        Set Up Authenticator App
        {% endif %}
      </button>
      {% endif %}
    </div>

    <!-- Step 2a: QR code for OATH tokens -->
    <div id="step-qrcode" style="display:none;">
      <div class="qr-container"><img id="qrcodeImg" src="" alt="QR Code" style="image-rendering:pixelated;"></div>
      <div class="deploy-info">
        <div class="info-row">
          <span class="info-label">PIN:</span>
          <code class="info-value" id="pinDisplay"></code>
        </div>
        <div class="info-row">
          <span class="info-label">Secret:</span>
          <code class="info-value info-secret" id="secretDisplay"></code>
        </div>
      </div>
      <p class="deploy-hint">Scan the QR code with your authenticator app (e.g. Google Authenticator, Authy). Then enter the OTP shown in your app to verify.</p>

      <label for="otpInput">One-Time Password</label>
      <input type="text" id="otpInput" maxlength="10" autocomplete="one-time-code" placeholder="Enter OTP from app">
      <button type="button" id="verifyBtn" class="btn btn-primary" style="width:100%;">Verify &amp; Activate</button>
    </div>

    <div class="status-msg" id="deployStatus"></div>
    <div class="error-msg" id="deployError"></div>
  </div>
</div>

<script src="{{ url_for('static', filename='deploy.js') }}"></script>
{% endblock %}