{% extends "base.html" %}

{% block title %}Digital Assets Marketplace{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">Digital Assets Marketplace</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item active">Marketplace</li>
    </ol>

    <!-- Stats Cards -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
                <div class="card-body">
                    <h2 class="display-4">{{ stats.active_listings }}</h2>
                    <p class="mb-0">Active Listings</p>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="/marketplace/listings">View Details</a>
                    <div class="small text-white"><i class="bi bi-arrow-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
                <div class="card-body">
                    <h2 class="display-4">${{ stats.total_value }}</h2>
                    <p class="mb-0">Total Market Value</p>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="/marketplace/listings">View Details</a>
                    <div class="small text-white"><i class="bi bi-arrow-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-warning text-white mb-4">
                <div class="card-body">
                    <h2 class="display-4">{{ stats.total_listings }}</h2>
                    <p class="mb-0">Total Listings</p>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="/marketplace/listings">View Details</a>
                    <div class="small text-white"><i class="bi bi-arrow-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-info text-white mb-4">
                <div class="card-body">
                    <h2 class="display-4">${{ stats.total_sales }}</h2>
                    <p class="mb-0">Total Sales</p>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="/marketplace/listings">View Details</a>
                    <div class="small text-white"><i class="bi bi-arrow-right"></i></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-lightning-charge"></i>
                    Quick Actions
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-around">
                        <a href="/marketplace/create" class="btn btn-primary">
                            <i class="bi bi-plus-circle"></i> List New Asset
                        </a>
                        <a href="/marketplace/listings" class="btn btn-success">
                            <i class="bi bi-search"></i> Browse Listings
                        </a>
                        <a href="/marketplace/my" class="btn btn-info">
                            <i class="bi bi-person"></i> My Listings
                        </a>
                        <a href="/assets/my" class="btn btn-secondary">
                            <i class="bi bi-collection"></i> My Assets
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Featured Listings -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-star"></i>
                    Featured Listings
                </div>
                <div class="card-body">
                    <div class="row">
                        {% if featured_listings|length > 0 %}
                            {% for listing in featured_listings %}
                                <div class="col-md-3 mb-3">
                                    <div class="card h-100">
                                        <div class="badge bg-warning text-dark position-absolute" style="top: 0.5rem; right: 0.5rem">Featured</div>
                                        {% if listing.image_url %}
                                            <img src="{{ listing.image_url }}" class="card-img-top" alt="{{ listing.title }}" style="height: 180px; object-fit: cover;">
                                        {% else %}
                                            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 180px;">
                                                <i class="bi bi-image text-secondary" style="font-size: 3rem;"></i>
                                            </div>
                                        {% endif %}
                                        <div class="card-body">
                                            <h5 class="card-title">{{ listing.title }}</h5>
                                            <p class="card-text text-truncate">{{ listing.description }}</p>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span class="badge bg-primary">{{ listing.listing_type }}</span>
                                                <span class="badge bg-secondary">{{ listing.asset_type }}</span>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <strong>${{ listing.price }}</strong>
                                                <a href="/marketplace/{{ listing.id }}" class="btn btn-sm btn-outline-primary">View</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="col-12">
                                <p class="text-center">No featured listings available at this time.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Listings and Sales -->
    <div class="row">
        <!-- Recent Listings -->
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="bi bi-clock"></i>
                    Recent Listings
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Asset</th>
                                    <th>Type</th>
                                    <th>Price</th>
                                    <th>Listing Type</th>
                                    <th>Seller</th>
                                    <th>Listed</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if recent_listings|length > 0 %}
                                    {% for listing in recent_listings %}
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    {% if listing.image_url %}
                                                        <img src="{{ listing.image_url }}" alt="{{ listing.asset_name }}" class="me-2" style="width: 30px; height: 30px; object-fit: cover;">
                                                    {% else %}
                                                        <i class="bi bi-collection me-2"></i>
                                                    {% endif %}
                                                    {{ listing.asset_name }}
                                                </div>
                                            </td>
                                            <td>
                                                {% if listing.asset_type == "Token" %}
                                                    <span class="badge bg-primary">{{ listing.asset_type }}</span>
                                                {% elif listing.asset_type == "NFT" %}
                                                    <span class="badge bg-info">{{ listing.asset_type }}</span>
                                                {% elif listing.asset_type == "RealEstate" %}
                                                    <span class="badge bg-success">Real Estate</span>
                                                {% elif listing.asset_type == "IntellectualProperty" %}
                                                    <span class="badge bg-warning text-dark">IP</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">{{ listing.asset_type }}</span>
                                                {% endif %}
                                            </td>
                                            <td>${{ listing.price }}</td>
                                            <td>{{ listing.listing_type }}</td>
                                            <td>{{ listing.seller_name }}</td>
                                            <td>{{ listing.created_at|date }}</td>
                                            <td>
                                                <a href="/marketplace/{{ listing.id }}" class="btn btn-sm btn-outline-primary">View</a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="7" class="text-center">No recent listings available.</td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="/marketplace/listings" class="btn btn-sm btn-primary">View All Listings</a>
                </div>
            </div>
        </div>

        <!-- Recent Sales -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="bi bi-bag-check"></i>
                    Recent Sales
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Asset</th>
                                    <th>Price</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if recent_sales|length > 0 %}
                                    {% for listing in recent_sales %}
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    {% if listing.image_url %}
                                                        <img src="{{ listing.image_url }}" alt="{{ listing.asset_name }}" class="me-2" style="width: 30px; height: 30px; object-fit: cover;">
                                                    {% else %}
                                                        <i class="bi bi-collection me-2"></i>
                                                    {% endif %}
                                                    {{ listing.asset_name }}
                                                </div>
                                            </td>
                                            <td>${{ listing.sale_price }}</td>
                                            <td>{{ listing.sold_at|date }}</td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="3" class="text-center">No recent sales available.</td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Listing Types Distribution -->
            <div class="card mb-4">
                <div class="card-header">
                    <i class="bi bi-pie-chart"></i>
                    Listing Types
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Count</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for type, count in stats.listings_by_type %}
                                    <tr>
                                        <td>{{ type }}</td>
                                        <td>{{ count }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}