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

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

{% block content %}
<div class="space-y-6">
  {% if subs %}
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {% for s in subs %}
      <div class="bg-slate-900/70 border border-slate-800/60 rounded-2xl p-5">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-200 font-semibold">{{ s.expert.name|first|upper }}</div>
            <div>
              <div class="flex items-center gap-2">
                <h3 class="text-white font-semibold">{{ s.expert.name }}</h3>
                {% if s.expert.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 class="text-xs text-slate-400">Profit share: {{ s.profit_share }}%</div>
            </div>
          </div>
          <form method="post" action="{% url 'traders:unsubscribe_expert' s.expert.id %}">
            {% csrf_token %}
            <button class="px-3 py-2 rounded-lg bg-red-900/30 hover:bg-red-900/40 text-red-300 text-sm">Uncopy</button>
          </form>
        </div>
        <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
          <div class="p-3 rounded-xl bg-slate-800/40">
            <div class="text-slate-400">Invested Capital</div>
            <div class="text-slate-100">${{ s.invested_capital }}</div>
          </div>
          <div class="p-3 rounded-xl bg-slate-800/40">
            <div class="text-slate-400">Status</div>
            <div class="text-slate-100 capitalize">{{ s.status }}</div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  {% else %}
    <div class="text-center py-12">
      <div class="mx-auto w-12 h-12 rounded-full bg-slate-800/60 flex items-center justify-center text-slate-300">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
      </div>
      <h4 class="mt-4 text-white font-semibold">No experts copied yet</h4>
      <p class="mt-1 text-slate-400">Visit the Copy Experts page to start copying top traders.</p>
      <a href="{% url 'traders:copy_experts' %}" class="inline-block mt-4 px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-100">Browse experts</a>
    </div>
  {% endif %}
</div>
{% endblock %}