{% extends 'admin/hub/layout.html.twig' %}

{% set hub_title = 'Mercuriale' %}
{% set hub_breadcrumbs = [
    { label: 'Mercuriale' }
] %}

{% block hub_content %}
<div class="hub-content" data-controller="mercuriale-hub" data-mercuriale-hub-search-url-value="{{ path('admin_hub_mercuriale_search') }}">
    <h1 class="hub-title"><i class="fas fa-tags"></i> Mercuriale</h1>

    {# Stats #}
    <div class="hub-stats">
        <div class="hub-stat-card hub-stat-card--gold">
            <div class="hub-stat-card__value">{{ mercuriale_count }}</div>
            <div class="hub-stat-card__label">prix actifs</div>
        </div>
        <div class="hub-stat-card">
            <div class="hub-stat-card__value">{{ fournisseur_count }}</div>
            <div class="hub-stat-card__label">fournisseurs</div>
        </div>
    </div>

    {# CTAs #}
    <div class="hub-ctas">
        <a href="{{ path('app_mercuriale_import') }}" class="hub-cta hub-cta--primary">
            <i class="fas fa-file-excel"></i> Importer des prix
        </a>
    </div>

    {# Fournisseur cards #}
    {% if fournisseurs is not empty %}
    <div class="hub-section">
        <h2 class="hub-section__title">Fournisseurs</h2>
        <div class="hub-fournisseur-cards">
            {% for row in fournisseurs %}
                <div class="hub-fournisseur-card"
                     data-action="click->mercuriale-hub#selectFournisseur"
                     data-fournisseur-id="{{ row.fournisseur.id }}">
                    <div class="hub-fournisseur-card__name">{{ row.fournisseur.nom }}</div>
                    <div class="hub-fournisseur-card__count">{{ row.productCount }} produit{{ row.productCount > 1 ? 's' : '' }}</div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# Search bar + filters #}
    <div class="hub-search-bar">
        <input type="text"
               class="hub-search-bar__input"
               placeholder="Rechercher un produit ou fournisseur..."
               data-mercuriale-hub-target="searchInput"
               data-action="input->mercuriale-hub#onSearchInput">

        <select class="hub-search-bar__select"
                data-mercuriale-hub-target="fournisseurFilter"
                data-action="change->mercuriale-hub#onFournisseurDropdown">
            <option value="">Tous les fournisseurs</option>
            {% for row in fournisseurs %}
                <option value="{{ row.fournisseur.id }}">{{ row.fournisseur.nom }}</option>
            {% endfor %}
        </select>

        <input type="date"
               class="hub-search-bar__date"
               data-mercuriale-hub-target="dateFrom"
               data-action="change->mercuriale-hub#onDateChange"
               title="Date début">

        <input type="date"
               class="hub-search-bar__date"
               data-mercuriale-hub-target="dateTo"
               data-action="change->mercuriale-hub#onDateChange"
               title="Date fin">
    </div>

    {# Loading #}
    <div data-mercuriale-hub-target="loading" class="hub-loading">
        <i class="fas fa-spinner fa-spin"></i>
        <p>Chargement...</p>
    </div>

    {# Results (Stimulus-rendered) #}
    <div data-mercuriale-hub-target="results"></div>

    {# Pagination (Stimulus-rendered) #}
    <div data-mercuriale-hub-target="pagination" class="hub-pagination"></div>

    {# Link to CRUD #}
    <div class="hub-section">
        <a href="{{ crud_mercuriale_url }}" class="hub-section__link">Voir tous les prix dans l'admin <i class="fas fa-arrow-right"></i></a>
    </div>
</div>
{% endblock %}