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

{% block title %}Trader Dashboard - Trademont{% endblock %}
{% block description %}Manage your trading profile, track performance, and grow your follower base on Trademont.{% endblock %}
{% block dashboard_type %}Trader{% endblock %}
{% block page_title %}Trader Dashboard{% endblock %}

{% block content %}
<div class="space-y-4 sm:space-y-6">
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4">
      <div class="glass-card p-4 sm:p-5 md:p-6 rounded-2xl min-w-0">
        <div class="flex items-center justify-between gap-2 sm:gap-3">
          <div class="min-w-0 flex-1">
            <p class="text-xs sm:text-sm text-slate-400 mb-1 truncate">Total Followers</p>
            <p class="text-xl sm:text-2xl font-bold text-white truncate">{{ metrics.total_followers|default:"0" }}</p>
            <p class="text-xs text-amber-400 mt-1 truncate">+12% this month</p>
          </div>
          <div class="w-10 h-10 sm:w-12 sm:h-12 bg-amber-500/20 rounded-full flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-amber-400" 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 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
          </div>
        </div>
      </div>

      <div class="glass-card p-4 sm:p-5 md:p-6 rounded-2xl min-w-0">
        <div class="flex items-center justify-between gap-2 sm:gap-3">
          <div class="min-w-0 flex-1">
            <p class="text-xs sm:text-sm text-slate-400 mb-1 truncate">Monthly Profit</p>
            <p class="text-xl sm:text-2xl font-bold text-white truncate">${{ metrics.monthly_profit|default:"0.00" }}</p>
            <p class="text-xs text-amber-400 mt-1 truncate">+8.5% from last month</p>
          </div>
          <div class="w-10 h-10 sm:w-12 sm:h-12 bg-blue-500/20 rounded-full flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
            </svg>
          </div>
        </div>
      </div>

      <div class="glass-card p-4 sm:p-5 md:p-6 rounded-2xl min-w-0">
        <div class="flex items-center justify-between gap-2 sm:gap-3">
          <div class="min-w-0 flex-1">
            <p class="text-xs sm:text-sm text-slate-400 mb-1 truncate">Win Rate</p>
            <p class="text-xl sm:text-2xl font-bold text-white truncate">{{ metrics.win_rate|default:"0" }}%</p>
            <p class="text-xs text-amber-400 mt-1 truncate">+2.3% improvement</p>
          </div>
          <div class="w-10 h-10 sm:w-12 sm:h-12 bg-orange-500/20 rounded-full flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
          </div>
        </div>
      </div>

      <div class="glass-card p-4 sm:p-5 md:p-6 rounded-2xl min-w-0">
        <div class="flex items-center justify-between gap-2 sm:gap-3">
          <div class="min-w-0 flex-1">
            <p class="text-xs sm:text-sm text-slate-400 mb-1 truncate">Total Trades</p>
            <p class="text-xl sm:text-2xl font-bold text-white truncate">{{ metrics.total_trades|default:"0" }}</p>
            <p class="text-xs text-slate-400 mt-1 truncate">This month</p>
          </div>
          <div class="w-10 h-10 sm:w-12 sm:h-12 bg-amber-500/20 rounded-full flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- Performance Chart -->
    <div class="glass-card p-4 sm:p-6 rounded-2xl overflow-hidden">
      <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-4 sm:mb-6 gap-3">
        <h4 class="text-base sm:text-lg font-semibold text-white">Performance Overview</h4>
        <div class="flex gap-2 flex-shrink-0">
          <button class="px-3 py-1 text-xs bg-amber-500/20 text-amber-400 rounded-lg">7D</button>
          <button class="px-3 py-1 text-xs text-slate-400 hover:text-white rounded-lg">30D</button>
          <button class="px-3 py-1 text-xs text-slate-400 hover:text-white rounded-lg">90D</button>
        </div>
      </div>
      <div class="h-48 sm:h-64 w-full relative">
        <canvas id="traderChart"></canvas>
      </div>
    </div>

    <!-- Recent Activity -->
    <div class="glass-card p-4 sm:p-6 rounded-2xl overflow-hidden">
      <h4 class="text-base sm:text-lg font-semibold text-white mb-4 sm:mb-6">Recent Activity</h4>
      <div class="space-y-3 sm:space-y-4">
        <div class="flex items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-slate-800/30 rounded-xl min-w-0">
          <div class="w-10 h-10 bg-amber-500/20 rounded-full flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
            </svg>
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-xs sm:text-sm text-white truncate">New follower: John Smith</p>
            <p class="text-xs text-slate-400 truncate">2 hours ago</p>
          </div>
          <span class="text-xs sm:text-sm text-amber-400 flex-shrink-0">+$50</span>
        </div>

        <div class="flex items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-slate-800/30 rounded-xl min-w-0">
          <div class="w-10 h-10 bg-blue-500/20 rounded-full flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
            </svg>
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-xs sm:text-sm text-white truncate">Trade executed: EUR/USD</p>
            <p class="text-xs text-slate-400 truncate">4 hours ago</p>
          </div>
          <span class="text-xs sm:text-sm text-amber-400 flex-shrink-0">+$125</span>
        </div>

        <div class="flex items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-slate-800/30 rounded-xl min-w-0">
          <div class="w-10 h-10 bg-orange-500/20 rounded-full flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-xs sm:text-sm text-white truncate">Performance milestone reached</p>
            <p class="text-xs text-slate-400 truncate">1 day ago</p>
          </div>
          <span class="text-xs sm:text-sm text-amber-400 flex-shrink-0">+$200</span>
        </div>
      </div>
    </div>
  </section>
</div>

{% endblock %}

{% block extra_js %}
<script>
const ctx2 = document.getElementById('traderChart');
if (ctx2) {
  new Chart(ctx2, {
    type: 'line',
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'P&L',
        data: [200, 120, 300, 450, 320, 180, 250],
        borderColor: '#f59e0b',
        backgroundColor: 'rgba(16, 185, 129, 0.1)',
        borderWidth: 2,
        fill: true,
        tension: 0.4
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        }
      },
      scales: {
        x: {
          grid: {
            color: 'rgba(255, 255, 255, 0.1)'
          },
          ticks: {
            color: '#94a3b8'
          }
        },
        y: {
          grid: {
            color: 'rgba(255, 255, 255, 0.1)'
          },
          ticks: {
            color: '#94a3b8'
          }
        }
      }
    }
  });
}
</script>
{% endblock %}