{% extends 'accounts/onboarding/base.html' %}
{% load static %}

{% block onboarding_content %}
<!-- Header -->
<div class="mb-8">
  <h1 class="text-3xl font-bold text-white mb-4">Personal Information</h1>
  
  <!-- Progress Bar -->
  <div class="flex items-center justify-between mb-6">
    <div class="progress-bar">
      <div class="progress-fill" style="width: {{ progress.progress_percentage }}%"></div>
    </div>
    <span class="text-sm text-slate-400 ml-4">{{ progress.progress_percentage }}%</span>
  </div>
  
  <!-- Info Banner -->
  <div class="flex items-center gap-3 p-4 bg-blue-500/10 border border-blue-500/20 rounded-xl mb-6">
    <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
      <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <p class="text-blue-400 text-sm">
      In order to start trading, you must first complete your profile.
    </p>
  </div>
</div>

<!-- Form -->
<form method="post" class="space-y-6">
  {% csrf_token %}
  
  <!-- Client Declaration -->
  <div class="bg-slate-800/30 border border-slate-700/50 rounded-xl p-6">
    <h3 class="text-lg font-semibold text-white mb-4">Client Declaration</h3>
    
    <div class="space-y-4">
      <p class="text-slate-300 leading-relaxed">
        By pressing the 'SUBMIT' button below, I hereby confirm and acknowledge that the information provided above is true and accurate, and I further confirm and acknowledge that <span class="text-amber-400 font-semibold">TRADEMONT</span> will rely on this information in the opening of my trading account.
      </p>
      
      <div class="flex items-start gap-3">
        <div class="flex items-center h-6">
          {{ form.declaration_accepted }}
        </div>
        <label for="{{ form.declaration_accepted.id_for_label }}" class="text-slate-300 text-sm leading-relaxed cursor-pointer">
          I agree to the terms and conditions and confirm that all information provided is accurate.
        </label>
      </div>
      
      {% if form.declaration_accepted.errors %}
        <div class="text-red-400 text-sm">{{ form.declaration_accepted.errors.0 }}</div>
      {% endif %}
    </div>
  </div>
  
  <!-- Additional Terms -->
  <div class="bg-slate-800/20 border border-slate-700/30 rounded-xl p-6">
    <h4 class="text-md font-semibold text-white mb-3">Important Information</h4>
    <ul class="space-y-2 text-sm text-slate-300">
      <li class="flex items-start gap-2">
        <svg class="w-4 h-4 text-amber-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        <span>Your information is encrypted and stored securely</span>
      </li>
      <li class="flex items-start gap-2">
        <svg class="w-4 h-4 text-amber-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        <span>We comply with international financial regulations</span>
      </li>
      <li class="flex items-start gap-2">
        <svg class="w-4 h-4 text-amber-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        <span>You can update your information anytime in settings</span>
      </li>
    </ul>
  </div>
  
  <!-- Navigation Buttons -->
  <div class="flex justify-between pt-8 border-t border-slate-700/50">
    <a href="{% url 'accounts:onboarding_previous' step='client_declaration' %}" class="px-6 py-3 bg-slate-800 border border-slate-700 text-white rounded-xl hover:bg-slate-700 transition-all duration-200">
      Back
    </a>
    <button type="submit" class="px-8 py-3 bg-gradient-to-r from-amber-500 to-blue-500 text-white rounded-xl hover:from-amber-600 hover:to-blue-600 transition-all duration-200 font-semibold">
      Submit
    </button>
  </div>
</form>
{% endblock %}