{% if dolibarrProductApi 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">
                        {% set mainImage = "" %}
                        <img src="{{ dolibarrProductApi["array_options"]["options_main_image"] }}" class="product-image" alt="Product Image">
                    </div>
                    {% if dolibarrProductApi["array_options"] is defined %}
                        <div class="col-12 product-image-thumbs">
                            <div class="product-image-thumb active"><img src="{{ dolibarrProductApi["array_options"]["options_main_image"] }}" alt="Product Image"></div>

                            {% for key, image in  dolibarrProductApi["array_options"] %}
                                {% if 'options_image' in key and image|length > 10 %}
                            <div class="product-image-thumb "><img src="{{ image }}" alt="Product Image"></div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="col-12 product-image-thumbs">
                                <div class="product-image-thumb active"><img src="{{ dolibarrProductApi["array_options"]["options_main_image"] }}" alt="Product Image"></div>
                        </div>
                    {% endif %}
                </div>
                <div class="col-12 col-sm-8">
                    <h4 class="my-3">{{ dolibarrProductApi["label"] }}</h4>
                    <div>
                        {{ dolibarrProductApi["array_options"]["options_shortdescription"]|raw }}
                    </div>

                    <hr>

                    {% if dolibarrProductApi["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 : {{ dolibarrProductApi["SalePrice"] }}</span>
                                <input name="salePrice"  id="salePriceInput" class="form-control form-control-sm" type="number" placeholder="SalePrice" value="{{ dolibarrProductApi["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;">{{ dolibarrProductApi["price_ttc"] }} </span>
                                </small>
                                <input name="price"  id="priceInput" class="form-control form-control-sm" type="number" placeholder="Price" value="{{ dolibarrProductApi["price_ttc"] }}" 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 : {{ dolibarrProductApi["price_ttc"] }}</span>
                                <input name="price"  id="priceInput" class="form-control form-control-sm" type="number" placeholder="Price" value="{{ dolibarrProductApi["price_ttc"] }}" 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 : {{ dolibarrProductApi["array_options"]["options_marque"] }} </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="{{ dolibarrProductApi["ref"] }}"  >
                                <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="{{ dolibarrProductApi["ref"] }}" 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">
                    {{ dolibarrProductApi["description"]|raw }}
                </div>
            </div>
        </div>
        <!-- /.card-body -->
    </div>
{% else %}
    <h1 style="text-align: center"> SellerSku Not Found ... </h1>
{% endif %}