{% extends 'base.html' %}
{% block title %}Verification Fields — Avighna{% endblock %}

{% block content %}

<div style="max-width:620px;margin:0 auto;">

  <div class="mb-4">
    <h4 style="font-weight:700;">✅ Choose What to Verify</h4>
    <p style="color:#666;font-size:.92rem;">
      Select which details you want to collect from a visitor's Aadhaar during verification.
      Only checked fields will be requested from UIDAI and saved to your visitor records.
    </p>
  </div>

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %} mb-3">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}

  <div class="card" style="border-radius:16px;border:none;box-shadow:0 4px 20px rgba(0,0,0,.08);">
    <div style="padding:28px;">

      <form method="POST" action="/verification-fields/">
        {% csrf_token %}

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:24px;">
          {% for field in field_options %}
          <label style="display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #eef0f4;border-radius:10px;cursor:pointer;">
            <input type="checkbox" name="fields" value="{{ field.key }}"
                   {% if field.checked %}checked{% endif %}
                   style="width:18px;height:18px;">
            <span style="font-size:.9rem;color:#333;">{{ field.label }}</span>
          </label>
          {% endfor %}
        </div>

        <small style="color:#888;font-size:.78rem;display:block;margin-bottom:18px;">
          At least Full Name is recommended. You can change this anytime from Settings.
        </small>

        <button type="submit" class="btn-primary-main w-100" style="justify-content:center;border-radius:30px;padding:13px;">
          💾 Save & Continue
        </button>
      </form>

    </div>
  </div>

  <div class="text-center mt-3">
    <a href="/dashboard/" class="btn-outline">← Go to Dashboard</a>
  </div>

</div>

{% endblock %}