<!-- 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>