{% include "@Components/modals/wishlist-share-modal/wishlist-share-modal.twig" with {props: {
id: "wishlist-modal",
copy: {
vars: {
full_name: "wishlist-url",
value: "https://www.google.com/",
label: "Odkaz ke sdílení"|trans,
type: "copy",
}
}
}} %}
<a class="link d-inline-flex u-fw-600 align-items-center --icon-before" href="#" title="Sdílet seznam přání" data-modal-target="wishlist-modal">
<span class="link__title">Sdílet seznam přání</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_7042_46144)"><path fill="#15324F" fill-rule="evenodd" d="M12.78 0a3.247 3.247 0 0 0-3.132 4.089L6.582 5.754a3.235 3.235 0 0 0-2.338-.998A3.247 3.247 0 0 0 1 8a3.247 3.247 0 0 0 3.244 3.244c.918 0 1.748-.384 2.338-.998l3.066 1.665A3.247 3.247 0 0 0 12.78 16a3.247 3.247 0 0 0 3.244-3.244 3.247 3.247 0 0 0-3.244-3.244c-.918 0-1.748.384-2.338.998L7.376 8.845a3.235 3.235 0 0 0 0-1.69l3.066-1.665c.59.614 1.42.998 2.338.998a3.247 3.247 0 0 0 3.244-3.244A3.247 3.247 0 0 0 12.78 0Zm-1.634 3.244c0-.901.734-1.634 1.634-1.634.901 0 1.635.733 1.635 1.634 0 .9-.734 1.634-1.634 1.634-.901 0-1.635-.733-1.635-1.634ZM2.61 8c0-.9.733-1.634 1.634-1.634.9 0 1.634.733 1.634 1.634 0 .9-.733 1.634-1.634 1.634-.901 0-1.634-.733-1.634-1.634Zm8.536 4.756c0-.9.734-1.634 1.634-1.634.901 0 1.635.733 1.635 1.634 0 .901-.734 1.634-1.634 1.634-.901 0-1.635-.733-1.635-1.634Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_7042_46144"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg> </span>
</span>
</a>
<div class="c-modal --size-md --hidden" id="wishlist-modal">
<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">Sdílet seznam přání</h2>
</header>
<div class="c-modal__body d-flex flex-column gap-4">
<div class="f-text d-flex flex-column gap-1 u-posr mb-3 --copy --active">
<div class="f-text__wrap d-flex align-items-center u-posr">
<label class="f-label d-flex align-items-center mb-0 u-fz-md --active">
Odkaz ke sdílení
</label>
<input class="f-base f-text__input" type="copy" value="https://www.google.com/" name=wishlist-url>
<div class="f-text__toggle u-posa u-translate-middle-y u-top-50-p justify-content-center align-items-center d-flex u-cursor-pointer">
<span class="icon d-flex align-items-center justify-content-center --sm f-text__toggle-icon --off">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.342 0C6.198 0 5.267.93 5.267 2.074v8.659H16V2.073C16 .93 15.07 0 13.926 0H7.342Zm-.56 2.074c0-.308.25-.56.56-.56h6.584a.56.56 0 0 1 .56.56v7.144H6.782V2.074ZM2.074 5.267C.93 5.267 0 6.198 0 7.342V16h10.732v-4.148H9.219v2.634H1.514V7.342c0-.309.251-.56.56-.56h2.074V5.267H2.074Z" clip-rule="evenodd"/></svg> </span>
</div>
<span class="f-copy-alert u-posa u-fz-sm gap-1 d-flex align-items-center">
<span class="f-copy-alert__icon">
<span class="icon d-flex align-items-center justify-content-center --colored --success --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span>
</span>
<span class="f-copy-alert__title">Odkaz byl úspěšně zkopírován</span>
</span>
<span class="icon d-flex align-items-center justify-content-center --colored --danger f-text__invalid-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.026 15A7.034 7.034 0 0 1 1 7.974c.33-9.3 13.724-9.297 14.053 0A7.034 7.034 0 0 1 8.026 15Zm0-12.296c-6.964.221-6.963 10.319 0 10.54 6.964-.222 6.964-10.32 0-10.54Zm.879 1.756H7.148v4.392h1.757V4.46Zm0 5.27H7.148v1.757h1.757V9.73Z"/></svg> </span>
</div>
<span class="f-error u-fz-sm gap-1 d-none">
<span class="f-error__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span>
</span>
<span class="f-error__title"></span>
</span>
</div>
</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>