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

{% block title %}Project Mycelium - Agentic Apps{% endblock %}

{% block marketplace_content %}
<div class="my-4">
    <h1>Agentic Apps</h1>
    <p class="lead">Discover self-healing applications that maintain sovereignty while offering convenience.</p>

    <!-- Agentic Apps Introduction -->
    <div class="alert alert-info mb-4">
        <div class="d-flex">
            <div class="me-3">
                <i class="bi bi-info-circle-fill fs-3"></i>
            </div>
            <div>
                <h5 class="alert-heading">How Agentic Apps Work</h5>
                <p>ThreeFold Agentic Apps use a unique model: You provide the compute resources (Slices), while application providers manage the applications. This ensures you maintain sovereignty over your infrastructure while benefiting from professional management.</p>
                <hr>
                <p class="mb-0">When you deploy an application, you'll be guided through the process of allocating the necessary resources if you don't already have them.</p>
            </div>
        </div>
    </div>

    <!-- Filter and Search Section -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Filter Applications</h5>
            <form class="row g-3" method="GET">
                <div class="col-md-3">
                    <label for="appTypeFilter" class="form-label">App Type</label>
                    <select name="app_type" id="appTypeFilter" class="form-select">
                        <option value="">All Types</option>
                        <option value="Web">Web Applications</option>
                        <option value="Productivity">Productivity</option>
                        <option value="Development">Development</option>
                        <option value="Database">Database</option>
                        <option value="Communication">Communication</option>
                        <option value="CMS">Content Management</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="deploymentFilter" class="form-label">Deployment Type</label>
                    <select name="deployment_type" id="deploymentFilter" class="form-select">
                        <option value="">Any</option>
                        <option value="Container">Container</option>
                        <option value="VM">Virtual Machine</option>
                        <option value="Kubernetes">Kubernetes</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="minPriceFilter" class="form-label">Min Price ($)</label>
                    <input type="number" name="min_price" id="minPriceFilter" class="form-control"
                           value="" placeholder="0" min="0" step="1">
                </div>
                <div class="col-md-3">
                    <label for="maxPriceFilter" class="form-label">Max Price ($)</label>
                    <input type="number" name="max_price" id="maxPriceFilter" class="form-control"
                           value="" placeholder="50" min="0" step="1">
                </div>
                <div class="col-md-6 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">Apply Filters</button>
                    <a href="/marketplace/applications" class="btn btn-outline-secondary">Clear</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Applications Grid -->
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
        {% if application_products and application_products | length > 0 %}
            {% for product_data in application_products %}
            <div class="col">
                <div class="card h-100">
                    <div class="position-relative p-4 bg-light text-center">
                        <i class="bi bi-app fs-1 text-primary"></i>
                        <span class="position-absolute top-0 end-0 badge bg-primary m-2">{{ product_data.product.category_id | title }}</span>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <h5 class="card-title">
                                <a href="/products/{{ product_data.product.id }}" class="text-decoration-none text-dark">
                                    {{ product_data.product.name }}
                                </a>
                            </h5>
                            {% if product_data.product.metadata.featured %}
                            <span class="badge bg-warning">Featured</span>
                            {% elif product_data.product.availability == "Available" %}
                            <span class="badge bg-success">Available</span>
                            {% else %}
                            <span class="badge bg-secondary">{{ product_data.product.availability }}</span>
                            {% endif %}
                        </div>
                        <p class="card-text">{{ product_data.product.description | truncate(length=100) }}</p>
                        
                        <!-- Features (from tags) -->
                        {% if product_data.product.metadata.tags and product_data.product.metadata.tags | length > 0 %}
                        <div class="mb-3">
                            <h6 class="mb-2">Features:</h6>
                            <div class="d-flex flex-wrap">
                                {% for tag in product_data.product.metadata.tags %}
                                <span class="badge bg-light text-dark me-1 mb-1">{{ tag | title }}</span>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- Resource Requirements -->
                        {% if product_data.product.attributes %}
                        <div class="mb-3">
                            <h6 class="mb-2">Resource Requirements:</h6>
                            <div class="d-flex">
                                {% if product_data.product.attributes.cpu_cores %}
                                <div class="me-3"><i class="bi bi-cpu me-1"></i> {{ product_data.product.attributes.cpu_cores.value }} cores</div>
                                {% endif %}
                                {% if product_data.product.attributes.memory_gb %}
                                <div class="me-3"><i class="bi bi-memory me-1"></i> {{ product_data.product.attributes.memory_gb.value }} GB</div>
                                {% endif %}
                                {% if product_data.product.attributes.storage_gb %}
                                <div><i class="bi bi-hdd me-1"></i> {{ product_data.product.attributes.storage_gb.value }} GB</div>
                                {% endif %}
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- Provider Info -->
                        <div class="mb-3">
                            <small class="text-muted">
                                <i class="bi bi-building me-1"></i>{{ product_data.product.provider_name }}
                                {% if product_data.product.metadata.location %}
                                <span class="ms-2">
                                    <i class="bi bi-geo-alt me-1"></i>{{ product_data.product.metadata.location }}
                                </span>
                                {% endif %}
                            </small>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="price-info">
                                <span class="text-muted small">Management fee:</span>
                                <div class="fw-bold text-primary">{{ product_data.formatted_price }}</div>
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-success btn-sm buy-now-btn"
                                        data-product-id="{{ product_data.product.id }}"
                                        data-product-name="{{ product_data.product.name }}"
                                        data-unit-price="{{ product_data.price.display_amount }}"
                                        data-currency="{{ product_data.price.display_currency }}"
                                        data-category="applications">
                                    <i class="bi bi-lightning-fill me-1"></i>Buy Now
                                </button>
                                <button class="btn btn-outline-primary btn-sm add-to-cart-btn"
                                        data-product-id="{{ product_data.product.id }}"
                                        data-product-name="{{ product_data.product.name }}"
                                        data-unit-price="{{ product_data.price.display_amount }}"
                                        data-currency="{{ product_data.price.display_currency }}">
                                    <i class="bi bi-cart-plus me-1"></i>Add to Cart
                                </button>
                                <a href="/products/{{ product_data.product.id }}" class="btn btn-outline-secondary btn-sm">View Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="bi bi-app display-1 text-muted"></i>
                    <h4 class="mt-3">No Applications Available</h4>
                    <p class="text-muted">Check back later for new applications.</p>
                </div>
            </div>
        {% endif %}
    </div>

    <!-- Pagination -->
    {% if pagination and pagination.total_pages > 1 %}
    <nav aria-label="Application pages" class="mt-4">
        <ul class="pagination justify-content-center">
            <!-- Previous Page -->
            <li class="page-item {% if not pagination.has_previous %}disabled{% endif %}">
                {% if pagination.has_previous %}
                    <a class="page-link" href="?page={{ pagination.previous_page }}">Previous</a>
                {% else %}
                    <span class="page-link" tabindex="-1" aria-disabled="true">Previous</span>
                {% endif %}
            </li>
            
            <!-- Page 1 -->
            <li class="page-item {% if pagination.current_page == 0 %}active{% endif %}">
                {% if pagination.current_page == 0 %}
                    <span class="page-link">1</span>
                {% else %}
                    <a class="page-link" href="?page=0">1</a>
                {% endif %}
            </li>
            
            <!-- Page 2 (if exists) -->
            {% if pagination.total_pages > 1 %}
            <li class="page-item {% if pagination.current_page == 1 %}active{% endif %}">
                {% if pagination.current_page == 1 %}
                    <span class="page-link">2</span>
                {% else %}
                    <a class="page-link" href="?page=1">2</a>
                {% endif %}
            </li>
            {% endif %}
            
            <!-- Page 3 (if exists) -->
            {% if pagination.total_pages > 2 %}
            <li class="page-item {% if pagination.current_page == 2 %}active{% endif %}">
                {% if pagination.current_page == 2 %}
                    <span class="page-link">3</span>
                {% else %}
                    <a class="page-link" href="?page=2">3</a>
                {% endif %}
            </li>
            {% endif %}
            
            <!-- Page 4 (if exists) -->
            {% if pagination.total_pages > 3 %}
            <li class="page-item {% if pagination.current_page == 3 %}active{% endif %}">
                {% if pagination.current_page == 3 %}
                    <span class="page-link">4</span>
                {% else %}
                    <a class="page-link" href="?page=3">4</a>
                {% endif %}
            </li>
            {% endif %}
            
            <!-- Page 5 (if exists) -->
            {% if pagination.total_pages > 4 %}
            <li class="page-item {% if pagination.current_page == 4 %}active{% endif %}">
                {% if pagination.current_page == 4 %}
                    <span class="page-link">5</span>
                {% else %}
                    <a class="page-link" href="?page=4">5</a>
                {% endif %}
            </li>
            {% endif %}
            
            <!-- Next Page -->
            <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                {% if pagination.has_next %}
                    <a class="page-link" href="?page={{ pagination.next_page }}">Next</a>
                {% else %}
                    <span class="page-link" tabindex="-1" aria-disabled="true">Next</span>
                {% endif %}
            </li>
        </ul>
    </nav>
    
    <!-- Results Info -->
    <div class="text-center text-muted mt-2">
        Showing page {{ pagination.current_page + 1 }} of {{ pagination.total_pages }}
        ({{ pagination.total_count }} total applications)
    </div>
    {% endif %}

    <!-- How It Works Section -->
    <div class="card">
        <div class="card-body">
            <h3 class="card-title">How Application Deployment Works</h3>
            <div class="row">
                <div class="col-md-6">
                    <h5>1. Choose Your Application</h5>
                    <p>Browse our catalog of self-healing applications and select the one that meets your needs.</p>
                    
                    <h5>2. Resource Allocation</h5>
                    <p>We'll guide you through allocating the necessary compute resources (Slices) for your application.</p>
                </div>
                <div class="col-md-6">
                    <h5>3. Deployment & Management</h5>
                    <p>The application provider handles deployment, updates, and maintenance while you retain full sovereignty.</p>
                    
                    <h5>4. Access & Control</h5>
                    <p>Access your application through secure channels while maintaining complete control over your data and infrastructure.</p>
                </div>
            </div>
            
            <div class="alert alert-success mt-3">
                <i class="bi bi-shield-check me-2"></i>
                <strong>Your Sovereignty Guaranteed:</strong> You own the infrastructure, we provide the expertise. Your data never leaves your control.
            </div>
        </div>
    </div>
</div>

<style>
    .price-info {
        text-align: left;
    }
    
    .card-footer {
        border-top: 1px solid rgba(0,0,0,.125);
    }
</style>

<script src="/static/js/marketplace-category.js"></script>

{% endblock %}