{% set modal_id = "modal-edit-comparator-name" %}
{% include "@Components/button/button.twig" with {props: {
title: "Open",
data: {
"modal-target": modal_id
}
}
} %}
{% include "@Components/modals/edit-comparator-name-modal/edit-comparator-name-modal.twig" with {props: {
modal_id: modal_id,
comparator_id: "PP23-00487",
form: {
vars: {
action: "",
method: "POST",
},
comparator_name: {
vars: {
id: "comparator-name",
full_name: "comparator-name",
label: "Název konfigurace",
value: "Vánoční tašky Petr"
}
},
color: {
vars: {
type: "radio",
full_name: "color-variant",
label: "Barva podbarvení:",
choices: [
{
title: "Bílá",
utility_color: "white",
value: "white",
checked: true
},
{
title: "Žlutá",
utility_color: "secondary-400",
value: "secondary-400"
},
{
title: "Ružová",
utility_color: "support-pink-400",
value: "support-pink-400"
},
{
title: "Oranžová",
utility_color: "support-orange-400",
value: "support-orange-400"
},
{
title: "Modrá",
utility_color: "support-blue-400",
value: "support-blue-400"
}
],
}
},
submit: {
vars: {
label: "Uložit přejmenování",
full_name: "comparator-save"
}
},
}
}} %}
<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-edit-comparator-name">
<span class="btn__title u-z-index-1">
Open
</span>
</a>
<div class="c-modal --size-sm m-edit-comparator-name --hidden" id="modal-edit-comparator-name">
<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">Editace názvu porovnání konfigurací</h2>
</header>
<div class="c-modal__body ">
<div class="m-edit-comparator-name__body d-flex flex-column">
<form class="base-form d-flex flex-column gap-2 pt-2" name=f-edit-comparator-name>
<input type="hidden" class="f-hidden f-edit-comparator-name__id-input --js-comparator-id-input" name="comparator-id" value="PP23-00487">
<div class="f-edit-comparator-name__name-visual d-flex gap-1 u-border u-border--tertiary-500 u-rounded-100px px-3 py-2 u-posr --js-comparator-name-visual">
<span class="u-posa u-top-0 u-translate-middle-y u-left-0 ms-3 u-fw-500 u-fz-xs u-bg-white px-1">Název konfigurace</span>
<input type="hidden" class="f-hidden --js-comparator-name-input" name="comparator-name" value="Vánoční tašky Petr" id="comparator-name">
<span class="u-fw-600 u-color-text-400 --js-comparator-id-span">
PP23-00487
</span>
<span class="u-fw-600 u-color-text-500 px-1 --js-comparator-name-span" contenteditable="true">
Vánoční tašky Petr
</span>
</div>
<div class="d-flex flex-column flex-sm-row align-items-center justify-content-between gap-2 pe-sm-1">
<span class="u-fw-600">Barva podbarvení:</span>
<div class="g-colors d-flex flex-wrap gap-2 f-edit-comparator-name__colors --js-color-selector">
<label class="f-color u-posr u-rounded-full --lg --radio --checked --has-bg-class u-bg-white" style="--background-color:conic-gradient(
)">
<input class="f-color__input" type="radio" value="white" checked="checked" name=color-variant title="Bílá"></input>
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
<label class="f-color u-posr u-rounded-full --lg --radio --has-bg-class u-bg-secondary-400" style="--background-color:conic-gradient(
)">
<input class="f-color__input" type="radio" value="secondary-400" name=color-variant title="Žlutá"></input>
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
<label class="f-color u-posr u-rounded-full --lg --radio --has-bg-class u-bg-support-pink-400" style="--background-color:conic-gradient(
)">
<input class="f-color__input" type="radio" value="support-pink-400" name=color-variant title="Ružová"></input>
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
<label class="f-color u-posr u-rounded-full --lg --radio --has-bg-class u-bg-support-orange-400" style="--background-color:conic-gradient(
)">
<input class="f-color__input" type="radio" value="support-orange-400" name=color-variant title="Oranžová"></input>
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
<label class="f-color u-posr u-rounded-full --lg --radio --has-bg-class u-bg-support-blue-400" style="--background-color:conic-gradient(
)">
<input class="f-color__input" type="radio" value="support-blue-400" name=color-variant title="Modrá"></input>
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
</div>
</div>
<span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --full-width w-100 c-modal__close mt-2">
<span class="btn__title u-z-index-1">
Zrušit přejmenování
</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" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#15324F" fill-rule="evenodd" d="M6.868 8 2.434 3.565l1.131-1.13L8 6.867l4.434-4.434 1.132 1.131L9.13 8l4.434 4.434-1.13 1.132L8 9.13l-4.435 4.434-1.13-1.13L6.867 8Z" clip-rule="evenodd"/></svg> </span>
</span>
</span>
<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 comparator-save --full-width w-100" type="submit" aria-label="Uložit přejmenování" name=comparator-save>
<span class="btn__title u-z-index-1">
Uložit přejmenování
</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" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M16 2.362v11.614A2.026 2.026 0 0 1 13.976 16H2.024A2.026 2.026 0 0 1 0 13.976V2.024C0 .908.908 0 2.024 0h11.614L16 2.362ZM9.593 4.817H11V1.61H5v3.207h2.984v-2.29h1.609v2.29ZM2.024 14.39h11.952a.415.415 0 0 0 .414-.414V3.029L12.971 1.61h-.362v4.817H3.39V1.61H2.024a.415.415 0 0 0-.414.414v11.952c0 .228.186.414.414.414Zm8.268-1.78H3.44V11h6.852v1.61ZM8.119 10H3.44V8.39h4.679V10Z" clip-rule="evenodd"/></svg> </span>
</span>
</button>
</form>
</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>