{% if jumiaProductApi is not null %}
    <div class="card card-solid">
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-sm-4">
                    <div class="col-12">
                        <img src="{{ jumiaProductApi["MainImage"] }}" class="product-image" alt="Product Image">
                    </div>
                    {% set active = "active" %}
                    {% if jumiaProductApi["Images"]["Image"][0] is defined %}
                        <div class="col-12 product-image-thumbs">
                            {% for image in  jumiaProductApi["Images"]["Image"] %}
                            <div class="product-image-thumb {{ active }}"><img src="{{ image }}" alt="Product Image"></div>
                                {% set active = " " %}
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="col-12 product-image-thumbs">
                                <div class="product-image-thumb active"><img src="{{ jumiaProductApi["Images"]["Image"] }}" alt="Product Image"></div>
                        </div>
                    {% endif %}
                </div>
                <div class="col-12 col-sm-8">
                    <h4 class="my-3">{{ jumiaProductApi["Name"] }}</h4>
                    <div>
                        {{ jumiaProductApi["ProductData"]["ShortDescription"]|raw }}
                    </div>

                    <hr>

                    {% if jumiaProductApi["SalePrice"] is defined %}
                        <div class="bg-gradient-yellow py-2 px-3 mt-4">
                            <h3 class="mb-0" style="   display: flex;   align-items: baseline; justify-content: space-between; ">
                                <span>Special Price : {{ jumiaProductApi["SalePrice"] }}</span>
                                <input name="salePrice"  id="salePriceInput" class="form-control form-control-sm" type="number" placeholder="SalePrice" value="{{ jumiaProductApi["SalePrice"] }}" style=" display: inline !important;  width: unset; " required>


                            </h3>
                            <h4 class="mt-0" style="   display: flex;   align-items: baseline; justify-content: space-between; ">
                                <small>Price : <span style="text-decoration: line-through;">{{ jumiaProductApi["Price"] }} </span>
                                </small>
                                <input name="price"  id="priceInput" class="form-control form-control-sm" type="number" placeholder="Price" value="{{ jumiaProductApi["Price"] }}" style=" display: inline !important;  width: unset; " required>

                            </h4>
                        </div>
                    {% else %}
                        <div class="bg-gradient-yellow py-2 px-3 mt-4">
                            <h3 class="mb-0" style="   display: flex;   align-items: baseline; justify-content: space-between; ">
                                <span>Price : {{ jumiaProductApi["Price"] }}</span>
                                <input name="price"  id="priceInput" class="form-control form-control-sm" type="number" placeholder="Price" value="{{ jumiaProductApi["Price"] }}" style=" display: inline !important;  width: unset; " required>


                            </h3>
                        </div>
                    {% endif %}
                    <div class=" py-2   " style="background: darkgrey;">
                    <div class="form-group  px-3" style="    margin-bottom: 0.1rem;   display: flex;   align-items: baseline; justify-content: space-between; ">
                        <label>Marque : {{ jumiaProductApi["Brand"] }} </label>
                        <input name="marque"  id="marqueInput" class="blockEdit form-control form-control-sm" type="number" placeholder="Marque"  style=" display: inline !important;  width: unset; " required>

                    </div>
                    <div class="form-group   px-3" style="  margin-bottom: 0; display: flex;   align-items: baseline; justify-content: space-between; ">
                        <label>Categories </label>
                        <input type="text" id="categoriesInput" class="form-control form-control-sm" placeholder="1,2,3" style=" display: inline !important;  width: unset; " required>
                    </div>
                    </div>




                    {% if existedInMagento == "true" %}
                        <div class="mt-4">
                            <div class="btn btn-secondary btn-block btn-lg btn-flat" data-seller-sku="{{ jumiaProductApi["SellerSku"] }}"  >
                                <i class="fas fa-check fa-lg mr-2"></i>
                                Existed in Magento
                            </div>
                        </div>
                    {% else %}

                    <div class="mt-4">
                        <div class="btn btn-success btn-block btn-lg btn-flat" data-seller-sku="{{ jumiaProductApi["SellerSku"] }}" id="btn-add-to-magento">
                            <i class="fas fa-share-square fa-lg mr-2"></i>
                            Add to Magento
                        </div>
                    </div>
                    {% endif %}

                </div>
            </div>
            <div class="row mt-4">
                <div class="tab-content p-3" id="nav-tabContent">
                    {{ jumiaProductApi["Description"]|raw }}
                </div>
            </div>
        </div>
        <!-- /.card-body -->
    </div>
{% else %}
    <h1 style="text-align: center"> SellerSku Not Found ... </h1>
{% endif %}