{% extends 'base.html' %} {% load static %} {% block title %}Sign Up -
AIBOTXCHANGE{% endblock %} {% block content %}
<div
  class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"
>
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <div class="text-center">
      <h2 class="text-center text-3xl font-bold text-gray-900">
        Create your account
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600">
        Join thousands of successful traders
      </p>
    </div>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
      <form class="space-y-6" method="post">
        {% csrf_token %} {% if form.non_field_errors %}
        <div
          class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded"
        >
          {{ form.non_field_errors }}
        </div>
        {% endif %}

        <div>
          <label for="{{ form.username.id_for_label }}" class="form-label">
            Username
          </label>
          <div class="mt-1">
            {{ form.username }} {% if form.username.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.username.errors }}
            </div>
            {% endif %}
          </div>
        </div>

        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
          <div>
            <label for="{{ form.first_name.id_for_label }}" class="form-label">
              First Name
            </label>
            <div class="mt-1">
              {{ form.first_name }} {% if form.first_name.errors %}
              <div class="text-red-600 text-sm mt-1">
                {{ form.first_name.errors }}
              </div>
              {% endif %}
            </div>
          </div>

          <div>
            <label for="{{ form.last_name.id_for_label }}" class="form-label">
              Last Name
            </label>
            <div class="mt-1">
              {{ form.last_name }} {% if form.last_name.errors %}
              <div class="text-red-600 text-sm mt-1">
                {{ form.last_name.errors }}
              </div>
              {% endif %}
            </div>
          </div>
        </div>

        <div>
          <label for="{{ form.email.id_for_label }}" class="form-label">
            Email Address
          </label>
          <div class="mt-1">
            {{ form.email }} {% if form.email.errors %}
            <div class="text-red-600 text-sm mt-1">{{ form.email.errors }}</div>
            {% endif %}
          </div>
        </div>

        <div>
          <label for="{{ form.country.id_for_label }}" class="form-label">
            Country
          </label>
          <div class="mt-1">
            {{ form.country }} {% if form.country.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.country.errors }}
            </div>
            {% endif %}
          </div>
        </div>

        <div>
          <label for="{{ form.password1.id_for_label }}" class="form-label">
            Password
          </label>
          <div class="mt-1">
            {{ form.password1 }} {% if form.password1.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.password1.errors }}
            </div>
            {% endif %}
          </div>
        </div>

        <div>
          <label for="{{ form.password2.id_for_label }}" class="form-label">
            Confirm Password
          </label>
          <div class="mt-1">
            {{ form.password2 }} {% if form.password2.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.password2.errors }}
            </div>
            {% endif %}
          </div>
        </div>

        <div class="flex items-center">
          <input
            id="terms"
            name="terms"
            type="checkbox"
            required
            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
          />
          <label for="terms" class="ml-2 block text-sm text-gray-900">
            I agree to the
            <a href="#" class="text-blue-600 hover:text-blue-500"
              >Terms of Service</a
            >
            and
            <a href="#" class="text-blue-600 hover:text-blue-500"
              >Privacy Policy</a
            >
          </label>
        </div>

        <div>
          <button
            type="submit"
            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300"
          >
            Create Account
          </button>
        </div>
      </form>

      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white text-gray-500"
              >Already have an account?</span
            >
          </div>
        </div>

        <div class="mt-6">
          <a
            href="{% url 'accounts:login' %}"
            class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition duration-300"
          >
            Sign in instead
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Risk Warning -->
  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4">
      <div class="flex">
        <div class="flex-shrink-0">
          <i class="fas fa-exclamation-triangle text-yellow-400"></i>
        </div>
        <div class="ml-3">
          <h3 class="text-sm font-medium text-yellow-800">Risk Warning</h3>
          <div class="mt-2 text-sm text-yellow-700">
            <p>
              Trading involves substantial risk and may not be suitable for all
              investors. Past performance does not guarantee future results.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}