{% extends 'base.html' %} {% load static %} {% block title %}{{ strategy.name }}
- Strategy Details - AIBOTXCHANGE{% endblock %} {% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Breadcrumb -->
  <nav class="mb-8">
    <ol class="flex items-center space-x-2 text-sm text-gray-500">
      <li>
        <a href="{% url 'main:home' %}" class="hover:text-gray-700">Home</a>
      </li>
      <li><i class="fas fa-chevron-right mx-2"></i></li>
      <li>
        <a href="{% url 'strategies:marketplace' %}" class="hover:text-gray-700"
          >Strategies</a
        >
      </li>
      <li><i class="fas fa-chevron-right mx-2"></i></li>
      <li class="text-gray-900 font-medium">{{ strategy.name }}</li>
    </ol>
  </nav>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Main Content -->
    <div class="lg:col-span-2">
      <!-- Strategy Header -->
      <div class="bg-white rounded-lg shadow-lg p-8 mb-8">
        <div class="flex justify-between items-start mb-6">
          <div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">
              {{ strategy.name }}
            </h1>
            <p class="text-gray-600">{{ strategy.description }}</p>
          </div>
          <span
            class="risk-badge risk-{{ strategy.risk_level }} text-lg px-4 py-2"
          >
            {{ strategy.get_risk_level_display }} Risk
          </span>
        </div>

        <!-- Key Metrics -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
          <div class="text-center">
            <div class="text-2xl font-bold text-green-600">
              {{ strategy.total_return|floatformat:1 }}%
            </div>
            <div class="text-sm text-gray-500">Total Return</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-blue-600">
              {{ strategy.win_rate|floatformat:1 }}%
            </div>
            <div class="text-sm text-gray-500">Win Rate</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-red-600">
              {{ strategy.max_drawdown|floatformat:1 }}%
            </div>
            <div class="text-sm text-gray-500">Max Drawdown</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-purple-600">
              {{ strategy.subscriber_count }}
            </div>
            <div class="text-sm text-gray-500">Subscribers</div>
          </div>
        </div>

        <!-- Strategy Details -->
        <div class="border-t pt-8">
          <h3 class="text-lg font-semibold text-gray-900 mb-4">
            Strategy Information
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <div class="mb-4">
                <span class="text-sm font-medium text-gray-500"
                  >Primary Asset:</span
                >
                <div class="text-gray-900 font-semibold">
                  {{ strategy.primary_asset }}
                </div>
              </div>
              <div class="mb-4">
                <span class="text-sm font-medium text-gray-500"
                  >Asset Type:</span
                >
                <div class="text-gray-900 font-semibold">
                  {{ strategy.get_asset_type_display }}
                </div>
              </div>
              <div class="mb-4">
                <span class="text-sm font-medium text-gray-500"
                  >Strategy Type:</span
                >
                <div class="text-gray-900 font-semibold">
                  {{ strategy.get_strategy_type_display }}
                </div>
              </div>
            </div>
            <div>
              <div class="mb-4">
                <span class="text-sm font-medium text-gray-500"
                  >Monthly Fee:</span
                >
                <div class="text-gray-900 font-semibold text-lg">
                  ${{ strategy.monthly_fee|floatformat:0 }}
                </div>
              </div>
              <div class="mb-4">
                <span class="text-sm font-medium text-gray-500"
                  >Minimum Balance:</span
                >
                <div class="text-gray-900 font-semibold">
                  ${{ strategy.minimum_balance|floatformat:0 }}
                </div>
              </div>
              <div class="mb-4">
                <span class="text-sm font-medium text-gray-500">Created:</span>
                <div class="text-gray-900 font-semibold">
                  {{ strategy.created_at|date:"M d, Y" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Performance Chart -->
      <div class="bg-white rounded-lg shadow-lg p-8 mb-8">
        <h3 class="text-lg font-semibold text-gray-900 mb-6">
          Performance Chart
        </h3>
        {% if strategy.myfxbook_widget_url %}
        <div class="w-full">
          <!-- MyFxBook widget would be embedded here in production -->
          <div class="bg-gray-100 rounded-lg p-8 text-center">
            <i class="fas fa-chart-line text-4xl text-gray-400 mb-4"></i>
            <h4 class="text-lg font-medium text-gray-700 mb-2">
              Live Performance Chart
            </h4>
            <p class="text-gray-500">
              MyFxBook integration active in production
            </p>
            <div class="mt-4">
              <a
                href="{{ strategy.myfxbook_widget_url }}"
                target="_blank"
                class="text-blue-600 hover:text-blue-500"
              >
                View on MyFxBook →
              </a>
            </div>
          </div>
        </div>
        {% else %}
        <div class="bg-gray-100 rounded-lg p-8 text-center">
          <i class="fas fa-chart-area text-4xl text-gray-400 mb-4"></i>
          <p class="text-gray-500">Performance chart will be available soon</p>
        </div>
        {% endif %}
      </div>

      <!-- Recent Performance -->
      {% if performance_data %}
      <div class="bg-white rounded-lg shadow-lg p-8">
        <h3 class="text-lg font-semibold text-gray-900 mb-6">
          Recent Performance
        </h3>
        <div class="overflow-x-auto">
          <table class="min-w-full">
            <thead class="bg-gray-50">
              <tr>
                <th
                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  Date
                </th>
                <th
                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  Return
                </th>
                <th
                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  Trades
                </th>
                <th
                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  Win Rate
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {% for data in performance_data %}
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {{ data.date|date:"M d, Y" }}
                </td>
                <td
                  class="px-6 py-4 whitespace-nowrap text-sm {% if data.daily_return >= 0 %}text-green-600{% else %}text-red-600{% endif %}"
                >
                  {{ data.daily_return|floatformat:2 }}%
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {{ data.trades_count }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {{ data.win_rate|floatformat:1 }}%
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      {% endif %}
    </div>

    <!-- Sidebar -->
    <div class="space-y-8">
      <!-- Subscription Card -->
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
          Subscribe to Strategy
        </h3>

        <div class="mb-6">
          <div class="text-3xl font-bold text-gray-900 mb-2">
            ${{ strategy.monthly_fee|floatformat:0 }}
          </div>
          <div class="text-sm text-gray-500">per month</div>
        </div>

        {% if user.is_authenticated %} {% if user_subscription %}
        <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
          <div class="flex items-center">
            <i class="fas fa-check-circle text-green-600 mr-2"></i>
            <span class="text-green-800 font-medium"
              >You are subscribed to this strategy</span
            >
          </div>
          <div class="text-sm text-green-600 mt-1">
            Status: {{ user_subscription.get_status_display }}
          </div>
        </div>

        {% if user_subscription.status == 'active' %}
        <a
          href="{% url 'strategies:unsubscribe' user_subscription.id %}"
          class="btn-secondary w-full text-center block"
        >
          Unsubscribe
        </a>
        {% endif %} {% else %}
        <a
          href="{% url 'strategies:subscribe' strategy.id %}"
          class="btn-primary w-full text-center block mb-4"
        >
          Subscribe Now
        </a>
        <p class="text-xs text-gray-500">
          Subscription requires MT5 account connection
        </p>
        {% endif %} {% else %}
        <a
          href="{% url 'accounts:login' %}"
          class="btn-primary w-full text-center block mb-4"
        >
          Login to Subscribe
        </a>
        <p class="text-xs text-gray-500">
          New to AIBOTXCHANGE?
          <a
            href="{% url 'accounts:signup' %}"
            class="text-blue-600 hover:text-blue-500"
            >Create account</a
          >
        </p>
        {% endif %}
      </div>

      <!-- Strategy Stats -->
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
          Strategy Statistics
        </h3>
        <div class="space-y-4">
          <div class="flex justify-between">
            <span class="text-gray-600">Active Since:</span>
            <span class="font-semibold"
              >{{ strategy.created_at|date:"M Y" }}</span
            >
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Total Subscribers:</span>
            <span class="font-semibold">{{ strategy.subscriber_count }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Avg Monthly Return:</span>
            <span class="font-semibold text-green-600"
              >{{ strategy.avg_monthly_return|floatformat:1 }}%</span
            >
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Best Month:</span>
            <span class="font-semibold text-green-600"
              >{{ strategy.best_month|floatformat:1 }}%</span
            >
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Worst Month:</span>
            <span class="font-semibold text-red-600"
              >{{ strategy.worst_month|floatformat:1 }}%</span
            >
          </div>
        </div>
      </div>

      <!-- Risk Information -->
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">
          Risk Information
        </h3>
        <div class="space-y-4">
          <div>
            <div class="flex justify-between items-center mb-2">
              <span class="text-gray-600">Risk Level:</span>
              <span class="risk-badge risk-{{ strategy.risk_level }}"
                >{{ strategy.get_risk_level_display }}</span
              >
            </div>
          </div>
          <div>
            <span class="text-gray-600">Maximum Drawdown:</span>
            <div class="mt-1">
              <div class="bg-gray-200 rounded-full h-2">
                <div
                  class="bg-red-500 h-2 rounded-full"
                  style="width: {{ strategy.max_drawdown }}%"
                ></div>
              </div>
              <div class="text-sm text-gray-500 mt-1">
                {{ strategy.max_drawdown|floatformat:1 }}%
              </div>
            </div>
          </div>
          <div class="text-xs text-gray-500 mt-4">
            <p>
              <strong>Risk Warning:</strong> Past performance is not indicative
              of future results. Trading involves substantial risk of loss.
            </p>
          </div>
        </div>
      </div>

      <!-- Contact Support -->
      <div class="bg-blue-50 rounded-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Need Help?</h3>
        <p class="text-gray-600 text-sm mb-4">
          Have questions about this strategy? Our support team is here to help.
        </p>
        <a
          href="{% url 'main:contact' %}"
          class="btn-secondary w-full text-center block"
        >
          Contact Support
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}