{% extends 'dashboard_base.html' %}
{% load static %}

{% block title %}Copy Experts - Trademont{% endblock %}
{% block dashboard_type %}Investor{% endblock %}
{% block page_title %}Copy Experts{% endblock %}

{% block content %}
<div class="space-y-6">
  <!-- Top stats -->
  <div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
    <div class="grid grid-cols-2 gap-4 w-full sm:w-auto">
      <div class="glass-card rounded-2xl p-4">
        <div class="text-sm text-slate-400">Total Capital</div>
        <div class="text-2xl font-bold text-white mt-1">${{ stats.total_capital|default:'0.00' }}</div>
      </div>
      <div class="glass-card rounded-2xl p-4">
        <div class="text-sm text-slate-400">Experts copied</div>
        <div class="text-2xl font-bold text-white mt-1">{{ stats.experts_copied|default:'0' }}</div>
      </div>
    </div>
    <a href="{% url 'traders:subscriptions' %}" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-100">View experts copied</a>
  </div>

  <!-- Experts Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {% for e in experts %}
    <div class="bg-slate-900/70 border border-slate-800/60 rounded-2xl p-5">
      <div class="flex items-center gap-3 mb-4">
        <div class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-200 font-semibold">
          {{ e.name|first|upper }}
        </div>
        <div class="flex-1">
          <div class="flex items-center gap-2">
            <h3 class="text-white font-semibold">{{ e.name }}</h3>
            {% if e.verified %}<span class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-blue-500 text-white text-[10px]">✓</span>{% endif %}
          </div>
        </div>
      </div>

      <div class="divide-y divide-slate-800/60">
        <div class="flex items-center justify-between py-3">
          <span class="text-slate-400 text-sm">WIN RATE</span>
          <span class="text-white text-sm">{{ e.win_rate }}%</span>
        </div>
        <div class="flex items-center justify-between py-3">
          <span class="text-slate-400 text-sm">PROFIT SHARE</span>
          <span class="text-white text-sm">{{ e.profit_share }}%</span>
        </div>
        <div class="flex items-center justify-between py-3">
          <span class="text-slate-400 text-sm">LOSSES</span>
          <span class="text-white text-sm">{{ e.losses }}</span>
        </div>
        <div class="flex items-center justify-between py-3">
          <span class="text-slate-400 text-sm">WINS</span>
          <span class="text-white text-sm">{{ e.wins }}</span>
        </div>
        <div class="flex items-center justify-between py-3">
          <span class="text-slate-400 text-sm">STARTING CAPITAL</span>
          <span class="text-white text-sm">${{ e.starting_capital }}</span>
        </div>
      </div>

      <div class="pt-4">
        <form method="post" action="{% url 'traders:subscribe_expert' e.id %}">
          {% csrf_token %}
          {% if e.is_subscribed %}
            <button type="submit" class="w-full px-4 py-3 rounded-xl bg-slate-700 text-slate-300 cursor-not-allowed" disabled>Copied</button>
          {% elif not e.can_afford %}
            <button type="button" class="w-full px-4 py-3 rounded-xl bg-red-900/30 text-red-300 cursor-not-allowed" disabled title="Insufficient balance. Required: ${{ e.starting_capital }}">
              Insufficient Balance
            </button>
          {% else %}
            <button type="submit" class="w-full px-4 py-3 rounded-xl bg-slate-500 text-white hover:bg-slate-400 transition-colors">Copy</button>
          {% endif %}
        </form>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}