{% if request.session.added_product %}
{% load product_tags ocyan_thumbnail basket_popup_tags static l10n i18n %}

{% get_product_add_alert_content request.session.added_product as alert_content %}

<div class="product_alert" aria-live="polite">
	<div class="product_alert_inner">
		<div class="product_alert_header">
			<div class="partial">
				{% picture alert_content.added_product.primary_image.original "100x100" upscale=False alt=Product classes="d-none d-lg-block img-fluid" %}
				<div class="ms-2">
					<div><b class="text-success"><i class="fa fa-check"></i>{% blocktranslate with added_quantity=request.session.added_quantity %}<span class="text-danger">{{ added_quantity }}</span> artikelen zijn toegevoegd aan je winkelmand{% endblocktranslate %}</b></div>
					<div>
						<div>
							{{ alert_content.added_product.get_title }}
						</div>
					</div>
				</div>
				<div class="ms-lg-auto mt-3 mt-lg-0">
					<div><a href="#prod_{{alert_content.added_product.pk}}" id="atb-verder-winkelen-footer" class="btn btn-primary atb-basket close-alert">{% trans "Continue shopping" %}</a></div>
				</div>
			</div>
		</div>
		<div class="product_alert_body">
			{% if alert_content.custom_recommand_products %}
			<div class="products_wrapper">
				<h4>{% trans "Product recommendation" %}:</h4>

				<div class="row">
					{% for item in alert_content.custom_recommand_products %}
						<div class="col-lg-4 col-6 pb-5">
							{% include "oscar/catalogue/partials/product.html" with product=item.product atb="atb-"  %}
						</div>
					{% endfor %}
				</div>
			</div>
			{% endif %}
			
            {% if alert_content.recently_viewed_products %}
			<div class="products_wrapper ">
				<h4>{% trans 'Products you recently viewed' %}:</h4>

				<div class="row">
					{% for product in alert_content.recently_viewed_products %}
						<div class="col-lg-4 col-6 pb-5">
							{% render_product product %}
						</div>
					{% endfor %}
				</div>
			</div>
			{% endif %}
		</div>
		<div class="product_alert_footer">
			<a href="{% url 'basket:summary' %}" id="atb-mandje-bekijken-header" class="btn btn-secondary">
				{% trans "View basket" %}
			</a>
			<a href="{% url 'checkout:index' %}" id="atb-basket" class="btn btn-primary nav_button">
				{% trans "Place order" %}
			</a>
		</div>
	</div>
</div>
<script>
	document.body.classList.add('overflow-hidden');
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelector(".close-alert").addEventListener("click", function() {
            document.querySelector(".product_alert").classList.add("hide");
            document.body.classList.remove("noscroll");
        });
    
        document.querySelector("#atb-verder-winkelen-footer").addEventListener("click", function() {
            document.body.classList.remove("overflow-hidden");
        });
    });
</script>
{% endif %}