{% extends "base.html" %}

{% set active_page = "modules" %}

{% block subtitle %}
 - Module list
{% endblock %}

{% block content %}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h2>Marketplace <span class="fas fa-shopping-cart"></span></h2>
    <div class="input-group-sm mb-0 d-flex">
        <span class="input-group-text"><i class="fa fa-search"></i></span>
        <input id="cardFilter" class="form-control" type="text" onkeyup="cardFilter()" placeholder="Search...">
    </div>
</div>

{% include 'flashed_messages.html' %} 

<div class="row row-cols-1 row-cols-md-5 g-4 mb-5" id="cardsContainer">
{% for modulename, module in templates.items() %}
    <div class="col-md-6 col-lg-3">
        <a href="{{ url('module', module=modulename) }}" class="custom-card">
            <div class="card cards h-100 mx-2 my-2">
                <div class="card-header">
                    <span class="text-muted" style="font-size:0.9em;">
                        {% if "development" in module['keywords'] %}
                        <i class="fas fa-tools fa-fw"></i>
                        Development
                        {% else %}
                        <i class="fas fa-project-diagram fa-fw"></i>
                        Model
                        {% endif %}
                        {% for key in module['keywords'] %}
                        {% if key == "inference" %}
                        | Inference
                        {% endif %}
                        {% if key == "trainable" %}
                        | Trainable
                        {% endif %}
                        {% if kety == "pre-trained" %}
                        | Pre-trained
                        {% endif %}
                        {% endfor %}
                    </span>
                </div>
                <div class="card-body">
                    <h5 class="card-title">
                        {% if module['title'] is defined %}{{ module['title'] }}{% else %}{{ modulename }}{% endif %}
                    </h5>
                    <p class="card-text text-muted">{{ module['summary'] }}</p>
                </div>
            </div>
        </a>
    </div>
{% endfor %}
</div>
<script>

function cardFilter() {
    var input, filter, cards, cardContainer, h5, title, i;
    input = document.getElementById("cardFilter");
    filter = input.value.toUpperCase();
    cardContainer = document.getElementById("cardsContainer");
    cards = cardContainer.getElementsByClassName("card");
    for (i = 0; i < cards.length; i++) {
        title = cards[i].querySelector(".card-body .card-title");
        if (title.innerText.toUpperCase().indexOf(filter) > -1) {
            cards[i].style.display = "";
        } else {
            cards[i].style.display = "none";
        }
    }
}
</script>

{% endblock %}
