{% extends 'base.html' %} {% load static %} {% block title %}Profile -
AIBOTXCHANGE{% endblock %} {% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Account Profile</h1>
    <p class="mt-2 text-gray-600">
      Manage your account information and MT5 connections
    </p>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Profile Information -->
    <div class="lg:col-span-2">
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">Profile Information</h2>
        </div>
        <div class="px-6 py-6">
          <form method="post">
            {% csrf_token %}

            <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>
                {{ 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>
                <label
                  for="{{ form.last_name.id_for_label }}"
                  class="form-label"
                >
                  Last Name
                </label>
                {{ 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 class="mt-6">
              <label for="{{ form.email.id_for_label }}" class="form-label">
                Email Address
              </label>
              {{ form.email }} {% if form.email.errors %}
              <div class="text-red-600 text-sm mt-1">
                {{ form.email.errors }}
              </div>
              {% endif %}
            </div>

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

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

            <div class="mt-6">
              <button type="submit" class="btn-primary">Update Profile</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Account Statistics -->
    <div class="space-y-6">
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">Account Statistics</h2>
        </div>
        <div class="px-6 py-6">
          <dl class="space-y-4">
            <div>
              <dt class="text-sm font-medium text-gray-500">Total Profit</dt>
              <dd class="text-2xl font-bold text-green-600">
                ${{ profile.total_profit|floatformat:2 }}
              </dd>
            </div>
            <div>
              <dt class="text-sm font-medium text-gray-500">Total Drawdown</dt>
              <dd class="text-2xl font-bold text-red-600">
                {{ profile.total_drawdown|floatformat:2 }}%
              </dd>
            </div>
            <div>
              <dt class="text-sm font-medium text-gray-500">Member Since</dt>
              <dd class="text-lg text-gray-900">
                {{ profile.date_joined|date:"M Y" }}
              </dd>
            </div>
            <div>
              <dt class="text-sm font-medium text-gray-500">
                Verification Status
              </dt>
              <dd class="text-lg">
                {% if profile.is_verified %}
                <span class="text-green-600">
                  <i class="fas fa-check-circle mr-1"></i>Verified
                </span>
                {% else %}
                <span class="text-yellow-600">
                  <i class="fas fa-clock mr-1"></i>Pending
                </span>
                {% endif %}
              </dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </div>

  <!-- MT5 Accounts Section -->
  <div class="mt-12">
    <div class="flex justify-between items-center mb-6">
      <div>
        <h2 class="text-2xl font-bold text-gray-900">MT5 Accounts</h2>
        <p class="mt-1 text-gray-600">
          Manage your MetaTrader 5 account connections
        </p>
      </div>
      <a href="{% url 'accounts:add_mt5_account' %}" class="btn-primary">
        <i class="fas fa-plus mr-2"></i>Add Account
      </a>
    </div>

    {% if mt5_accounts %}
    <div class="bg-white shadow overflow-hidden sm:rounded-md">
      <ul class="divide-y divide-gray-200">
        {% for account in mt5_accounts %}
        <li>
          <div class="px-4 py-4 flex items-center justify-between">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <div
                  class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"
                >
                  <i class="fas fa-chart-line text-blue-600"></i>
                </div>
              </div>
              <div class="ml-4">
                <div class="flex items-center">
                  <p class="text-sm font-medium text-gray-900">
                    {{ account.account_name }}
                  </p>
                  <span
                    class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if account.status == 'active' %}bg-green-100 text-green-800 {% elif account.status == 'inactive' %}bg-gray-100 text-gray-800 {% else %}bg-red-100 text-red-800{% endif %}"
                  >
                    {{ account.get_status_display }}
                  </span>
                </div>
                <div class="mt-1">
                  <p class="text-sm text-gray-500">
                    <span class="font-medium">Login:</span> {{ account.login_id
                    }} | <span class="font-medium">Broker:</span> {{
                    account.get_broker_display }} |
                    <span class="font-medium">Server:</span> {{ account.server
                    }}
                  </p>
                </div>
                {% if account.balance %}
                <div class="mt-1 flex space-x-4 text-sm text-gray-500">
                  <span
                    ><strong>Balance:</strong> ${{ account.balance|floatformat:2
                    }}</span
                  >
                  <span
                    ><strong>Equity:</strong> ${{ account.equity|floatformat:2
                    }}</span
                  >
                  <span
                    ><strong>Profit:</strong>
                    <span
                      class="{% if account.profit >= 0 %}text-green-600{% else %}text-red-600{% endif %}"
                    >
                      ${{ account.profit|floatformat:2 }}
                    </span>
                  </span>
                </div>
                {% endif %}
              </div>
            </div>
            <div class="flex items-center space-x-2">
              <a
                href="{% url 'accounts:remove_mt5_account' account.id %}"
                class="text-red-600 hover:text-red-900"
                onclick="return confirm('Are you sure you want to remove this account?')"
              >
                <i class="fas fa-trash"></i>
              </a>
            </div>
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% else %}
    <div class="text-center py-12 bg-white rounded-lg shadow">
      <i class="fas fa-chart-line text-4xl text-gray-400 mb-4"></i>
      <h3 class="text-lg font-medium text-gray-900 mb-2">No MT5 Accounts</h3>
      <p class="text-gray-600 mb-6">
        Connect your MetaTrader 5 account to start copy trading
      </p>
      <a href="{% url 'accounts:add_mt5_account' %}" class="btn-primary">
        Add Your First Account
      </a>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}