{% extends 'base.html' %} {% load static %} {% block title %}API Documentation -
AIBOTXCHANGE{% endblock %} {% block extra_head %}
<style>
  .doc-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
  }
  .code-block {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 1rem;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.875rem;
    overflow-x: auto;
  }
  .endpoint {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 1rem;
    margin: 1rem 0;
  }
  .method-get {
    border-left-color: #4caf50;
    background: #e8f5e8;
  }
  .method-post {
    border-left-color: #ff9800;
    background: #fff3e0;
  }
  .method-put {
    border-left-color: #2196f3;
    background: #e3f2fd;
  }
  .method-delete {
    border-left-color: #f44336;
    background: #ffebee;
  }
  .nav-docs {
    position: sticky;
    top: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
  }
</style>
{% endblock %} {% block content %}
<div class="min-h-screen bg-gray-50 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">API Documentation</h1>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        Complete guide to integrating with AIBOTXCHANGE trading platform APIs
        for MetaAPI, MyFxBook, and payment processing.
      </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      <!-- Navigation Sidebar -->
      <div class="lg:col-span-1">
        <div class="nav-docs">
          <h3 class="text-lg font-semibold text-gray-900 mb-4">
            Quick Navigation
          </h3>
          <nav class="space-y-2">
            <a
              href="#getting-started"
              class="block text-blue-600 hover:text-blue-800"
              >Getting Started</a
            >
            <a
              href="#authentication"
              class="block text-blue-600 hover:text-blue-800"
              >Authentication</a
            >
            <a href="#metaapi" class="block text-blue-600 hover:text-blue-800"
              >MetaAPI Integration</a
            >
            <a href="#myfxbook" class="block text-blue-600 hover:text-blue-800"
              >MyFxBook Integration</a
            >
            <a
              href="#strategies"
              class="block text-blue-600 hover:text-blue-800"
              >Trading Strategies</a
            >
            <a href="#payments" class="block text-blue-600 hover:text-blue-800"
              >Payment Processing</a
            >
            <a href="#webhooks" class="block text-blue-600 hover:text-blue-800"
              >Webhooks</a
            >
            <a href="#errors" class="block text-blue-600 hover:text-blue-800"
              >Error Handling</a
            >
            <a href="#sdk" class="block text-blue-600 hover:text-blue-800"
              >SDKs & Libraries</a
            >
          </nav>
        </div>
      </div>

      <!-- Main Content -->
      <div class="lg:col-span-3">
        <!-- Getting Started -->
        <section id="getting-started" class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">Getting Started</h2>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">
              The AIBOTXCHANGE API provides programmatic access to our trading
              platform, allowing you to integrate MetaTrader 5 accounts, access
              trading strategies, and process payments.
            </p>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">Base URL</h3>
            <div class="code-block">https://aibotxchange.com/api/v1/</div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3 mt-6">
              Rate Limits
            </h3>
            <ul class="list-disc list-inside text-gray-600 space-y-1">
              <li>100 requests per minute for authenticated users</li>
              <li>10 requests per minute for unauthenticated requests</li>
              <li>Premium accounts: 1000 requests per minute</li>
            </ul>
          </div>
        </section>

        <!-- Authentication -->
        <section id="authentication" class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">Authentication</h2>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">
              AIBOTXCHANGE uses JWT tokens for API authentication. Include your
              token in the Authorization header.
            </p>

            <div class="endpoint method-post">
              <div class="flex items-center mb-2">
                <span
                  class="bg-orange-500 text-white px-2 py-1 rounded text-sm font-medium mr-3"
                  >POST</span
                >
                <code>/auth/login/</code>
              </div>
              <p class="text-gray-600">Authenticate and receive JWT token</p>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">
              Request Body
            </h3>
            <div class="code-block">
              { "username": "your_username", "password": "your_password" }
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3 mt-6">
              Response
            </h3>
            <div class="code-block">
              { "access": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...", "refresh":
              "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...", "user": { "id": 1,
              "username": "trader", "email": "trader@example.com" } }
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3 mt-6">
              Using the Token
            </h3>
            <div class="code-block">
              curl -H "Authorization: Bearer YOUR_JWT_TOKEN" \
              https://aibotxchange.com/api/v1/strategies/
            </div>
          </div>
        </section>

        <!-- MetaAPI Integration -->
        <section id="metaapi" class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">
              MetaAPI Integration
            </h2>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">
              Connect and manage MetaTrader 5 accounts through our MetaAPI
              integration for automated trading.
            </p>

            <div class="endpoint method-post">
              <div class="flex items-center mb-2">
                <span
                  class="bg-orange-500 text-white px-2 py-1 rounded text-sm font-medium mr-3"
                  >POST</span
                >
                <code>/accounts/mt5/</code>
              </div>
              <p class="text-gray-600">Connect new MT5 account</p>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">
              Request Body
            </h3>
            <div class="code-block">
              { "account_id": "12345678", "password": "account_password",
              "server": "MetaQuotes-Demo", "platform": "mt5", "magic": 123456,
              "metaapi_account_id": "metaapi_account_id" }
            </div>

            <div class="endpoint method-get">
              <div class="flex items-center mb-2">
                <span
                  class="bg-green-500 text-white px-2 py-1 rounded text-sm font-medium mr-3"
                  >GET</span
                >
                <code>/accounts/mt5/{account_id}/status/</code>
              </div>
              <p class="text-gray-600">Get MT5 account status and balance</p>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">Response</h3>
            <div class="code-block">
              { "id": 1, "account_id": "12345678", "balance": 10000.00,
              "equity": 9856.32, "margin": 143.68, "free_margin": 9712.64,
              "margin_level": 6855.23, "is_connected": true, "last_sync":
              "2025-07-21T12:00:00Z" }
            </div>
          </div>
        </section>

        <!-- MyFxBook Integration -->
        <section id="myfxbook" class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">
              MyFxBook Integration
            </h2>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">
              Access performance analytics and strategy verification through
              MyFxBook integration.
            </p>

            <div class="endpoint method-get">
              <div class="flex items-center mb-2">
                <span
                  class="bg-green-500 text-white px-2 py-1 rounded text-sm font-medium mr-3"
                  >GET</span
                >
                <code>/strategies/{id}/performance/</code>
              </div>
              <p class="text-gray-600">
                Get strategy performance data from MyFxBook
              </p>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">Response</h3>
            <div class="code-block">
              { "strategy_id": 1, "myfxbook_url":
              "https://www.myfxbook.com/members/strategy123", "performance": {
              "total_return": 15.2, "monthly_return": 1.89, "win_rate": 78.5,
              "max_drawdown": -3.2, "trades_count": 245, "profit_factor": 1.85,
              "last_updated": "2025-07-21T12:00:00Z" }, "equity_curve": [
              {"date": "2025-01-01", "equity": 10000}, {"date": "2025-01-02",
              "equity": 10125}, // ... more data points ] }
            </div>
          </div>
        </section>

        <!-- Trading Strategies -->
        <section id="strategies" class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">Trading Strategies</h2>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">
              Browse, subscribe to, and manage trading strategies available on
              the platform.
            </p>

            <div class="endpoint method-get">
              <div class="flex items-center mb-2">
                <span
                  class="bg-green-500 text-white px-2 py-1 rounded text-sm font-medium mr-3"
                  >GET</span
                >
                <code>/strategies/</code>
              </div>
              <p class="text-gray-600">List available trading strategies</p>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">
              Query Parameters
            </h3>
            <ul class="list-disc list-inside text-gray-600 space-y-1 mb-4">
              <li>
                <code>risk_level</code> - Filter by risk level (low, medium,
                high)
              </li>
              <li>
                <code>min_return</code> - Minimum monthly return percentage
              </li>
              <li>
                <code>asset</code> - Primary trading asset (forex, crypto,
                stocks)
              </li>
              <li><code>page</code> - Pagination page number</li>
            </ul>

            <div class="endpoint method-post">
              <div class="flex items-center mb-2">
                <span
                  class="bg-orange-500 text-white px-2 py-1 rounded text-sm font-medium mr-3"
                  >POST</span
                >
                <code>/strategies/{id}/subscribe/</code>
              </div>
              <p class="text-gray-600">Subscribe to a trading strategy</p>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">
              Request Body
            </h3>
            <div class="code-block">
              { "mt5_account_id": 1, "allocation_percentage": 25.0,
              "max_risk_per_trade": 2.0 }
            </div>
          </div>
        </section>

        <!-- Payment Processing -->
        <section id="payments" class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">Payment Processing</h2>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">
              Handle subscription payments through Stripe and Razorpay
              integration.
            </p>

            <div class="endpoint method-post">
              <div class="flex items-center mb-2">
                <span
                  class="bg-orange-500 text-white px-2 py-1 rounded text-sm font-medium mr-3"
                  >POST</span
                >
                <code>/payments/create-intent/</code>
              </div>
              <p class="text-gray-600">
                Create payment intent for strategy subscription
              </p>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">
              Request Body
            </h3>
            <div class="code-block">
              { "strategy_id": 1, "payment_method": "stripe", "currency": "USD",
              "billing_cycle": "monthly" }
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3 mt-6">
              Response
            </h3>
            <div class="code-block">
              { "client_secret": "pi_1234567890_secret_xyz", "amount": 9900,
              "currency": "usd", "subscription_id": "sub_1234567890",
              "next_payment_date": "2025-08-21T00:00:00Z" }
            </div>
          </div>
        </section>

        <!-- Webhooks -->
        <section id="webhooks" class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">Webhooks</h2>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">
              Receive real-time notifications about trading events, payments,
              and account status changes.
            </p>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">
              Supported Events
            </h3>
            <ul class="list-disc list-inside text-gray-600 space-y-1 mb-4">
              <li><code>trade.opened</code> - New trade executed</li>
              <li><code>trade.closed</code> - Trade closed with P&L</li>
              <li>
                <code>payment.succeeded</code> - Subscription payment successful
              </li>
              <li><code>payment.failed</code> - Payment failed or declined</li>
              <li>
                <code>account.disconnected</code> - MT5 account connection lost
              </li>
            </ul>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">
              Example Webhook Payload
            </h3>
            <div class="code-block">
              { "event": "trade.opened", "timestamp": "2025-07-21T12:00:00Z",
              "data": { "trade_id": "T123456789", "strategy_id": 1,
              "mt5_account_id": 1, "symbol": "EURUSD", "type": "buy", "volume":
              0.1, "open_price": 1.0945, "stop_loss": 1.0925, "take_profit":
              1.0975 } }
            </div>
          </div>
        </section>

        <!-- Error Handling -->
        <section id="errors" class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">Error Handling</h2>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">
              The API uses conventional HTTP response codes to indicate the
              success or failure of requests.
            </p>

            <h3 class="text-lg font-semibold text-gray-900 mb-3">
              HTTP Status Codes
            </h3>
            <div class="space-y-3">
              <div class="flex items-center">
                <span
                  class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm font-medium w-12 mr-3"
                  >200</span
                >
                <span class="text-gray-600">OK - Request successful</span>
              </div>
              <div class="flex items-center">
                <span
                  class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm font-medium w-12 mr-3"
                  >400</span
                >
                <span class="text-gray-600"
                  >Bad Request - Invalid parameters</span
                >
              </div>
              <div class="flex items-center">
                <span
                  class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm font-medium w-12 mr-3"
                  >401</span
                >
                <span class="text-gray-600"
                  >Unauthorized - Invalid or missing token</span
                >
              </div>
              <div class="flex items-center">
                <span
                  class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm font-medium w-12 mr-3"
                  >403</span
                >
                <span class="text-gray-600"
                  >Forbidden - Insufficient permissions</span
                >
              </div>
              <div class="flex items-center">
                <span
                  class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm font-medium w-12 mr-3"
                  >404</span
                >
                <span class="text-gray-600"
                  >Not Found - Resource doesn't exist</span
                >
              </div>
              <div class="flex items-center">
                <span
                  class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm font-medium w-12 mr-3"
                  >429</span
                >
                <span class="text-gray-600"
                  >Too Many Requests - Rate limit exceeded</span
                >
              </div>
              <div class="flex items-center">
                <span
                  class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm font-medium w-12 mr-3"
                  >500</span
                >
                <span class="text-gray-600"
                  >Internal Server Error - Server issue</span
                >
              </div>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3 mt-6">
              Error Response Format
            </h3>
            <div class="code-block">
              { "error": { "code": "INVALID_PARAMETERS", "message": "The request
              parameters are invalid", "details": { "account_id": ["This field
              is required"], "password": ["Password must be at least 8
              characters"] } } }
            </div>
          </div>
        </section>

        <!-- SDKs & Libraries -->
        <section id="sdk" class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">SDKs & Libraries</h2>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">
              Official and community-maintained SDKs for popular programming
              languages.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="border border-gray-200 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                  Python SDK
                </h3>
                <p class="text-gray-600 text-sm mb-3">
                  Official Python library for AIBOTXCHANGE API
                </p>
                <div class="code-block">pip install aibotxchange</div>
              </div>

              <div class="border border-gray-200 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                  JavaScript SDK
                </h3>
                <p class="text-gray-600 text-sm mb-3">
                  Node.js and browser support
                </p>
                <div class="code-block">npm install @aibotxchange/sdk</div>
              </div>

              <div class="border border-gray-200 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                  PHP SDK
                </h3>
                <p class="text-gray-600 text-sm mb-3">
                  Community-maintained PHP library
                </p>
                <div class="code-block">
                  composer require aibotxchange/php-sdk
                </div>
              </div>

              <div class="border border-gray-200 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                  Postman Collection
                </h3>
                <p class="text-gray-600 text-sm mb-3">
                  Ready-to-use API collection
                </p>
                <a href="#" class="text-blue-600 hover:text-blue-800 text-sm"
                  >Download Collection</a
                >
              </div>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-3 mt-6">
              Quick Start Example (Python)
            </h3>
            <div class="code-block">
              import aibotxchange # Initialize client client =
              aibotxchange.Client(api_key='your_api_key') # Get available
              strategies strategies =
              client.strategies.list(risk_level='medium') # Subscribe to a
              strategy subscription = client.strategies.subscribe(
              strategy_id=1, mt5_account_id=1, allocation_percentage=25.0 ) #
              Monitor account balance account = client.accounts.get(1)
              print(f"Current balance: ${account.balance}")
            </div>
          </div>
        </section>

        <!-- Support -->
        <section class="doc-section">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">
              Support & Resources
            </h2>
          </div>
          <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                  Need Help?
                </h3>
                <ul class="space-y-2 text-gray-600">
                  <li>
                    <a
                      href="{% url 'main:contact' %}"
                      class="text-blue-600 hover:text-blue-800"
                      >Contact Support</a
                    >
                  </li>
                  <li>
                    <a href="#" class="text-blue-600 hover:text-blue-800"
                      >Community Forum</a
                    >
                  </li>
                  <li>
                    <a href="#" class="text-blue-600 hover:text-blue-800"
                      >GitHub Issues</a
                    >
                  </li>
                  <li>
                    <a href="#" class="text-blue-600 hover:text-blue-800"
                      >Stack Overflow</a
                    >
                  </li>
                </ul>
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                  Resources
                </h3>
                <ul class="space-y-2 text-gray-600">
                  <li>
                    <a href="#" class="text-blue-600 hover:text-blue-800"
                      >API Changelog</a
                    >
                  </li>
                  <li>
                    <a href="#" class="text-blue-600 hover:text-blue-800"
                      >Status Page</a
                    >
                  </li>
                  <li>
                    <a href="#" class="text-blue-600 hover:text-blue-800"
                      >Migration Guide</a
                    >
                  </li>
                  <li>
                    <a href="#" class="text-blue-600 hover:text-blue-800"
                      >Best Practices</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block extra_scripts %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Smooth scrolling for navigation links
    document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
      anchor.addEventListener("click", function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute("href"));
        if (target) {
          target.scrollIntoView({
            behavior: "smooth",
            block: "start",
          });
        }
      });
    });

    // Highlight current section in navigation
    const observerOptions = {
      rootMargin: "-20% 0px -70% 0px",
      threshold: 0,
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // Remove active class from all nav links
          document.querySelectorAll(".nav-docs a").forEach((link) => {
            link.classList.remove("font-semibold", "text-blue-800");
            link.classList.add("text-blue-600");
          });

          // Add active class to current section link
          const currentLink = document.querySelector(
            `a[href="#${entry.target.id}"]`
          );
          if (currentLink) {
            currentLink.classList.add("font-semibold", "text-blue-800");
            currentLink.classList.remove("text-blue-600");
          }
        }
      });
    }, observerOptions);

    // Observe all sections
    document.querySelectorAll("section[id]").forEach((section) => {
      observer.observe(section);
    });
  });
</script>
{% endblock %}