{% extends "marketplace/layout.html" %}

{% block title %}Project Mycelium - Overview{% endblock %}

{% block marketplace_content %}
<div class="my-4">
    <h1>Project Mycelium Overview</h1>
    <p class="lead">Explore the decentralized ecosystem of resources, applications, and services.</p>
    
    <!-- Overview Stats -->
    <div class="row mt-4">
        <div class="col-md-3">
            <div class="card text-white bg-primary mb-3">
                <div class="card-body">
                    <h5 class="card-title">Compute Resources</h5>
                    <p class="card-text">250+ available slices</p>
                    <a href="/marketplace/compute" class="text-white">Browse Resources →</a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-success mb-3">
                <div class="card-body">
                    <h5 class="card-title">3Nodes</h5>
                    <p class="card-text">120+ certified nodes</p>
                    <a href="/marketplace/mycelium_nodes" class="text-white">Browse Mycelium Nodes →</a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-info mb-3">
                <div class="card-body">
                    <h5 class="card-title">Gateways</h5>
                    <p class="card-text">45+ active gateways</p>
                    <a href="/marketplace/gateways" class="text-white">Browse Gateways →</a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-warning mb-3">
                <div class="card-body">
                    <h5 class="card-title">Applications</h5>
                    <p class="card-text">80+ self-healing apps</p>
                    <a href="/marketplace/applications" class="text-white">Browse Applications →</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Featured Items -->
    <h2 class="mt-5 mb-4">Featured Items</h2>
    <div class="row">
        {% if featured_products is defined and featured_products | length > 0 %}
            {% for item in featured_products %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="marketplace-item">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        {% set cat = 'other' %}
                        {% if item.product is defined and item.product.category_id is defined %}
                            {% set cat = item.product.category_id %}
                        {% endif %}
                        <span class="badge bg-{% if cat == 'compute' %}primary{% elif cat == 'hardware' %}success{% elif cat == 'gateway' %}info{% elif cat == 'application' %}warning{% else %}secondary{% endif %} badge-category">
                            {{ cat }}
                        </span>
                        {% if item.product is defined and item.product.metadata is defined and (item.product.metadata.featured | default(value=false)) %}
                        <span class="badge bg-warning">Featured</span>
                        {% endif %}
                    </div>
                    {% set prod_name = 'Unnamed' %}
                    {% set prod_desc = '' %}
                    {% set provider_name = '' %}
                    {% set prod_id = '' %}
                    {% set category_id = '' %}
                    {% set base_price = 0 %}
                    {% set provider_id = '' %}
                    {% if item.product is defined %}
                        {% if item.product.name is defined %}{% set prod_name = item.product.name %}{% endif %}
                        {% if item.product.description is defined %}{% set prod_desc = item.product.description %}{% endif %}
                        {% if item.product.provider_name is defined %}{% set provider_name = item.product.provider_name %}{% endif %}
                        {% if item.product.id is defined %}{% set prod_id = item.product.id %}{% endif %}
                        {% if item.product.category_id is defined %}{% set category_id = item.product.category_id %}{% endif %}
                        {% if item.product.base_price is defined %}{% set base_price = item.product.base_price %}{% endif %}
                        {% if item.product.provider_id is defined %}{% set provider_id = item.product.provider_id %}{% endif %}
                    {% endif %}
                    <h4>{{ prod_name }}</h4>
                    <p>{{ prod_desc }}</p>
                    
                    <!-- Product Specifications -->
                    {% if item.product is defined and item.product.attributes is defined and item.product.attributes | length > 0 %}
                    <div class="row mb-3">
                        {% for attr_name, attr_value in item.product.attributes %}
                            {% if attr_name == "cpu_cores" %}
                            <div class="col-6">
                                <div class="spec-item">
                                    <i class="bi bi-cpu me-1"></i>
                                    <small>{{ attr_value.value | default(value='') }} Cores</small>
                                </div>
                            </div>
                            {% elif attr_name == "memory_gb" %}
                            <div class="col-6">
                                <div class="spec-item">
                                    <i class="bi bi-memory me-1"></i>
                                    <small>{{ attr_value.value | default(value='') }} GB RAM</small>
                                </div>
                            </div>
                            {% elif attr_name == "storage_gb" %}
                            <div class="col-6">
                                <div class="spec-item">
                                    <i class="bi bi-hdd me-1"></i>
                                    <small>{{ attr_value.value | default(value='') }} GB Storage</small>
                                </div>
                            </div>
                            {% elif attr_name == "location" %}
                            <div class="col-6">
                                <div class="spec-item">
                                    <i class="bi bi-geo-alt me-1"></i>
                                    <small>{{ attr_value.value | default(value='') }}</small>
                                </div>
                            </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="text-primary fw-bold">{{ item.formatted_price | default(value="") }}</span>
                            <br><small class="text-muted">by {{ provider_name }}</small>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-success buy-now-btn"
                                    data-product-id="{{ prod_id }}"
                                    data-product-name="{{ prod_name }}"
                                    data-category="{{ category_id }}"
                                    data-unit-price="{{ base_price }}"
                                    data-provider-id="{{ provider_id }}"
                                    data-provider-name="{{ provider_name }}"
                                    title="Buy instantly with your wallet balance">
                                <i class="bi bi-lightning-fill me-1"></i>Buy Now
                            </button>
                            <button class="btn btn-sm btn-outline-primary add-to-cart-btn"
                                    data-product-id="{{ prod_id }}"
                                    data-product-name="{{ prod_name }}"
                                    data-product-price="{{ item.formatted_price | default(value='') }}">
                                <i class="bi bi-cart-plus me-1"></i>Add to Cart
                            </button>
                            <a href="/products/{{ prod_id }}" class="btn btn-sm btn-outline-primary">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
        <div class="col-12">
            <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                No featured products available at the moment.
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Popular Applications -->
    <h2 class="mt-5 mb-4">Popular Applications</h2>
    <div class="row">
        {% if popular_applications is defined and popular_applications | length > 0 %}
            {% for item in popular_applications %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="marketplace-item">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <span class="badge bg-warning badge-category">Application</span>
                        {% if item.product is defined and item.product.metadata is defined and (item.product.metadata.featured | default(value=false)) %}
                        <span class="badge bg-warning">Featured</span>
                        {% endif %}
                    </div>
                    {% set prod_name = 'Unnamed' %}
                    {% set prod_desc = '' %}
                    {% set provider_name = '' %}
                    {% set prod_id = '' %}
                    {% set category_id = '' %}
                    {% set base_price = 0 %}
                    {% set provider_id = '' %}
                    {% set unit_price = 0 %}
                    {% set currency = '' %}
                    {% if item.product is defined %}
                        {% if item.product.name is defined %}{% set prod_name = item.product.name %}{% endif %}
                        {% if item.product.description is defined %}{% set prod_desc = item.product.description %}{% endif %}
                        {% if item.product.provider_name is defined %}{% set provider_name = item.product.provider_name %}{% endif %}
                        {% if item.product.id is defined %}{% set prod_id = item.product.id %}{% endif %}
                        {% if item.product.category_id is defined %}{% set category_id = item.product.category_id %}{% endif %}
                        {% if item.product.base_price is defined %}{% set base_price = item.product.base_price %}{% endif %}
                        {% if item.product.provider_id is defined %}{% set provider_id = item.product.provider_id %}{% endif %}
                    {% endif %}
                    {% if item.price is defined %}
                        {% if item.price.display_amount is defined %}{% set unit_price = item.price.display_amount %}{% endif %}
                        {% if item.price.display_currency is defined %}{% set currency = item.price.display_currency %}{% endif %}
                    {% endif %}
                    <h4>{{ prod_name }}</h4>
                    <p>{{ prod_desc | truncate(length=100) }}</p>
                    
                    <!-- Application Specifications -->
                    {% if item.product is defined and item.product.attributes is defined and item.product.attributes | length > 0 %}
                    <div class="row mb-3">
                        {% if item.product.attributes is defined and item.product.attributes.app_type is defined %}
                        <div class="col-6">
                            <div class="spec-item">
                                <i class="bi bi-app me-1"></i>
                                <small>{{ item.product.attributes.app_type.value | default(value='') }}</small>
                            </div>
                        </div>
                        {% endif %}
                        {% if item.product.attributes is defined and item.product.attributes.deployment_type is defined %}
                        <div class="col-6">
                            <div class="spec-item">
                                <i class="bi bi-box me-1"></i>
                                <small>{{ item.product.attributes.deployment_type.value | default(value='') }}</small>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="text-primary fw-bold">{{ item.formatted_price | default(value="") }}</span>
                            <br><small class="text-muted">by {{ provider_name }}</small>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-success buy-now-btn"
                                    data-product-id="{{ prod_id }}"
                                    data-product-name="{{ prod_name }}"
                                    data-unit-price="{{ unit_price }}"
                                    data-currency="{{ currency }}">
                                <i class="bi bi-lightning-fill me-1"></i>Buy Now
                            </button>
                            <button class="btn btn-sm btn-outline-primary add-to-cart-btn"
                                    data-product-id="{{ prod_id }}"
                                    data-product-name="{{ prod_name }}"
                                    data-category="{{ category_id }}"
                                    data-unit-price="{{ base_price }}"
                                    data-provider-id="{{ provider_id }}"
                                    data-provider-name="{{ provider_name }}"
                                    data-quantity="1"
                                    title="Buy instantly with your wallet balance">
                                <i class="bi bi-cart-plus me-1"></i>Add to Cart
                            </button>
                            <a href="/products/{{ prod_id }}" class="btn btn-sm btn-outline-primary">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
        <div class="col-12">
            <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                No popular applications available at the moment.
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Available Services -->
    <h2 class="mt-5 mb-4">Available Services</h2>
    <div class="row">
        {% if available_services is defined and available_services | length > 0 %}
            {% for item in available_services %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="marketplace-item">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <span class="badge bg-secondary badge-category">Service</span>
                        {% if item.product is defined and item.product.metadata is defined and (item.product.metadata.featured | default(value=false)) %}
                        <span class="badge bg-warning">Featured</span>
                        {% endif %}
                    </div>
                    {% set prod_name = 'Unnamed' %}
                    {% set prod_desc = '' %}
                    {% set provider_name = '' %}
                    {% set prod_id = '' %}
                    {% set category_id = '' %}
                    {% set base_price = 0 %}
                    {% set provider_id = '' %}
                    {% set unit_price = 0 %}
                    {% set currency = '' %}
                    {% if item.product is defined %}
                        {% if item.product.name is defined %}{% set prod_name = item.product.name %}{% endif %}
                        {% if item.product.description is defined %}{% set prod_desc = item.product.description %}{% endif %}
                        {% if item.product.provider_name is defined %}{% set provider_name = item.product.provider_name %}{% endif %}
                        {% if item.product.id is defined %}{% set prod_id = item.product.id %}{% endif %}
                        {% if item.product.category_id is defined %}{% set category_id = item.product.category_id %}{% endif %}
                        {% if item.product.base_price is defined %}{% set base_price = item.product.base_price %}{% endif %}
                        {% if item.product.provider_id is defined %}{% set provider_id = item.product.provider_id %}{% endif %}
                    {% endif %}
                    {% if item.price is defined %}
                        {% if item.price.display_amount is defined %}{% set unit_price = item.price.display_amount %}{% endif %}
                        {% if item.price.display_currency is defined %}{% set currency = item.price.display_currency %}{% endif %}
                    {% endif %}
                    <h4>{{ prod_name }}</h4>
                    <p>{{ prod_desc | truncate(length=100) }}</p>
                    
                    <!-- Service Specifications -->
                    {% if item.product is defined and item.product.attributes is defined and item.product.attributes | length > 0 %}
                    <div class="row mb-3">
                        {% if item.product.attributes is defined and item.product.attributes.service_type is defined %}
                        <div class="col-6">
                            <div class="spec-item">
                                <i class="bi bi-gear me-1"></i>
                                <small>{{ item.product.attributes.service_type.value | default(value='') }}</small>
                            </div>
                        </div>
                        {% endif %}
                        {% if item.product.attributes is defined and item.product.attributes.expertise_level is defined %}
                        <div class="col-6">
                            <div class="spec-item">
                                <i class="bi bi-star me-1"></i>
                                <small>{{ item.product.attributes.expertise_level.value | default(value='') }}</small>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="text-primary fw-bold">{{ item.formatted_price | default(value="") }}</span>
                            <br><small class="text-muted">by {{ provider_name }}</small>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-success buy-now-btn"
                                    data-product-id="{{ prod_id }}"
                                    data-product-name="{{ prod_name }}"
                                    data-unit-price="{{ unit_price }}"
                                    data-currency="{{ currency }}">
                                <i class="bi bi-lightning-fill me-1"></i>Buy Now
                            </button>
                            <button class="btn btn-sm btn-outline-primary add-to-cart-btn"
                                    data-product-id="{{ prod_id }}"
                                    data-product-name="{{ prod_name }}"
                                    data-category="{{ category_id }}"
                                    data-unit-price="{{ base_price }}"
                                    data-provider-id="{{ provider_id }}"
                                    data-provider-name="{{ provider_name }}"
                                    data-quantity="1"
                                    title="Buy instantly with your wallet balance">
                                <i class="bi bi-cart-plus me-1"></i>Add to Cart
                            </button>
                            <a href="/products/{{ prod_id }}" class="btn btn-sm btn-outline-primary">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
        <div class="col-12">
            <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                No services available at the moment.
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}

{% block scripts %}
{{ super() }}
<script type="application/json" id="marketplace-dashboard-hydration">{}</script>
<script src="/static/js/marketplace_dashboard.js"></script>
{% endblock %}