{% set content_w_aside_props = {
aside: true,
variant: "reverse"
} %}
{% set order_section_props = {
title: "Objednávka"|trans,
order_id: "id2452345",
order_state: {
value: "delivered",
text: "Doručeno"|trans,
},
products_with_action: false,
pdf_url: "#",
products: [
{
id: "ETHN01",
title: "Papírová taška hnědá ExtraTWIST 22x10x28",
date: "14.06.2023",
img: {
src: "https://placehold.co/72x72",
srcset: [
"https://placehold.co/72x72 1x",
"https://placehold.co/144x144 2x"
]
},
tags: [
{
title: "Potisk",
icon: {
src: "@Images/svg/printer.svg",
},
},
],
color: {
title: "Hnědá",
name: "color-checkbox",
colors: [
"#CFAF8A"
],
},
count: "100 ks",
total_price: "999 999",
},
{
id: "ETHN01",
title: "Papírová taška hnědá ExtraTWIST 22x10x28",
date: "24.06.2023",
img: {
src: "https://placehold.co/72x72",
srcset: [
"https://placehold.co/72x72 1x",
"https://placehold.co/144x144 2x"
]
},
tags: [
{
title: "Potisk",
icon: {
src: "@Images/svg/printer.svg",
},
},
],
color: {
title: "Hnědá",
name: "color-checkbox",
colors: [
"#CFAF8A"
],
},
count: "100 ks",
total_price: "999 999",
},
{
id: "ETHN01",
date: "14.07.2023",
title: "Papírová taška hnědá ExtraTWIST 22x10x28",
img: {
src: "https://placehold.co/72x72",
srcset: [
"https://placehold.co/72x72 1x",
"https://placehold.co/144x144 2x"
]
},
tags: [
{
title: "Potisk",
icon: {
src: "@Images/svg/printer.svg",
},
},
],
color: {
title: "Hnědá",
name: "color-checkbox",
colors: [
"#CFAF8A"
],
},
count: "100 ks",
total_price: "999 999",
},
{
id: "ETHN01",
title: "Papírová taška hnědá ExtraTWIST 22x10x28",
date: "13.03.2023",
img: {
src: "https://placehold.co/72x72",
srcset: [
"https://placehold.co/72x72 1x",
"https://placehold.co/144x144 2x"
]
},
tags: [
{
title: "Potisk",
icon: {
src: "@Images/svg/printer.svg",
},
},
],
color: {
title: "Hnědá",
name: "color-checkbox",
colors: [
"#CFAF8A"
],
},
count: "100 ks",
total_price: "999 999",
},
]
} %}
{% embed "@Components/content-w-aside/content-w-aside.twig" with {props: content_w_aside_props} %}
{% block content %}
{% include "@Components/sections/order-detail-section/order-detail-section.twig" with {props: order_section_props} %}
{% endblock %}
{% endembed %}
<div class="content-w-aside --reverse --columns-3">
<div class="container content-w-aside__container">
<div class="content-w-aside__row">
<div class="content-w-aside__content">
<div class="s-order-detail__header d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
<div class="d-flex gap-3 align-items-center flex-wrap">
<h1 class="base-heading mb-0 u-fw-700 u-h1">
Objednávka
</h1>
<div class="d-flex gap-3 align-items-center">
<h2 class="u-bg-primary-400 px-2 u-h3"> id2452345 </h2>
<div class="i-order-state u-rounded-3 py-1 px-2 u-fw-500 text-nowrap --delivered">
Doručeno
</div>
</div>
</div>
<div class="d-flex gap-2 flex-wrap">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm --full-width-mobile s-order-detail__button-download" href='#'>
<span class="btn__title u-z-index-1">
Stáhnout PDF
</span>
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --sm">
<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="M1 2.146C1 .963 2.006 0 3.243 0h6.482L15 5.048V16H1V2.146Zm2.243-.455a.466.466 0 0 0-.475.455v12.162h10.464V6.244H8.476V1.691H3.243Zm3.72 11.33h-.004l-2.445-2.342 1.248-1.195 1.353 1.295V7.154h1.768v3.63l1.352-1.301 1.25 1.196-2.386 2.284a1.61 1.61 0 0 1-2.136.058Zm3.28-10.134v1.665h1.741l-1.741-1.665Z" clip-rule="evenodd"/></svg> </span>
</span>
</a>
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm --full-width-mobile s-order-detail__button-repeat" href='#'>
<span class="btn__title u-z-index-1">
Opakovat objednávku
</span>
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g fill="#23846F" clip-path="url(#clip0_8823_33768)"><path d="M8 1.25c1.704 0 3.264.55 4.467 1.545l-.635-.08-.154 1.242 2.994.372.373-2.995-1.24-.155-.127 1.02C12.204.787 10.202 0 8 0a8.11 8.11 0 0 0-2.55.409l.391 1.186A6.885 6.885 0 0 1 8 1.25ZM8 14.75c-1.36 0-2.625-.337-3.679-.967l.776-.097-.154-1.24-2.996.372.373 2.995 1.24-.154-.117-.95c.448.293.93.539 1.444.736.964.368 2.01.555 3.113.555 1.373 0 2.73-.35 3.926-1.01l-.605-1.094A6.88 6.88 0 0 1 8 14.75ZM1.25 7.998c0-1.704.55-3.264 1.545-4.467l-.08.635 1.242.154.372-2.994L1.334.953l-.154 1.24 1.019.127C.787 3.793 0 5.796 0 7.998c0 1.374.35 2.73 1.01 3.926l1.094-.605a6.878 6.878 0 0 1-.854-3.32ZM14.711 12.553c.293-.448.539-.93.735-1.445.369-.963.556-2.01.556-3.111 0-.872-.138-1.731-.41-2.552l-1.186.392c.23.694.346 1.42.346 2.16 0 1.359-.338 2.624-.968 3.678l-.097-.777-1.24.155.373 2.995 2.994-.372-.155-1.24-.948.117Z"/></g><defs><clipPath id="clip0_8823_33768"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg> </span>
</span>
</a>
</div>
</div>
<div class="d-flex flex-column">
<div class="s-order-detail__table_header
justify-content-between u-fw-500 mb-3
">
<div class="text-nowrap">Produkty</div>
<div class="text-nowrap">Počet</div>
<div class="text-nowrap">Č. objednávky</div>
<div class="text-nowrap">Datum</div>
<div class="text-end text-nowrap">Cena</div>
</div>
<div class="d-flex flex-column gap-3">
<div class="i-product-order justify-content-between">
<div class="i-product-order__item">
<div class="i-product-overview d-flex align-items-center gap-1" data-product-id="ETHN01">
<div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
<picture>
<img src="https://placehold.co/72x72" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="72" height="72" loading="lazy" draggable="false" srcset="https://placehold.co/72x72 1x, https://placehold.co/144x144 2x">
</picture>
</div>
</div>
<div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
<div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
<div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>
<div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
<label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient(
#CFAF8A
0deg
355deg
)">
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --color-secondary-500 --icon-before i-product-overview__tag">
<span class="i-tag__title">Potisk</span>
<div class="i-tag__icon">
<span class="icon d-flex align-items-center justify-content-center --colored --text">
<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="M13.56 5.44A1.5 1.5 0 0 1 14 6.5V12h-2v2H4v-2H2V6.5A1.5 1.5 0 0 1 3.5 5H4V2h8v3h.5a1.5 1.5 0 0 1 1.06.44ZM11 3H5v2h6V3ZM5 13h6v-3H5v3Zm7-2h1V6.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V11h1V9h8v2Zm0-3V7h-2v1h2Z" clip-rule="evenodd"/></svg> </span>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="i-product-order__count text-nowrap d-flex align-items-center">
<span class="px-2 py-1 u-bg-tertiary-400 u-fw-600 u-fz-sm u-rounded-4 text-nowrap">
100 ks
</span>
</div>
<div class="i-product-order__order text-nowrap d-flex align-items-center">
<span class="u-color-conversion u-fw-700 text-nowrap">
id2452345
</span>
</div>
<div class="i-product-order__date text-nowrap d-flex align-items-center">
<span class="u-fz-sm text-nowrap u-fw-500">14.06.2023</span>
</div>
<div class="i-product-order__price text-end text-nowrap d-flex align-items-center justify-content-end">
<span class="u-fw-700">
999 999
s DPH</span>
</div>
</div>
<div class="i-product-order justify-content-between">
<div class="i-product-order__item">
<div class="i-product-overview d-flex align-items-center gap-1" data-product-id="ETHN01">
<div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
<picture>
<img src="https://placehold.co/72x72" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="72" height="72" loading="lazy" draggable="false" srcset="https://placehold.co/72x72 1x, https://placehold.co/144x144 2x">
</picture>
</div>
</div>
<div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
<div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
<div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>
<div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
<label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient(
#CFAF8A
0deg
355deg
)">
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --color-secondary-500 --icon-before i-product-overview__tag">
<span class="i-tag__title">Potisk</span>
<div class="i-tag__icon">
<span class="icon d-flex align-items-center justify-content-center --colored --text">
<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="M13.56 5.44A1.5 1.5 0 0 1 14 6.5V12h-2v2H4v-2H2V6.5A1.5 1.5 0 0 1 3.5 5H4V2h8v3h.5a1.5 1.5 0 0 1 1.06.44ZM11 3H5v2h6V3ZM5 13h6v-3H5v3Zm7-2h1V6.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V11h1V9h8v2Zm0-3V7h-2v1h2Z" clip-rule="evenodd"/></svg> </span>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="i-product-order__count text-nowrap d-flex align-items-center">
<span class="px-2 py-1 u-bg-tertiary-400 u-fw-600 u-fz-sm u-rounded-4 text-nowrap">
100 ks
</span>
</div>
<div class="i-product-order__order text-nowrap d-flex align-items-center">
<span class="u-color-conversion u-fw-700 text-nowrap">
id2452345
</span>
</div>
<div class="i-product-order__date text-nowrap d-flex align-items-center">
<span class="u-fz-sm text-nowrap u-fw-500">24.06.2023</span>
</div>
<div class="i-product-order__price text-end text-nowrap d-flex align-items-center justify-content-end">
<span class="u-fw-700">
999 999
s DPH</span>
</div>
</div>
<div class="i-product-order justify-content-between">
<div class="i-product-order__item">
<div class="i-product-overview d-flex align-items-center gap-1" data-product-id="ETHN01">
<div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
<picture>
<img src="https://placehold.co/72x72" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="72" height="72" loading="lazy" draggable="false" srcset="https://placehold.co/72x72 1x, https://placehold.co/144x144 2x">
</picture>
</div>
</div>
<div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
<div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
<div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>
<div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
<label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient(
#CFAF8A
0deg
355deg
)">
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --color-secondary-500 --icon-before i-product-overview__tag">
<span class="i-tag__title">Potisk</span>
<div class="i-tag__icon">
<span class="icon d-flex align-items-center justify-content-center --colored --text">
<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="M13.56 5.44A1.5 1.5 0 0 1 14 6.5V12h-2v2H4v-2H2V6.5A1.5 1.5 0 0 1 3.5 5H4V2h8v3h.5a1.5 1.5 0 0 1 1.06.44ZM11 3H5v2h6V3ZM5 13h6v-3H5v3Zm7-2h1V6.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V11h1V9h8v2Zm0-3V7h-2v1h2Z" clip-rule="evenodd"/></svg> </span>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="i-product-order__count text-nowrap d-flex align-items-center">
<span class="px-2 py-1 u-bg-tertiary-400 u-fw-600 u-fz-sm u-rounded-4 text-nowrap">
100 ks
</span>
</div>
<div class="i-product-order__order text-nowrap d-flex align-items-center">
<span class="u-color-conversion u-fw-700 text-nowrap">
id2452345
</span>
</div>
<div class="i-product-order__date text-nowrap d-flex align-items-center">
<span class="u-fz-sm text-nowrap u-fw-500">14.07.2023</span>
</div>
<div class="i-product-order__price text-end text-nowrap d-flex align-items-center justify-content-end">
<span class="u-fw-700">
999 999
s DPH</span>
</div>
</div>
<div class="i-product-order justify-content-between">
<div class="i-product-order__item">
<div class="i-product-overview d-flex align-items-center gap-1" data-product-id="ETHN01">
<div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
<picture>
<img src="https://placehold.co/72x72" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="72" height="72" loading="lazy" draggable="false" srcset="https://placehold.co/72x72 1x, https://placehold.co/144x144 2x">
</picture>
</div>
</div>
<div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
<div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
<div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>
<div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
<label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient(
#CFAF8A
0deg
355deg
)">
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --color-secondary-500 --icon-before i-product-overview__tag">
<span class="i-tag__title">Potisk</span>
<div class="i-tag__icon">
<span class="icon d-flex align-items-center justify-content-center --colored --text">
<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="M13.56 5.44A1.5 1.5 0 0 1 14 6.5V12h-2v2H4v-2H2V6.5A1.5 1.5 0 0 1 3.5 5H4V2h8v3h.5a1.5 1.5 0 0 1 1.06.44ZM11 3H5v2h6V3ZM5 13h6v-3H5v3Zm7-2h1V6.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V11h1V9h8v2Zm0-3V7h-2v1h2Z" clip-rule="evenodd"/></svg> </span>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="i-product-order__count text-nowrap d-flex align-items-center">
<span class="px-2 py-1 u-bg-tertiary-400 u-fw-600 u-fz-sm u-rounded-4 text-nowrap">
100 ks
</span>
</div>
<div class="i-product-order__order text-nowrap d-flex align-items-center">
<span class="u-color-conversion u-fw-700 text-nowrap">
id2452345
</span>
</div>
<div class="i-product-order__date text-nowrap d-flex align-items-center">
<span class="u-fz-sm text-nowrap u-fw-500">13.03.2023</span>
</div>
<div class="i-product-order__price text-end text-nowrap d-flex align-items-center justify-content-end">
<span class="u-fw-700">
999 999
s DPH</span>
</div>
</div>
</div>
</div>
</div>
<div class="content-w-aside__aside d-flex flex-column row-gap-4 h-100">
</div>
</div>
</div>
</div>