<!-- Modal --><div class="modal fade" id="productInfo-{{id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header border-0"> <button type="button" class="close text-indigo" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body pr-5 pr-lg-5 pr-md-5 pb-5 pb-lg-5 pb-md-5 pl-5 pl-lg-5 pl-md-5"> <div class="row"> <div class="col-lg-6"> <div class="productInfoModal-left mb-4 mb-md-4 mb-lg-0"> <img style="width: 100%;" src="{{ image.getThumbnail('product-info-modal') }}" alt="Product-image-{{ name }}"> </div> </div> <div class="col-lg-6"> <div class="productInfoModal-right d-flex flex-column h-100"> <h5 class="font-weight-bold text-indigo mb-2 mb-lg-2 mb-md-2"> {{ name }} </h5> <div class="text-deepGray {{ not app.user ? 'mb-3 mb-lg-3 mb-md-3' }}"> {{ shortDescription | u.truncate(500) | raw }} </div> {% if app.user %} <p class="text-deepGray my-3 my-lg-3 my-md-3">From <span>{{ price.net_price_str }}</span></p> {% endif %} <a href="{{ link }}" class="big mb-0 font-weight-bold mt-auto btn btn-primary align-self-start"> {{ 'View full details' | trans }} </a> </div> </div> </div> </div> </div> </div></div>