{% extends 'base.html' %}

{% block styles %}
<style>
    .table {
        border-collapse: collapse;
        width: 100%;
    }

    .table th, .table td {
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }

    .table tr:hover {
        background-color: #f5f5f5;
    }

    .search-form {
        margin-bottom: 20px;
    }

    .search-form .input-group {
        width: 300px;
    }
</style>
{% endblock %}

    <div class="content">
{% block content %}

<div class="container px-4 py-5" id="hanging-icons">
    <h2 class="pb-2 border-bottom">{{gettext('t_components_shop')}}</h2>
    <form action="{{ url_for('components.dashboard') }}" method="GET" class="search-form">
    <div class="input-group">
        <input type="text" name="search_query" class="form-control" placeholder="Search components">
        <button type="submit" class="btn btn-primary">Search</button>
    </div>
</form>


    <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
        {% if component_server %}
        {% for component in component_server %}
        <div class="col d-flex align-items-start">
            <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
                <img class="d-block mx-auto mb-4" src="/static/img/logo-k2.png" alt="" width="60">
            </div>
            <div>
                <h2>{{ component.name|title }}</h2>
                <p>{{ component.description }}</p>
                <p>version {{ component.latest_version }}</p>
                {% if component.name in components_names %}
                <button type="button" class="btn btn-success">Installed</button>
                {% else %}
                <a href="/show_components-site/{{ component.id }}" class="btn btn-primary">Install</a>
                {% endif %}
            </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="col">
            <p>No components available.</p>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}


    </div>