{% extends 'base.html' %}
{% load static %}

{% block title %}Setup Profile - Trademont{% endblock %}
{% block description %}Complete your profile setup to start trading with Trademont.{% endblock %}

{% block page_container_class %}w-full p-0{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
  <!-- Header -->
  <div class="bg-slate-900/95 backdrop-blur-xl border-b border-slate-800/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-gradient-to-r from-amber-400 to-orange-400 rounded-lg flex items-center justify-center">
            <svg class="w-5 h-5 text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
            </svg>
          </div>
          <span class="text-xl font-bold text-white">Trademont</span>
        </div>
        <div class="text-slate-400 text-sm">
          Step {{ progress.current_step|title }} of 4
        </div>
      </div>
    </div>
  </div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      
      <!-- Sidebar Navigation -->
      <div class="lg:col-span-1">
        <div class="glass-card p-6 rounded-2xl sticky top-24">
          <h2 class="text-lg font-semibold text-white mb-6">Setup profile</h2>
          
          <nav class="space-y-4">
            <!-- Personal Information -->
            <div class="flex items-center gap-3 {% if progress.current_step == 'personal_info' %}text-amber-400{% else %}text-slate-400{% endif %}">
              {% if progress.current_step == 'personal_info' %}
                <div class="w-6 h-6 bg-amber-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="M5 13l4 4L19 7"></path>
                  </svg>
                </div>
              {% else %}
                <div class="w-6 h-6 border-2 border-slate-600 rounded-full"></div>
              {% endif %}
              <span class="text-sm font-medium">Personal Information</span>
            </div>

            <!-- Contact and Address Information -->
            <div class="flex items-center gap-3 {% if progress.current_step == 'contact_address' %}text-amber-400{% else %}text-slate-400{% endif %}">
              {% if progress.current_step == 'contact_address' %}
                <div class="w-6 h-6 bg-amber-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="M5 13l4 4L19 7"></path>
                  </svg>
                </div>
              {% else %}
                <div class="w-6 h-6 border-2 border-slate-600 rounded-full"></div>
              {% endif %}
              <span class="text-sm font-medium">Contact and Address Information</span>
            </div>

            <!-- Currency -->
            <div class="flex items-center gap-3 {% if progress.current_step == 'currency' %}text-amber-400{% else %}text-slate-400{% endif %}">
              {% if progress.current_step == 'currency' %}
                <div class="w-6 h-6 bg-amber-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="M5 13l4 4L19 7"></path>
                  </svg>
                </div>
              {% else %}
                <div class="w-6 h-6 border-2 border-slate-600 rounded-full"></div>
              {% endif %}
              <span class="text-sm font-medium">Currency</span>
            </div>

            <!-- Client Declaration -->
            <div class="flex items-center gap-3 {% if progress.current_step == 'client_declaration' %}text-amber-400{% else %}text-slate-400{% endif %}">
              {% if progress.current_step == 'client_declaration' %}
                <div class="w-6 h-6 bg-amber-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="M5 13l4 4L19 7"></path>
                  </svg>
                </div>
              {% else %}
                <div class="w-6 h-6 border-2 border-slate-600 rounded-full"></div>
              {% endif %}
              <span class="text-sm font-medium">Client Declaration</span>
            </div>
          </nav>
        </div>
      </div>

      <!-- Main Content -->
      <div class="lg:col-span-3">
        <div class="glass-card p-8 rounded-2xl">
          {% block onboarding_content %}
          {% endblock %}
        </div>
      </div>
    </div>
  </div>

  <!-- Chat Button -->
  <div class="fixed bottom-6 right-6 z-50">
    <button class="w-14 h-14 bg-gradient-to-r from-amber-500 to-blue-500 rounded-full flex items-center justify-center shadow-2xl hover:shadow-amber-500/25 transition-all duration-300 hover:scale-110 group">
      <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
      </svg>
      <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-slate-900"></div>
    </button>
  </div>
</div>

<!-- Custom Onboarding Styles -->
<style>
.form-input {
  @apply w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-500/50 focus:border-amber-500/50 transition-all duration-200 backdrop-blur-sm;
}

.form-checkbox {
  @apply w-4 h-4 text-amber-500 bg-slate-800 border-slate-700 rounded focus:ring-amber-500 focus:ring-2;
}

.file-upload {
  @apply relative overflow-hidden;
}

.file-upload input[type="file"] {
  @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

.file-upload-label {
  @apply flex items-center gap-3 px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-slate-300 hover:bg-slate-700/50 transition-all duration-200 cursor-pointer;
}

.progress-bar {
  @apply w-full bg-slate-800 rounded-full h-2 overflow-hidden;
}

.progress-fill {
  @apply h-full bg-gradient-to-r from-amber-500 to-blue-500 transition-all duration-500;
}
</style>
{% endblock %}