{% extends 'base/layout.html' %}
{% load static %}

{% block title %}Seller Dashboard - TCGKof{% endblock %}

{% block content %}
<div class="dashboard-container" style="padding: 2rem 0;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h1 style="font-size: 2rem; font-weight: 700;">Seller Dashboard</h1>
        <a href="{% url 'store:card_list' %}" class="btn btn-outline">View Marketplace</a>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 3rem;">
        <!-- Stat Card 1 -->
        <div style="background: var(--bg-card, #1e293b); padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--border-color, #334155);">
            <div style="color: var(--text-muted, #94a3b8); font-size: 0.875rem; margin-bottom: 0.5rem;">Total Sales</div>
            <div style="font-size: 1.5rem; font-weight: 700;">$0.00</div>
        </div>
        <!-- Stat Card 2 -->
        <div style="background: var(--bg-card, #1e293b); padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--border-color, #334155);">
            <div style="color: var(--text-muted, #94a3b8); font-size: 0.875rem; margin-bottom: 0.5rem;">Active Listings</div>
            <div style="font-size: 1.5rem; font-weight: 700;">0</div>
        </div>
        <!-- Stat Card 3 -->
        <div style="background: var(--bg-card, #1e293b); padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--border-color, #334155);">
            <div style="color: var(--text-muted, #94a3b8); font-size: 0.875rem; margin-bottom: 0.5rem;">Orders to Ship</div>
            <div style="font-size: 1.5rem; font-weight: 700;">0</div>
        </div>
    </div>

    <div style="background: var(--bg-card, #1e293b); padding: 2rem; border-radius: 1rem; border: 1px solid var(--border-color, #334155); text-align: center;">
        <h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem;">Start Listing</h2>
        <p style="color: var(--text-muted, #94a3b8); margin-bottom: 1.5rem;">You don't have any active listings yet. Add your cards to the marketplace to start selling.</p>
        <button class="btn" disabled style="opacity: 0.5; cursor: not-allowed;">Add New Listing (Coming Soon)</button>
    </div>
</div>
{% endblock %}