{% include "@Components/button/button.twig" with {props: {
title: "Open",
data: {
"modal-target": "modal-example-01"
}
}
} %}
{% include "@Components/modals/product-out-of-stock-modal/product-out-of-stock-modal.twig" with {props: {
message: "V košíku máte zboží, které není dostupné a nelze jej aktuálně objednat. Odstraňte jej prosím.",
id: "modal-example-01",
}} %}
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" href='#' data-modal-target="modal-example-01">
<span class="btn__title u-z-index-1">
Open
</span>
</a>
<div class="c-modal --size-md --hidden" id="modal-example-01">
<div class="c-modal__dialog">
<div class="c-modal__content u-rounded-4">
<div class="c-modal__inner d-flex flex-column">
<header class="c-modal__header d-flex flex-column gap-1">
<h2 class="u-h3 c-modal__heading">Nedostupné zboží</h2>
</header>
<div class="c-modal__body d-flex flex-column gap-4">
<div class="d-flex flex-column align-items-center gap-2 text-center">
<span class="icon d-flex align-items-center justify-content-center --colored --black --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg> </span>
<span class="u-fw-500">
V košíku máte zboží, které není dostupné a nelze jej aktuálně objednat. Odstraňte jej prosím.
</span>
</div>
<button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --animation-zoom --full-width w-100 c-modal__close" type="button" aria-label="Ano smazat">
<span class="btn__title u-z-index-1">
Ano smazat
</span>
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"/></svg> </span>
</span>
</button>
</div>
<div class="c-modal__button-container">
<button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm --icon-only c-modal__close c-modal__close-cross" aria-label="close modal">
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg> </span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>