{% extends 'base.html' %} {% load static %} {% block title %}Add MT5 Account -
AIBOTXCHANGE{% endblock %} {% block content %}
<div class="max-w-2xl 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">Add MT5 Account</h1>
    <p class="mt-2 text-gray-600">
      Connect your MetaTrader 5 account to start copy trading
    </p>
  </div>

  <div class="bg-white shadow rounded-lg">
    <div class="px-6 py-6">
      <form method="post" class="space-y-6">
        {% 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.account_name.id_for_label }}" class="form-label">
            Account Name
          </label>
          <div class="mt-1">
            {{ form.account_name }} {% if form.account_name.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.account_name.errors }}
            </div>
            {% endif %}
            <p class="text-sm text-gray-500 mt-1">
              Give your account a memorable name (e.g., "My Trading Account")
            </p>
          </div>
        </div>

        <div>
          <label for="{{ form.login_id.id_for_label }}" class="form-label">
            MT5 Login ID
          </label>
          <div class="mt-1">
            {{ form.login_id }} {% if form.login_id.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.login_id.errors }}
            </div>
            {% endif %}
            <p class="text-sm text-gray-500 mt-1">
              Your MetaTrader 5 account login number
            </p>
          </div>
        </div>

        <div>
          <label for="{{ form.broker.id_for_label }}" class="form-label">
            Broker
          </label>
          <div class="mt-1">
            {{ form.broker }} {% if form.broker.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.broker.errors }}
            </div>
            {% endif %}
            <p class="text-sm text-gray-500 mt-1">
              Select your broker from the list
            </p>
          </div>
        </div>

        <div>
          <label for="{{ form.server.id_for_label }}" class="form-label">
            Server
          </label>
          <div class="mt-1">
            {{ form.server }} {% if form.server.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.server.errors }}
            </div>
            {% endif %}
            <p class="text-sm text-gray-500 mt-1">
              Server name (e.g., "ICMarkets-Live", "XM-Real")
            </p>
          </div>
        </div>

        <!-- Security Notice -->
        <div class="bg-blue-50 border border-blue-200 rounded-md p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <i class="fas fa-shield-alt text-blue-400"></i>
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-blue-800">Security Notice</h3>
              <div class="mt-2 text-sm text-blue-700">
                <ul class="list-disc list-inside space-y-1">
                  <li>
                    We only need read-only access to your account for monitoring
                  </li>
                  <li>Your account password is never stored or required</li>
                  <li>All connections are secured using MetaAPI encryption</li>
                  <li>You can remove access at any time from your profile</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="flex justify-end space-x-3">
          <a href="{% url 'accounts:profile' %}" class="btn-secondary">
            Cancel
          </a>
          <button type="submit" class="btn-primary">Add Account</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Instructions -->
  <div class="mt-8 bg-gray-50 rounded-lg p-6">
    <h3 class="text-lg font-medium text-gray-900 mb-4">
      How to find your MT5 details:
    </h3>
    <div class="space-y-4 text-sm text-gray-700">
      <div class="flex items-start">
        <span
          class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-medium mr-3"
          >1</span
        >
        <p>Open your MetaTrader 5 platform</p>
      </div>
      <div class="flex items-start">
        <span
          class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-medium mr-3"
          >2</span
        >
        <p>Go to "Tools" → "Options" → "Trade" tab</p>
      </div>
      <div class="flex items-start">
        <span
          class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-medium mr-3"
          >3</span
        >
        <p>Your Login ID and Server name are displayed there</p>
      </div>
      <div class="flex items-start">
        <span
          class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-medium mr-3"
          >4</span
        >
        <p>Select your broker from our supported list</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}