{% if dolibarProduct is not null %}
    <div class="row">
        <div class="col-4" >
            {% if jumiaProduct is not null %}
                <img src="{{ jumiaProduct.mainImage }}" alt="" style="width: 100%">
            {% elseif jumiaProductApi is not null %}
                <img src="{{ jumiaProductApi['MainImage'] }}" alt="" style="width: 100%">
            {% else %}
                <h1 style="text-align: center"> Image Not Found  </h1>
            {% endif %}

        </div>
        <div class="col-8">
            <div class="card">
                <div class="card-body">

                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item text-center" style=" border-top: thick; padding-top: 0;">
                                <h3> {{ jumiaProduct.Name }}</h3>
                            </li>
                            <li class="list-group-item">
                                <b>Stock Dolibarr</b> <a class="float-right">{{ stockDolibarr }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Stock Warehouse</b> <a class="float-right">{{ stockWarehouse }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Last Transaction</b> <a class="float-right">{{ lastTransaction.TransactionDate|date("d/m/Y") }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Top Transaction</b> <i class="fa-arrow-alt-circle-up fas mx-2 text-success"></i>
                                <a class="float-right">
                                    <span class="font-weight-bold" style="color: var(--green);">{{ topTransaction.Montant }} TND</span> - [ {{ topTransaction.TransactionDate|date("d/m/Y") }} ]
                                </a>
                            </li>
                            <li class="list-group-item">
                                <b>Min Transaction</b> <i class="fa-arrow-alt-circle-down fas mx-2 text-danger"></i>
                                <a class="float-right">
                                    <span class="font-weight-bold" style="color: #d90f0f;">{{ minTransaction.Montant }} TND</span>
                                     - [ {{ minTransaction.TransactionDate|date("d/m/Y") }} ]
                                </a>
                            </li>
                        </ul>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <h1 style="text-align: center"> Product Not Found ... 33</h1>
{% endif %}