{"id":157,"date":"2023-09-19T13:51:36","date_gmt":"2023-09-19T13:51:36","guid":{"rendered":"https:\/\/flightcaselabels.design\/gestalten-sie-ihre-eigenen-etiketten-flightcaselabels-konfigurator\/"},"modified":"2023-10-10T15:25:41","modified_gmt":"2023-10-10T15:25:41","slug":"gestalten-sie-ihre-eigenen-etiketten-flightcaselabels-konfigurator","status":"publish","type":"page","link":"https:\/\/flightcaselabels.design\/de\/","title":{"rendered":"Gestalten Sie Ihre eigenen Etiketten \u2013 Flightcaselabels Konfigurator"},"content":{"rendered":"<meta name=\"viewport\"\n      content=\"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height\"\/>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&#038;family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&#038;family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&#038;family=Raleway:ital,wght@0,400;0,700;1,400;1,700&#038;family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&#038;family=Roboto:ital,wght@0,400;0,700;1,400;1,700&#038;family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&#038;display=swap\"\n      rel=\"stylesheet\">\n\n<style>\n    nav.navbar {\n        display: none !important;\n    }\n\n    body {\n        position: relative;\n    }\n\n    .full-screen {\n        position: absolute;\n        width: 100vw;\n        height: 100vh;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n<\/style>\n\n        <section id=\"block-configurator\" class=\"block-configurator bg-gray\"\n                 x-data=\"{ configurator: $store.configurator }\"\n                 data-translations='{&quot;title&quot;:&quot;Gestalten Sie Ihre eigenen Etiketten \\u2013 Flightcaselabels Konfigurator&quot;,&quot;header&quot;:{&quot;banner&quot;:[&quot;The new Configurator is&quot;,&quot;live!&quot;,&quot;It&#039;s a beta version but&quot;,&quot;fully functional&quot;],&quot;title&quot;:&quot;DESIGN YOUR OWN LABEL IN THREE SIMPLE STEPS!&quot;},&quot;screens&quot;:{&quot;loading&quot;:{&quot;loading&quot;:&quot;Wird geladen...&quot;},&quot;format&quot;:{&quot;header&quot;:{&quot;title&quot;:&quot;Schritt 1: W\\u00e4hlen Sie Ihr Format aus!&quot;},&quot;mostchosen&quot;:&quot;Am h\\u00e4ufigsten gew\\u00e4hlt&quot;},&quot;template&quot;:{&quot;header&quot;:{&quot;title&quot;:&quot;Schritt 2: W\\u00e4hlen Sie Ihre Vorlage aus!&quot;},&quot;loading&quot;:&quot;Vorlagen werden geladen...&quot;,&quot;empty&quot;:&quot;Mit einem leeren Etikett beginnen&quot;},&quot;editor&quot;:{&quot;header&quot;:{&quot;differenttemplate&quot;:&quot;Verschiedene Vorlage&quot;,&quot;order&quot;:&quot;Bestellung!&quot;},&quot;sidebar&quot;:{&quot;elements&quot;:{&quot;label&quot;:&quot;Elemente&quot;,&quot;buttons&quot;:{&quot;rectangle&quot;:&quot;Rechteck&quot;,&quot;qrcode&quot;:&quot;QR-Code&quot;,&quot;datamatrix&quot;:&quot;Datenmatrix&quot;,&quot;footer&quot;:&quot;Fu\\u00dfzeile&quot;}},&quot;images&quot;:{&quot;label&quot;:&quot;Bilder&quot;,&quot;uploadimage&quot;:&quot;Bild hochladen&quot;},&quot;properties&quot;:{&quot;label&quot;:&quot;Eigenschaften&quot;,&quot;buttons&quot;:{&quot;forward&quot;:&quot;Vorw\\u00e4rts&quot;,&quot;backward&quot;:&quot;R\\u00fcckw\\u00e4rts&quot;,&quot;front&quot;:&quot;Vorderseite&quot;,&quot;back&quot;:&quot;Zur\\u00fcck&quot;,&quot;clone&quot;:&quot;Klonen&quot;,&quot;delete&quot;:&quot;L\\u00f6schen&quot;,&quot;backgroundcolor&quot;:&quot;Hintergrundfarbe&quot;,&quot;outlinecolor&quot;:&quot;Umrissfarbe&quot;,&quot;toggleborder&quot;:&quot;Rahmen umschalten&quot;}},&quot;view&quot;:{&quot;label&quot;:&quot;Ansicht&quot;,&quot;buttons&quot;:{&quot;zoomin&quot;:&quot;Vergr\\u00f6\\u00dfern&quot;,&quot;zoomout&quot;:&quot;Verkleinern&quot;,&quot;zoomto100&quot;:&quot;Auf 100 % zoomen&quot;,&quot;zoomtoview&quot;:&quot;Zur Ansicht zoomen&quot;}},&quot;file&quot;:{&quot;label&quot;:&quot;Datei&quot;,&quot;buttons&quot;:{&quot;new&quot;:&quot;Neu&quot;,&quot;open&quot;:&quot;\\u00d6ffnen&quot;,&quot;save&quot;:&quot;Speichern&quot;,&quot;saveas&quot;:&quot;Speichern unter...&quot;,&quot;export&quot;:&quot;Exportieren...&quot;,&quot;import&quot;:&quot;Importieren...&quot;,&quot;totemplate&quot;:&quot;Zur Vorlage...&quot;},&quot;open&quot;:{&quot;label&quot;:&quot;\\u00d6ffnen&quot;,&quot;upload&quot;:&quot;Upload&quot;}},&quot;history&quot;:{&quot;label&quot;:&quot;Verlauf&quot;,&quot;currentstate&quot;:&quot;Aktueller Zustand&quot;},&quot;help&quot;:{&quot;label&quot;:&quot;Brauchen Sie Hilfe?&quot;,&quot;information&quot;:&quot;Wenn Sie Fragen haben oder Hilfe bei der Nutzung unserer Anwendung ben\\u00f6tigen, k\\u00f6nnen Sie uns per E-Mail kontaktieren. Wir sind hier um zu helfen!&quot;,&quot;mailus&quot;:&quot;Schreiben Sie uns&quot;,&quot;shortcuts&quot;:&quot;Maus- und Tastaturk\\u00fcrzel&quot;,&quot;scroll&quot;:&quot;Scrollen&quot;,&quot;or&quot;:&quot;oder&quot;,&quot;shortcutdescriptions&quot;:{&quot;vertical&quot;:&quot;Leinwand vertikal bewegen&quot;,&quot;horizontal&quot;:&quot;Leinwand horizontal bewegen&quot;,&quot;zoom&quot;:&quot;Vergr\\u00f6\\u00dfern\\\/Verkleinern&quot;,&quot;zoomin&quot;:&quot;Vergr\\u00f6\\u00dfern&quot;,&quot;zoomout&quot;:&quot;Verkleinern&quot;,&quot;undo&quot;:&quot;R\\u00fcckg\\u00e4ngig&quot;,&quot;redo&quot;:&quot;Wiederholen&quot;,&quot;up&quot;:&quot;Ausgew\\u00e4hltes Element nach oben verschieben&quot;,&quot;down&quot;:&quot;Ausgew\\u00e4hltes Element nach unten verschieben&quot;,&quot;left&quot;:&quot;Ausgew\\u00e4hltes Element nach links verschieben&quot;,&quot;right&quot;:&quot;Ausgew\\u00e4hltes Element nach rechts verschieben&quot;,&quot;delete&quot;:&quot;Ausgew\\u00e4hltes Element l\\u00f6schen&quot;}}},&quot;statusbar&quot;:{&quot;left&quot;:&quot;Links:&quot;,&quot;top&quot;:&quot;Oben:&quot;,&quot;width&quot;:&quot;Breite:&quot;,&quot;height&quot;:&quot;H\\u00f6he:&quot;,&quot;innerwidth&quot;:&quot;Inner width:&quot;,&quot;innerheight&quot;:&quot;Inner height:&quot;,&quot;outerwidth&quot;:&quot;Outer width:&quot;,&quot;outerheight&quot;:&quot;Outer height:&quot;}}},&quot;modals&quot;:{&quot;customsize&quot;:{&quot;title&quot;:&quot;Benutzerdefinierte Gr\\u00f6\\u00dfe&quot;,&quot;width&quot;:&quot;Breite:&quot;,&quot;height&quot;:&quot;H\\u00f6he:&quot;,&quot;limitations&quot;:{&quot;header&quot;:&quot;Benutzerdefinierte Gr\\u00f6\\u00dfenbeschr\\u00e4nkungen&quot;,&quot;description&quot;:&quot;Sie k\\u00f6nnen ein Etikett mit einer benutzerdefinierten Gr\\u00f6\\u00dfe erstellen, solange es den folgenden Einschr\\u00e4nkungen entspricht:&quot;,&quot;minimalsize&quot;:&quot;Minimale Gr\\u00f6\\u00dfe&quot;,&quot;maximalsize&quot;:&quot;Maximale Gr\\u00f6\\u00dfe&quot;,&quot;contact&quot;:&quot;Wenn Sie ein Etikett kleiner oder gr\\u00f6\\u00dfer als diese Gr\\u00f6\\u00dfen erstellen m\\u00f6chten, kontaktieren Sie uns bitte unter&quot;,&quot;create&quot;:&quot;Erstellen&quot;,&quot;cancel&quot;:&quot;Abbrechen&quot;}},&quot;new&quot;:{&quot;title&quot;:&quot;Neues Etikett erstellen&quot;,&quot;description&quot;:&quot;Ihr aktuelles Etikett geht verloren!&quot;},&quot;totemplate&quot;:{&quot;promptname&quot;:&quot;Geben Sie einen Vorlagennamen ein&quot;,&quot;title&quot;:&quot;Vorlage hochgeladen&quot;,&quot;description&quot;:&quot;F\\u00fcgen Sie diese URL in die Produktvariante der Vorlage ein:&quot;,&quot;check&quot;:&quot;Herunterladen&quot;,&quot;decline&quot;:&quot;Schlie\\u00dfen&quot;},&quot;backtohome&quot;:{&quot;title&quot;:&quot;Back to home&quot;,&quot;description&quot;:&quot;Are you sure you want to go back to the home page?&quot;,&quot;unsavedwarning&quot;:&quot;If you start a new label, your current label will be lost!&quot;,&quot;check&quot;:&quot;Ja, ich bin sicher&quot;,&quot;decline&quot;:&quot;Macht nichts&quot;},&quot;changetemplate&quot;:{&quot;title&quot;:&quot;Andere Vorlage ausw\\u00e4hlen&quot;,&quot;description&quot;:&quot;M\\u00f6chten Sie ein anderes Vorlagen ausw\\u00e4hlen?&quot;,&quot;unsavedwarning&quot;:&quot;Wenn Sie eine andere Vorlage ausw\\u00e4hlen, geht Ihr aktuelles Etikett verloren!&quot;,&quot;check&quot;:&quot;Ja, ich bin sicher&quot;,&quot;decline&quot;:&quot;Macht nichts&quot;},&quot;toggleborder&quot;:{&quot;title&quot;:&quot;Rahmen umschalten&quot;,&quot;resizetoborder&quot;:&quot;Elements placed outside the border area will be resized to fit inside the border. Proceed?&quot;,&quot;resizetoedge&quot;:&quot;Stretch elements placed against the border to the edge of the label?&quot;,&quot;check&quot;:&quot;Ja, ich bin sicher&quot;,&quot;decline&quot;:&quot;Macht nichts&quot;},&quot;autosave&quot;:{&quot;title&quot;:&quot;Willkommen zur\\u00fcck! \\ud83c\\udf1e&quot;,&quot;description&quot;:&quot;M\\u00f6chten Sie mit der Bearbeitung des Etiketts, das Sie erstellt haben, fortfahren?&quot;,&quot;check&quot;:&quot;Mit der Bearbeitung fortfahren&quot;,&quot;decline&quot;:&quot;Nein, ich m\\u00f6chte mit einem neuen Etikett beginnen&quot;},&quot;order&quot;:{&quot;title&quot;:&quot;Produktdetails&quot;,&quot;information&quot;:{&quot;label&quot;:&quot;Information&quot;,&quot;size&quot;:&quot;Gr\\u00f6\\u00dfe:&quot;,&quot;customsize&quot;:&quot;(Custom size)&quot;,&quot;chosentemplate&quot;:&quot;Chosen template:&quot;,&quot;emptylabel&quot;:&quot;Empty label&quot;,&quot;labelid&quot;:&quot;Label ID (For support):&quot;},&quot;prices&quot;:{&quot;label&quot;:&quot;Preise&quot;,&quot;loadingprices&quot;:&quot;Preise werden geladen...&quot;},&quot;preview&quot;:{&quot;label&quot;:&quot;Vorschau&quot;,&quot;previewoflabel&quot;:&quot;Vorschau Ihres Etiketts&quot;,&quot;preparing&quot;:&quot;Preparing...&quot;,&quot;buildinglabel&quot;:&quot;Building label...&quot;,&quot;generatingimage&quot;:&quot;Generating preview image...&quot;,&quot;sendpreview&quot;:&quot;Senden Sie die Vorschau Ihres Etiketts an jemanden&quot;,&quot;fromname&quot;:&quot;Absendername&quot;,&quot;yourname&quot;:&quot;Ihr Name&quot;,&quot;toemailaddress&quot;:&quot;An E-Mail-Adresse&quot;,&quot;sendtoemailaddress&quot;:&quot;An E-Mail-Adresse senden&quot;,&quot;writeoptionalmessage&quot;:&quot;Schreiben Sie eine optionale Nachricht...&quot;,&quot;message&quot;:&quot;Nachricht (optional)&quot;,&quot;send&quot;:&quot;Senden!&quot;},&quot;updatinglabel&quot;:&quot;Your label is being updated...&quot;,&quot;order&quot;:&quot;Bestellung&quot;,&quot;close&quot;:&quot;Schlie\\u00dfen&quot;}}}'>\n<!--            <div class=\"beta-toast\" x-show=\"configurator.header !== false\">-->\n<!--                <p style=\"margin-bottom: 0\" x-text=\"$store.translations.header.banner[0]\">--><?\/\/= __('The new Configurator is', 'flightcaselabels') ?><!--<\/p>-->\n<!--                &nbsp;-->\n<!--                <b x-text=\"$store.translations.header.banner[1]\">--><?\/\/= __('live!', 'flightcaselabels') ?><!--<\/b>-->\n<!--                &nbsp;-->\n<!--                <p style=\"margin-bottom: 0\" x-text=\"$store.translations.header.banner[2]\">--><?\/\/= __(\"It's a beta version but\", 'flightcaselabels') ?><!--<\/p>-->\n<!--                &nbsp;-->\n<!--                <b x-text=\"$store.translations.header.banner[3]\">--><?\/\/= __('fully functional', 'flightcaselabels') ?><!--<\/b>.-->\n<!--            <\/div>-->\n            <nav class=\"configurator-nav\" style=\"display: none;\" x-show=\"configurator.header !== false\">\n                <div class=\"container\">\n                    <div class=\"d-flex\">\n                        <a class=\"navbar-brand d-flex p-0 top-0 justify-content-center\"\n                           @click=\"configurator.setScreen('format')\">\n                            <img decoding=\"async\" class=\"navbar-img\" src=\"https:\/\/flightcaselabels.design\/wp-content\/uploads\/2023\/10\/Flightcaselabels-Logo.svg\"\n                                 alt=\"Logo\" width=\"90%\" height=\"100%\">\n                        <\/a>\n                        <div class=\"d-flex align-items-start navbar-titles\">\n                            <h1 class=\"navbar-title px-4 fs-3 fs-md-2 text-uppercase\" x-text=\"$store.translations.header.title\">DESIGN YOUR OWN LABEL IN THREE SIMPLE STEPS!<\/h1>\n                            <h2 class=\"navbar-subtitle px-4 fs-3 fs-md-2 text-uppercase\"\n                                x-text=\"configurator.header || $el.innerText\">Schritt 1: W\u00e4hlen Sie Ihr Format aus!<\/h2>\n                        <\/div>\n                        <div class=\"ms-auto pt-4\">\n                                                            <img decoding=\"async\" class=\"mx-1\" height=\"24\" src=\"https:\/\/flightcaselabels.design\/wp-content\/plugins\/sitepress-multilingual-cms\/res\/flags\/en.svg\"\n                                     alt=\"English\" title=\"English\"\n                                     @click='$store.translations.loadTranslations({\"code\":\"en\",\"id\":\"1\",\"native_name\":\"English\",\"major\":\"1\",\"active\":0,\"default_locale\":\"en_US\",\"encode_url\":\"0\",\"tag\":\"en\",\"translated_name\":\"Englisch\",\"url\":\"https:\\\/\\\/flightcaselabels.design\\\/\",\"country_flag_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/plugins\\\/sitepress-multilingual-cms\\\/res\\\/flags\\\/en.svg\",\"language_code\":\"en\"})'>\n                                                            <img decoding=\"async\" class=\"mx-1\" height=\"24\" src=\"https:\/\/flightcaselabels.design\/wp-content\/plugins\/sitepress-multilingual-cms\/res\/flags\/de.svg\"\n                                     alt=\"Deutsch\" title=\"Deutsch\"\n                                     @click='$store.translations.loadTranslations({\"code\":\"de\",\"id\":\"3\",\"native_name\":\"Deutsch\",\"major\":\"1\",\"active\":\"1\",\"default_locale\":\"de_DE\",\"encode_url\":\"0\",\"tag\":\"de\",\"translated_name\":\"Deutsch\",\"url\":\"https:\\\/\\\/flightcaselabels.design\\\/de\\\/\",\"country_flag_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/plugins\\\/sitepress-multilingual-cms\\\/res\\\/flags\\\/de.svg\",\"language_code\":\"de\"})'>\n                                                            <img decoding=\"async\" class=\"mx-1\" height=\"24\" src=\"https:\/\/flightcaselabels.design\/wp-content\/plugins\/sitepress-multilingual-cms\/res\/flags\/fr.svg\"\n                                     alt=\"Fran\u00e7ais\" title=\"Fran\u00e7ais\"\n                                     @click='$store.translations.loadTranslations({\"code\":\"fr\",\"id\":\"4\",\"native_name\":\"Fran\\u00e7ais\",\"major\":\"1\",\"active\":0,\"default_locale\":\"fr_FR\",\"encode_url\":\"0\",\"tag\":\"fr\",\"translated_name\":\"Franz\\u00f6sisch\",\"url\":\"https:\\\/\\\/flightcaselabels.design\\\/fr\\\/\",\"country_flag_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/plugins\\\/sitepress-multilingual-cms\\\/res\\\/flags\\\/fr.svg\",\"language_code\":\"fr\"})'>\n                                                            <img decoding=\"async\" class=\"mx-1\" height=\"24\" src=\"https:\/\/flightcaselabels.design\/wp-content\/plugins\/sitepress-multilingual-cms\/res\/flags\/nl.svg\"\n                                     alt=\"Nederlands\" title=\"Nederlands\"\n                                     @click='$store.translations.loadTranslations({\"code\":\"nl\",\"id\":\"37\",\"native_name\":\"Nederlands\",\"major\":\"1\",\"active\":0,\"default_locale\":\"nl_NL\",\"encode_url\":\"0\",\"tag\":\"nl\",\"translated_name\":\"Niederl\\u00e4ndisch\",\"url\":\"https:\\\/\\\/flightcaselabels.design\\\/nl\\\/\",\"country_flag_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/plugins\\\/sitepress-multilingual-cms\\\/res\\\/flags\\\/nl.svg\",\"language_code\":\"nl\"})'>\n                                                    <\/div>\n                    <\/div>\n                <\/div>\n            <\/nav>\n            <div class=\"screen-loading text-center pt-5 full-screen\" x-show=\"configurator.screen == 'loading'\">\n                <!-- Display loading bar and text -->\n                <div class=\"progress\">\n                    <div class=\"progress-bar progress-bar-striped progress-bar-animated progress-bar-primary\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 100%\"><\/div>\n                <\/div>\n                <div class=\"mt-3\">\n                    <span class=\"fs-1 mb-3\"><i class=\"bi bi-hourglass\"><\/i><\/span>\n                    <p x-text=\"$store.translations.screens?.loading.loading || $el.innerText\">Wird geladen&#8230;<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"screen-format overflow-y-auto\" style=\"display: none;\" x-show=\"configurator.screen == 'format'\">\n                <div class=\"container-xxl d-flex align-items-center justify-content-center\">\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <div class=\"m-auto\">\n                                <div class=\"row gx-0 mt-5\">\n                                    <div class=\"col-lg-7 pe-lg-3 d-flex flex-column align-content-between align-items-center align-items-lg-end\">\n                                        <!-- Start the left column container -->\n                                                                                    <div class=\"grid-item-largest d-flex align-items-center justify-content-center rounded-4 fs-5 mb-3 text-white\"\n                                                 style=\"--width-mm: 212 \/ 2.5; --height-mm: 150 \/ 2.5;\"\n                                                 @click='configurator.selectFormat({\"width\":\"212\",\"height\":\"150\",\"title\":\"212mm x 150mm\",\"most_chosen\":true,\"custom_size\":false,\"empty_image_url\":\"\",\"product_id\":21,\"templates\":[{\"id\":22,\"product_id\":21,\"title\":\"Template 1\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Label-212mm-x-150mm-Template-1.webp\",\"image_alt\":\"Label 212mm x 150mm - Template 1\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/21\\\/22\\\/21-22-template.fcl\",\"size\":{\"width\":\"212\",\"height\":\"150\"}},{\"id\":23,\"product_id\":21,\"title\":\"Template 2\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Label-212mm-x-150mm-Template-2.webp\",\"image_alt\":\"Label-212mm-x-150mm-Template-2\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/21\\\/23\\\/21-23-template.fcl\",\"size\":{\"width\":\"212\",\"height\":\"150\"}},{\"id\":24,\"product_id\":21,\"title\":\"Template 3\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Label-212mm-x-150mm-Template-3.webp\",\"image_alt\":\"Label-212mm-x-150mm-Template-3\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/21\\\/24\\\/21-24-template.fcl\",\"size\":{\"width\":\"212\",\"height\":\"150\"}},{\"id\":315,\"product_id\":21,\"title\":\"Empty template\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/212x150-empty-label.webp\",\"image_alt\":\"212x150 empty label\",\"template_file\":\"\",\"size\":{\"width\":\"212\",\"height\":\"150\"}}]})'>\n                                                                                                    <div class=\"most-chosen-square text-black\"\n                                                         x-text=\"$store.translations.screens?.format.mostchosen || $el.innerText\">\n                                                        Am h\u00e4ufigsten gew\u00e4hlt                                                    <\/div>\n                                                                                                <p class=\"m-0\">212mm x 150mm<\/p>\n                                            <\/div>\n                                                                                    <div class=\"grid-item-largest d-flex align-items-center justify-content-center rounded-4 fs-5 mb-3 bg-green text-black\"\n                                                 style=\"--width-mm: 190 \/ 2.5; --height-mm: 135 \/ 2.5;\"\n                                                 @click='configurator.selectFormat({\"width\":\"190\",\"height\":\"135\",\"title\":\"Custom\",\"most_chosen\":false,\"custom_size\":true,\"empty_image_url\":\"\",\"product_id\":25,\"templates\":[]})'>\n                                                                                                <p class=\"m-0\">Custom<\/p>\n                                            <\/div>\n                                                                            <\/div> <!-- End the left column container -->\n                                    <div class=\"col-lg-5 d-flex flex-column align-content-between align-items-center align-items-lg-start\">\n                                        <!-- Start the right column container -->\n                                                                                    <div class=\"grid-item-largest d-flex align-items-center justify-content-center rounded-4 fs-5 mb-3  mb-lg-4 text-white\"\n                                                 style=\"--width-mm: 177 \/ 2.5; --height-mm: 127 \/ 2.5;\"\n                                                 @click='configurator.selectFormat({\"width\":\"177\",\"height\":\"127\",\"title\":\"177mm x 127mm\",\"most_chosen\":true,\"custom_size\":false,\"empty_image_url\":\"\",\"product_id\":26,\"templates\":[{\"id\":79,\"product_id\":26,\"title\":\"Template 1\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/Label-177mm-x-127mm-Template-1.webp\",\"image_alt\":\"Label-177mm-x-127mm-Template-1\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/26\\\/79\\\/26-79-template.fcl\",\"size\":{\"width\":\"177\",\"height\":\"127\"}},{\"id\":68,\"product_id\":26,\"title\":\"Template 2\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Label-177mm-x-127mm-Template-2.webp\",\"image_alt\":\"Label-177mm-x-127mm-Template-2\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/26\\\/68\\\/26-68-template.fcl\",\"size\":{\"width\":\"177\",\"height\":\"127\"}},{\"id\":382,\"product_id\":26,\"title\":\"Template 3\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/Label-177mm-x-127mm-Template-3.webp\",\"image_alt\":\"Label-177mm-x-127mm-Template-3\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/26\\\/382\\\/26-382-template.fcl\",\"size\":{\"width\":\"177\",\"height\":\"127\"}},{\"id\":319,\"product_id\":26,\"title\":\"Empty template\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/177x127-empty-label.webp\",\"image_alt\":\"177x127 empty label\",\"template_file\":\"\",\"size\":{\"width\":\"177\",\"height\":\"127\"}}]})'>\n                                                                                                    <div class=\"most-chosen-square text-black\"\n                                                         x-text=\"$store.translations.screens?.format.mostchosen || $el.innerText\">\n                                                        Am h\u00e4ufigsten gew\u00e4hlt                                                    <\/div>\n                                                                                                <p class=\"m-0\">177mm x 127mm<\/p>\n                                            <\/div>\n                                                                                    <div class=\"grid-item-largest d-flex align-items-center justify-content-center rounded-4 fs-5 mb-3  mb-lg-4 text-white\"\n                                                 style=\"--width-mm: 148 \/ 2.5; --height-mm: 105 \/ 2.5;\"\n                                                 @click='configurator.selectFormat({\"width\":\"148\",\"height\":\"105\",\"title\":\"148mm x 105mm\",\"most_chosen\":false,\"custom_size\":false,\"empty_image_url\":\"\",\"product_id\":27,\"templates\":[{\"id\":391,\"product_id\":27,\"title\":\"Template 1\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/Label-148mm-x-105mm-Template-1.webp\",\"image_alt\":\"Label 148mm x 105mm - Template 1\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/27\\\/391\\\/27-391-template.fcl\",\"size\":{\"width\":\"148\",\"height\":\"105\"}},{\"id\":392,\"product_id\":27,\"title\":\"Template 2\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/Label-148mm-x-105mm-Template-2.webp\",\"image_alt\":\"Label 148mm x 105mm - Template 2\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/27\\\/392\\\/27-392-template.fcl\",\"size\":{\"width\":\"148\",\"height\":\"105\"}},{\"id\":393,\"product_id\":27,\"title\":\"Template 3\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/Label-148mm-x-105mm-Template-3.webp\",\"image_alt\":\"Label-148mm-x-105mm-Template-3\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/27\\\/393\\\/27-393-template.fcl\",\"size\":{\"width\":\"148\",\"height\":\"105\"}},{\"id\":323,\"product_id\":27,\"title\":\"Empty template\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/148x-105-empty-label.webp\",\"image_alt\":\"148x 105 empty label\",\"template_file\":\"\",\"size\":{\"width\":\"148\",\"height\":\"105\"}}]})'>\n                                                                                                <p class=\"m-0\">148mm x 105mm<\/p>\n                                            <\/div>\n                                                                                    <div class=\"grid-item-largest d-flex align-items-center justify-content-center rounded-4 fs-5 mb-3  mb-lg-4 text-white\"\n                                                 style=\"--width-mm: 148 \/ 2.5; --height-mm: 40 \/ 2.5;\"\n                                                 @click='configurator.selectFormat({\"width\":\"148\",\"height\":\"40\",\"title\":\"148mm x 40mm (Spot label)\",\"most_chosen\":false,\"custom_size\":false,\"empty_image_url\":\"\",\"product_id\":28,\"templates\":[{\"id\":273,\"product_id\":28,\"title\":\"Template 1\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/148x40_148mm-x-40mm-SPOT-Template-1.webp\",\"image_alt\":\"148x40_148mm-x-40mm-SPOT-Template-1\",\"template_file\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/configurator\\\/templates\\\/28\\\/273\\\/28-273-template.fcl\",\"size\":{\"width\":\"148\",\"height\":\"40\"}},{\"id\":317,\"product_id\":28,\"title\":\"Empty template\",\"image_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/148x-40-empty-label.webp\",\"image_alt\":\"148x 40 empty label\",\"template_file\":\"\",\"size\":{\"width\":\"148\",\"height\":\"40\"}}]})'>\n                                                                                                <p class=\"m-0\">148mm x 40mm (Spot label)<\/p>\n                                            <\/div>\n                                                                            <\/div> <!-- End the right column container -->\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"screen-template overflow-y-auto\" style=\"display: none;\"\n                 x-show=\"configurator.screen === 'template'\"\n                 x-data=\"$store.configurator\">\n                <div class=\"container pt-5\">\n                    <div class=\"row gy-4 justify-content-center\">\n                        <template x-for=\"(template, index) in templates\" :key=\"index\">\n                            <div class=\"col-md-6 col-lg-4\">\n                                <div class=\"card m-auto d-flex justify-content-center align-items-center\" @click=\"selectTemplate(template)\">\n                                    <img :src=\"template.image_url\" :alt=\"template.image_alt\" class=\"card-img-top\"\/>\n                                    <div class=\"card-body\">\n                                        <h4 class=\"card-title\" x-text=\"template.title\"><\/h4>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/template>\n\n                        <div class=\"text-center\" style=\"display: none;\" x-show=\"isLoadingTemplates\">\n                            <!-- Display loading bar and text -->\n                            <div class=\"progress\">\n                                <div class=\"progress-bar progress-bar-striped progress-bar-animated progress-bar-primary\"\n                                     role=\"progressbar\"\n                                     aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 100%\"><\/div>\n                            <\/div>\n                            <div class=\"mt-3\">\n                                <p x-text=\"$store.translations.screens?.template.loading\">Vorlagen werden geladen&#8230;<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Editor -->\n            <div class=\"screen-editor\" style=\"display: none;\" x-show=\"configurator.screen == 'editor'\">\n                <div class=\"d-flex flex-column-reverse flex-xl-row h-100\">\n                    <div class=\"sidebar d-flex flex-column-reverse flex-xl-row text-light\"\n                         :class=\"open ? 'open' : 'closed'\" x-data=\"$store.sidebar\">\n                        <div class=\"toggle-sidebar\" @click=\"toggle()\">\n                            <i class=\"bi bi-chevron-left\"><\/i>\n                        <\/div>\n                        <div class=\"sidebar-menu text-light d-flex flex-xl-column justify-content-around justify-content-xl-start\">\n                            <div class=\"spacer flex-shrink-1\"><\/div>\n                            <template x-for=\"tab in tabs\">\n                                <div :class=\"(tab.class ?? '') + (open &#038;&#038; selected.split('.')[0] == tab.name ? ' selected' : '') + ' tab-btn p-3 text-center'\"\n                                     x-show=\"!tab.adminOnly\"\n                                     @click=\"select(tab)\">\n                                    <i :class=\"'fs-2 bi bi-' + tab.icon\"><\/i>\n                                    <div x-text=\"$store.translations.screens?.editor.sidebar[tab.name]?.label\"><\/div>\n                                <\/div>\n                            <\/template>\n                        <\/div>\n                        <div class=\"sidebar-content-wrapper d-flex flex-column flex-grow-1\"\n                             :class=\"open ? '' : 'd-none'\"\n                             x-show=\"selected\">\n                            <a class=\"navbar-brand d-none d-xl-block m-auto flex-shrink-0\"\n                               @click=\"$store.canvas.quit()\">\n                                <img decoding=\"async\" class=\"navbar-img\" src=\"https:\/\/flightcaselabels.design\/wp-content\/uploads\/2023\/10\/Flightcaselabels-Logo.svg\"\n                                     alt=\"Logo\" width=\"90%\" height=\"100%\">\n                            <\/a>\n                            <div class=\"sidebar-content text-light p-2 p-xl-4 flex-grow-1\">\n                                <template x-for=\"tab in tabs\">\n                                    <div x-show=\"selected == tab.name\"\n                                         class=\"row g-0 justify-content-around justify-content-xl-start\">\n                                        <div class=\"col-12 d-none d-xl-block\">\n                                            <span class=\"fw-bold\"\n                                                  x-text=\"$store.translations.screens?.editor.sidebar[tab.name]?.label\"><\/span>\n                                        <\/div>\n                                        <template x-for=\"btn in tab.buttons\">\n                                            <div class=\"sidebar-btn col-3 col-md-2 col-xl-4 p-xl-3 d-flex flex-column text-center position-relative\"\n                                                 @click=\"btn.tab ? selectTab(btn.tab) : $store.canvas.handleButton(...btn.action)\">\n                                                <i :class=\"'fs-2 bi bi-' + btn.icon\"><\/i>\n                                                <span x-text=\"$store.translations.screens?.editor.sidebar[tab.name]?.buttons[btn.name]\"><\/span>\n                                                <div x-show=\"btn.html\" x-html=\"btn.html ?? ''\"><\/div>\n                                            <\/div>\n                                        <\/template>\n                                    <\/div>\n                                <\/template>\n                                <div x-show=\"selected == 'file.open'\">\n                                    <div class=\"row g-0\">\n                                        <div class=\"col-12\">\n                                            <span class=\"fw-bold\"><span\n                                                        x-text=\"$store.translations.screens?.editor.sidebar.file.label\"><\/span> <i\n                                                        class=\"bi bi-chevron-right\"><\/i> <span\n                                                        x-text=\"$store.translations.screens?.editor.sidebar.file.open.label\"><\/span><\/span>\n                                        <\/div>\n                                        <div class=\"sidebar-btn col-4 p-3 d-flex flex-column text-center\"\n                                             @click=\"load()\">\n                                            <i class=\"fs-2 bi bi-upload\"><\/i>\n                                            <span x-text=\"$store.translations.screens?.editor.sidebar.file.open.upload\"><\/span>\n                                        <\/div>\n                                        <template x-for=\"name in saved\">\n                                            <div class=\"sidebar-btn col-4 p-3 d-flex flex-column text-center\"\n                                                 @click=\"load(name + '.fcl')\">\n                                                <i class=\"fs-2 bi bi-file-earmark-richtext\"><\/i>\n                                                <span x-text=\"name\"><\/span>\n                                            <\/div>\n                                        <\/template>\n                                    <\/div>\n                                <\/div>\n                                <div x-show=\"selected == 'images'\" :class=\"dragover ? ' dragover' : ''\"\n                                     @drop.prevent=\"handleFileDrop($event); dragover = false\"\n                                     @dragover.prevent=\"dragover = true\" @dragleave.prevent=\"dragover = false\">\n                                    <div class=\"upload bg-primary py-2\">\n                                        <input id=\"upload-image\" type=\"file\" @change=\"handleFileUpload\" class=\"d-none\"\n                                               multiple>\n                                        <label for=\"upload-image\" class=\"w-100 text-center\"><i class=\"bi bi-upload\"><\/i>\n                                            <span x-text=\"$store.translations.screens?.editor.sidebar.images.uploadimage\"><\/span><\/label>\n                                    <\/div>\n                                    <div class=\"row g-0 pt-2\">\n                                        <template x-for=\"url, id in $store.images.uploads\">\n                                            <div class=\"col-4 py-2\">\n                                                <div class=\"img-thumb\"\n                                                     :style=\"'background-image: url(\\'' + url + '\\');'\"\n                                                     @click=\"$store.images.addToCanvas(id)\"><\/div>\n                                            <\/div>\n                                        <\/template>\n                                    <\/div>\n                                <\/div>\n                                <div x-show=\"selected == 'history'\">\n                                    <template x-for=\"item in $store.canvas.history.history\">\n                                        <div class=\"w-100 py-2\">\n                                            <i :class=\"`bi bi-${item.icon ?? 'arrow-counterclockwise'}`\"><\/i>\n                                            <span x-text=\"item\"><\/span>\n                                        <\/div>\n                                    <\/template>\n                                    <div class=\"col-12 py-2 border border-start-0 border-end-0 border-light\">\n                                        <i class=\"bi bi-clock\"><\/i>\n                                        <span x-text=\"$store.translations.screens?.editor.sidebar.history.currentstate\"><\/span>\n                                    <\/div>\n                                    <template x-for=\"item in $store.canvas.history.future\">\n                                        <div class=\"col-12 py-2\">\n                                            <i :class=\"`bi bi-${item.icon ?? 'arrow-clockwise'}`\"><\/i>\n                                            <span x-text=\"item\"><\/span>\n                                        <\/div>\n                                    <\/template>\n                                <\/div>\n                                <div x-show=\"selected == 'help'\">\n                                    <div class=\"overflow-y-auto\">\n                                        <div class=\"mb-3\"\n                                             x-text=\"$store.translations.screens?.editor.sidebar.help.information\"><\/div>\n                                        <a href=\"mailto:contact@flightcaselabels.nl\"\n                                           class=\"btn btn-danger d-block mb-3\"><i\n                                                    class=\"bi bi-envelope\"><\/i> <span\n                                                    x-text=\"$store.translations.screens?.editor.sidebar.help.mailus\"><\/span><\/a>\n                                        <h6 class=\"fw-bold\"\n                                            x-text=\"$store.translations.screens?.editor.sidebar.help.shortcuts\"><\/h6>\n                                        <table class=\"table text-light\"\n                                               :class=\"(\/(macintosh|macintel|macppc|mac68k|macos)\/i).test(window.navigator.userAgent.toLowerCase()) ? 'mac-keys' : 'std-keys'\">\n                                            <tr>\n                                                <td>\n                                                    <kbd x-text=\"$store.translations.screens?.editor.sidebar.help.scroll\"><\/kbd>\n                                                <\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.vertical\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-shift\"><\/kbd> <kbd\n                                                            x-text=\"$store.translations.screens?.editor.sidebar.help.scroll\"><\/kbd>\n                                                <\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.horizontal\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-option\"><\/kbd> <kbd\n                                                            x-text=\"$store.translations.screens?.editor.sidebar.help.scroll\"><\/kbd>\n                                                <\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.zoom\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-plus\"><\/kbd><\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.zoomin\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-dash\"><\/kbd><\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.zoomout\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-command\"><\/kbd> <kbd>Z<\/kbd><\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.undo\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-command\"><\/kbd> <kbd>Y<\/kbd> <span\n                                                            x-text=\"$store.translations.screens?.editor.sidebar.help.or\"><\/span>\n                                                    <kbd\n                                                            class=\"bi bi-command\"><\/kbd> <kbd class=\"bi bi-shift\"><\/kbd>\n                                                    <kbd>Z<\/kbd><\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.redo\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-caret-up-fill\"><\/kbd><\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.up\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-caret-down-fill\"><\/kbd><\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.down\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-caret-left-fill\"><\/kbd><\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.left\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-caret-right-fill\"><\/kbd><\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.right\"><\/td>\n                                            <\/tr>\n                                            <tr>\n                                                <td><kbd class=\"bi bi-backspace-reverse\"><\/kbd><\/td>\n                                                <td x-text=\"$store.translations.screens?.editor.sidebar.help.shortcutdescriptions.delete\"><\/td>\n                                            <\/tr>\n                                        <\/table>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"flex-grow-1 d-flex flex-column\" x-data=\"$store.canvas\">\n                        <div class=\"configurator-navbar d-flex justify-content-end p-2\">\n                            <div class=\"d-flex align-items-center\">\n                                                                    <img decoding=\"async\" class=\"mx-1\" height=\"24\" src=\"https:\/\/flightcaselabels.design\/wp-content\/plugins\/sitepress-multilingual-cms\/res\/flags\/en.svg\"\n                                         alt=\"English\" title=\"English\"\n                                         @click='$store.translations.loadTranslations({\"code\":\"en\",\"id\":\"1\",\"native_name\":\"English\",\"major\":\"1\",\"active\":0,\"default_locale\":\"en_US\",\"encode_url\":\"0\",\"tag\":\"en\",\"translated_name\":\"Englisch\",\"url\":\"https:\\\/\\\/flightcaselabels.design\\\/\",\"country_flag_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/plugins\\\/sitepress-multilingual-cms\\\/res\\\/flags\\\/en.svg\",\"language_code\":\"en\"})'>\n                                                                    <img decoding=\"async\" class=\"mx-1\" height=\"24\" src=\"https:\/\/flightcaselabels.design\/wp-content\/plugins\/sitepress-multilingual-cms\/res\/flags\/de.svg\"\n                                         alt=\"Deutsch\" title=\"Deutsch\"\n                                         @click='$store.translations.loadTranslations({\"code\":\"de\",\"id\":\"3\",\"native_name\":\"Deutsch\",\"major\":\"1\",\"active\":\"1\",\"default_locale\":\"de_DE\",\"encode_url\":\"0\",\"tag\":\"de\",\"translated_name\":\"Deutsch\",\"url\":\"https:\\\/\\\/flightcaselabels.design\\\/de\\\/\",\"country_flag_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/plugins\\\/sitepress-multilingual-cms\\\/res\\\/flags\\\/de.svg\",\"language_code\":\"de\"})'>\n                                                                    <img decoding=\"async\" class=\"mx-1\" height=\"24\" src=\"https:\/\/flightcaselabels.design\/wp-content\/plugins\/sitepress-multilingual-cms\/res\/flags\/fr.svg\"\n                                         alt=\"Fran\u00e7ais\" title=\"Fran\u00e7ais\"\n                                         @click='$store.translations.loadTranslations({\"code\":\"fr\",\"id\":\"4\",\"native_name\":\"Fran\\u00e7ais\",\"major\":\"1\",\"active\":0,\"default_locale\":\"fr_FR\",\"encode_url\":\"0\",\"tag\":\"fr\",\"translated_name\":\"Franz\\u00f6sisch\",\"url\":\"https:\\\/\\\/flightcaselabels.design\\\/fr\\\/\",\"country_flag_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/plugins\\\/sitepress-multilingual-cms\\\/res\\\/flags\\\/fr.svg\",\"language_code\":\"fr\"})'>\n                                                                    <img decoding=\"async\" class=\"mx-1\" height=\"24\" src=\"https:\/\/flightcaselabels.design\/wp-content\/plugins\/sitepress-multilingual-cms\/res\/flags\/nl.svg\"\n                                         alt=\"Nederlands\" title=\"Nederlands\"\n                                         @click='$store.translations.loadTranslations({\"code\":\"nl\",\"id\":\"37\",\"native_name\":\"Nederlands\",\"major\":\"1\",\"active\":0,\"default_locale\":\"nl_NL\",\"encode_url\":\"0\",\"tag\":\"nl\",\"translated_name\":\"Niederl\\u00e4ndisch\",\"url\":\"https:\\\/\\\/flightcaselabels.design\\\/nl\\\/\",\"country_flag_url\":\"https:\\\/\\\/flightcaselabels.design\\\/wp-content\\\/plugins\\\/sitepress-multilingual-cms\\\/res\\\/flags\\\/nl.svg\",\"language_code\":\"nl\"})'>\n                                                            <\/div>\n                            <button class=\"btn btn-danger ms-3\" @click=\"$store.canvas.quit('changetemplate')\"\n                                    x-text=\"$store.translations.screens?.editor.header.differenttemplate\"><\/button>\n                            <button class=\"btn btn-success ms-3\" @click=\"configurator.selectCheckout()\"\n                                    x-text=\"$store.translations.screens?.editor.header.order\"><\/button>\n                        <\/div>\n                        <div class=\"canvas-pane flex-grow-1 d-flex flex-column\">\n                            <div class=\"top-bar d-flex align-items-center\">\n                                <div class=\"d-flex align-items-center toolbar-container\" id=\"toolbar-container\"><\/div>\n                            <\/div>\n                            <main class=\"flex-grow-1 d-flex\">\n                                <div class=\"canvas-wrapper position-relative flex-grow-1 d-flex\" id=\"canvas-wrapper\"\n                                     x-ref=\"wrapper\">\n                                    <div class=\"flex-grow-1 d-flex justify-content-center align-items-center\">\n                                        <div class=\"canvas position-absolute\"\n                                             :style=\"`width: ${size.width}mm; height: ${size.height}mm; transform: scale(${zoom}); background-color: ${outlineColor};`\"\n                                             @mousemove=\"handleMoveResize($event, $refs.canvas)\"\n                                             @mouseup=\"stopMoveResize\"\n                                             @mouseleave=\"stopMoveResize\"\n                                             @touchmove=\"handleMoveResize($event, $refs.canvas)\"\n                                             @touchend=\"stopMoveResize\"\n                                             @click=\"selectElement()\"\n                                             @wheel=\"if($event.altKey) zoom = Math.max(0.25, Math.min(4, zoom + event.deltaY * -0.0005)) || zoom\"\n                                             id=\"canvas\"\n                                             x-ref=\"canvas\"\n                                        >\n                                            <div class=\"canvas-inner\"\n                                                 :class=\"{ dragover }\"\n                                                 :style=\"{ margin: border ? `${outlineWidth}mm` : 0, border: border ? `${borderWidth}mm solid ${borderColor}` : 'none', width: border ? `calc(100% - ${outlineWidth} * 2)` : '100%', height: border ? `calc(100% - ${outlineWidth} * 2mm)` : '100%', backgroundColor }\"\n                                                 id=\"canvas-inner\"\n                                                 x-ref=\"inner\"\n                                            >\n                                                <template x-for=\"element in elements\" :key=\"element.id\">\n                                                    <div :class=\"['element', ...(element.visualizers ?? []), ...(element.transparent ? ['transparent'] : [])]\"\n                                                         :style=\"{ width: element.width + 'mm', height: element.height + 'mm', top: element.top + 'mm', left: element.left + 'mm',\n                                                    fontFamily: element.fontFamily, fontSize: element.fontSize + 'pt', color: element.color, fontWeight: element.bold ? 700 : 400,\n                                                    fontStyle: element.italic ? 'italic' : 'normal', textDecoration: element.underline ? 'underline' : 'none', textAlign: element.textAlign,\n                                                    border: element.borderWidth + 'mm ' + element.borderStyle + ' ' + (element.border ? element.borderColor : 'transparent'),\n                                                    ...(element.transparent ? {} : { backgroundColor: element.backgroundColor, backgroundImage: element.backgroundImage ? `url('${element.backgroundImage}')`: 'none', backgroundSize: 'contain' }) }\"\n                                                         @click=\"selectElement(element);$event.stopPropagation();\"\n                                                         @mousedown.prevent=\"startMove($event, element)\"\n                                                         @touchstart.stop=\"startMove($event, element)\"\n                                                         @touchend=\"stopMoveResize\"\n                                                         @dblclick.prevent=\"editText(element, $event);\">\n                                                        <div :class=\"'text-content w-100 h-100' + (selected === element &#038;&#038; textEditor ? ' active' : '') + (element.code ? ' code-content' : '')\"\n                                                             @click=\"$event.stopPropagation();\"\n                                                             @mousedown=\"$event.stopPropagation();\"\n                                                             @touchstart=\"$event.stopPropagation();\"\n                                                             x-text=\"element.text\"\n                                                             :data-editing=\"selected === element &#038;&#038; textEditor\"><\/div>\n                                                        <div class=\"resize-handle top left\"\n                                                             x-show=\"selected === element\"\n                                                             @mousedown.stop=\"startResize($event, element, 'top-left')\"\n                                                             @touchstart.stop=\"startResize($event, element, 'top-left')\"><\/div>\n                                                        <div class=\"resize-handle top\" x-show=\"selected === element\"\n                                                             @mousedown.stop=\"startResize($event, element, 'top')\"\n                                                             @touchstart.stop=\"startResize($event, element, 'top')\"><\/div>\n                                                        <div class=\"resize-handle top right\"\n                                                             x-show=\"selected === element\"\n                                                             @mousedown.stop=\"startResize($event, element, 'top-right')\"\n                                                             @touchstart.stop=\"startResize($event, element, 'top-right')\"><\/div>\n                                                        <div class=\"resize-handle right\" x-show=\"selected === element\"\n                                                             @mousedown.stop=\"startResize($event, element, 'right')\"\n                                                             @touchstart.stop=\"startResize($event, element, 'right')\"><\/div>\n                                                        <div class=\"resize-handle bottom right\"\n                                                             x-show=\"selected === element\"\n                                                             @mousedown.stop=\"startResize($event, element, 'bottom-right')\"\n                                                             @touchstart.stop=\"startResize($event, element, 'bottom-right')\"><\/div>\n                                                        <div class=\"resize-handle bottom\" x-show=\"selected === element\"\n                                                             @mousedown.stop=\"startResize($event, element, 'bottom')\"\n                                                             @touchstart.stop=\"startResize($event, element, 'bottom')\"><\/div>\n                                                        <div class=\"resize-handle bottom left\"\n                                                             x-show=\"selected === element\"\n                                                             @mousedown.stop=\"startResize($event, element, 'bottom-left')\"\n                                                             @touchstart.stop=\"startResize($event, element, 'bottom-left')\"><\/div>\n                                                        <div class=\"resize-handle left\" x-show=\"selected === element\"\n                                                             @mousedown.stop=\"startResize($event, element, 'left')\"\n                                                             @touchstart.stop=\"startResize($event, element, 'left')\"><\/div>\n                                                    <\/div>\n                                                <\/template>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"debug position-absolute top-0 start-0\" style=\"display: none;\"\n                                         x-show=\"$store.configurator.query.get('debug')\">\n                                        <ul>\n                                            <li>border: <span x-text=\"border\"><\/span><\/li>\n                                            <li x-show=\"selected\">mouse: (<span\n                                                        x-text=\"[mouse.x, mouse.y].join(', ')\"><\/span>) px: \/ (<span\n                                                        x-text=\"[mouse.clientX, mouse.clientY].join(', ')\"><\/span>)\n                                            <\/li>\n                                            <li x-show=\"selected\">pos: (<span\n                                                        x-text=\"[selected?.left, selected?.top].join(', ')\"><\/span>)\n                                            <\/li>\n                                            <li x-show=\"selected\">init pos: (<span\n                                                        x-text=\"[initialState.left, initialState.top].join(', ')\"><\/span>)\n                                            <\/li>\n                                            <li x-show=\"selected\">size: (<span\n                                                        x-text=\"[selected?.width, selected?.height].join(', ')\"><\/span>)\n                                            <\/li>\n                                            <li x-show=\"selected\">init size: (<span\n                                                        x-text=\"[initialState.width, initialState.height].join(', ')\"><\/span>)\n                                            <\/li>\n                                            <li x-show=\"selected\">current action: <span x-text=\"currentAction\"><\/span>\n                                            <\/li>\n                                            <li x-show=\"selected\">start: (<span\n                                                        x-text=\"[start.x, start.y].join(', ')\"><\/span>)\n                                            <\/li>\n                                            <li x-show=\"selected\">delta: (<span\n                                                        x-text=\"[delta.x, delta.y].join(', ')\"><\/span>)\n                                            <\/li>\n                                        <\/ul>\n                                    <\/div>\n                                <\/div>\n                            <\/main>\n                            <div class=\"bottom-bar d-none d-xl-flex align-items-center text-light px-2 py-1\">\n                        <span>\n                            <span x-show=\"!selected\">\n                                <i class=\"bi bi-textarea-resize\"><\/i>\n                                <span x-text=\"$store.translations.screens?.editor.statusbar.width\"><\/span> <span\n                                        x-text=\"size.width\"><\/span> mm,\n                                <span x-text=\"$store.translations.screens?.editor.statusbar.height\"><\/span> <span\n                                        x-text=\"size.height\"><\/span> mm\n                            <\/span>\n                            <span x-show=\"selected\" :title=\"[\n                                    `${$store.translations.screens?.editor.statusbar.innerwidth} ${parseFloat(selected?.width).toFixed(2)}`,\n                                    `${$store.translations.screens?.editor.statusbar.outerwidth} ${parseFloat(selected?.borderWidth * 2 + selected?.width).toFixed(2)}`,\n                                    `${$store.translations.screens?.editor.statusbar.innerheight} ${parseFloat(selected?.height).toFixed(2)}`,\n                                    `${$store.translations.screens?.editor.statusbar.outerheight} ${parseFloat(selected?.borderWidth * 2 + selected?.height).toFixed(2)}`,\n                                ].join('\\n');\">\n                                <i class=\"bi bi-bounding-box-circles\"><\/i>\n                                <span x-text=\"$store.translations.screens?.editor.statusbar.left\"><\/span>\n                                <span x-text=\"parseFloat(selected?.left).toFixed(2)\"><\/span> mm,\n                                <span x-text=\"$store.translations.screens?.editor.statusbar.top\"><\/span>\n                                <span x-text=\"parseFloat(selected?.top).toFixed(2)\"><\/span> mm,\n                                <span x-text=\"$store.translations.screens?.editor.statusbar.width\"><\/span>\n                                <span x-text=\"parseFloat(selected?.borderWidth + selected?.width).toFixed(2)\"><\/span> mm,\n                                <span x-text=\"$store.translations.screens?.editor.statusbar.height\"><\/span>\n                                <span x-text=\"parseFloat(selected?.borderWidth + selected?.height).toFixed(2)\"><\/span> mm\n                            <\/span>\n                        <\/span>\n                                <div class=\"ms-auto d-flex user-select-none\">\n                                    <i class=\"bi bi-dash px-2\" @click=\"zoomAmount(-0.05)\"><\/i>\n                                    <input type=\"range\" class=\"form-range\"\n                                           @input=\"$store.canvas.zoom = $event.target.value\"\n                                           :value=\"$store.canvas.zoom\" min=\"0.25\" max=\"4\" step=\"0.05\">\n                                    <i class=\"bi bi-plus px-2\" @click=\"zoomAmount(+0.05)\"><\/i>\n                                    <span x-text=\"Math.round(zoom * 100) + '%'\"\n                                          @click=\"zoom === 1 ? zoomToView() : zoomTo(1);\"><\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <footer>\n                <div class=\"container\">\n                    <div class=\"d-flex flex-row justify-content-between pt-5 pb-5 footer-flex\">\n                        <div class=\"d-flex flex-column footer-text\">\n                            <h2>Flightcaselabels<\/h2>\n                            <p>Wielsterdyk 33<\/p>\n                            <p>9024 BD WEIDUM<\/p>\n                            <p>HOLLAND<\/p>\n                            <br>\n                            <p>Tel: <a href=\"tel:06 51368317\">+31 (0)6 51368317<\/a><\/p>\n                            <p>E-mail: <a href=\"mailto:info@flightcaselabels.net\">info@flightcaselabels.net<\/a><\/p>\n                            <p>Website: <a href=\"flightcaselabels.net\">flightcaselabels.net<\/a><\/p>\n                            <br>\n                            <p>Privacy: <a href=\"https:\/\/flightcaselabels.design\/privacy-policy\/\">Read the privacy policy<\/a><\/p>\n                        <\/div>\n                        <div class=\"d-flex flex-column footer-follow-us\">\n                            <h2>Follow us<\/h2>\n                            <div class=\"d-flex flex-row justify-content-left align-items-center gap-3\">\n                                                            <a href=\"https:\/\/www.facebook.com\/Flightcaselabels\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" fill=\"#ffffff\"\n                                         class=\"bi bi-facebook\" viewBox=\"0 0 16 16\">\n                                        <path d=\"M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951\"\/>\n                                    <\/svg>\n                                <\/a>\n                            \n                                                            <a href=\"https:\/\/www.instagram.com\/flightcaselabels_\/\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" fill=\"#fff\"\n                                         class=\"bi bi-instagram\" viewBox=\"0 0 16 16\">\n                                        <path d=\"M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334\"\/>\n                                    <\/svg>\n                                <\/a>\n                                                        <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/footer>\n\n            <div id=\"configurator-modal\" class=\"modal\" tabindex=\"-1\" x-data=\"{modal: $store.configurator.modal}\"\n                 data-bs-backdrop=\"static\">\n                <div class=\"modal-dialog modal-dialog-top-centered\">\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <h5 class=\"modal-title\" x-text=\"modal.title\"><\/h5>\n                            <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n                        <\/div>\n                        <div class=\"modal-body\">\n                            <p x-html=\"modal.body\"><\/p>\n                        <\/div>\n                        <div class=\"modal-footer\">\n                            <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                                    x-text=\"modal.cancelText ?? 'Cancel'\" @click=\"modal.cancel\"><\/button>\n                            <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\"\n                                    x-text=\"modal.confirmText ?? 'OK'\" @click=\"modal.confirm\"><\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Modal -->\n            <div class=\"modal fade\" id=\"configurator-order-modal\" tabindex=\"-1\" role=\"dialog\"\n                 aria-labelledby=\"order-modal-title\" aria-hidden=\"true\">\n                <div class=\"modal-dialog modal-lg modal-dialog-top-centered\" role=\"document\">\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <h5 class=\"modal-title\" id=\"order-modal-title\"\n                                x-text=\"$store.translations.modals?.order.title || $el.innerText\">Produktdetails<\/h5>\n                            <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n                        <\/div>\n                        <div class=\"modal-body\">\n                            <div class=\"container-fluid\">\n                                <div class=\"row\">\n                                    <div class=\"col-md-3\">\n                                        <!-- Tab List -->\n                                        <ul class=\"nav nav-pills nav-order flex-column\" id=\"myTab\" role=\"tablist\">\n                                            <li class=\"nav-item\" role=\"presentation\">\n                                                <button class=\"nav-link active\" id=\"preview-tab\" data-bs-toggle=\"tab\"\n                                                        data-bs-target=\"#preview\" type=\"button\" role=\"tab\"\n                                                        aria-controls=\"preview\" aria-selected=\"false\"\n                                                        x-text=\"$store.translations.modals?.order.preview.label || $el.innerText\">Vorschau                                                <\/button>\n                                            <\/li>\n                                            <li class=\"nav-item\" role=\"presentation\">\n                                                <button class=\"nav-link\" id=\"info-tab\" data-bs-toggle=\"tab\"\n                                                        data-bs-target=\"#info\" type=\"button\" role=\"tab\"\n                                                        aria-controls=\"info\"\n                                                        aria-selected=\"false\"\n                                                        x-text=\"$store.translations.modals?.order.information.label || $el.innerText\">Information                                                <\/button>\n                                            <\/li>\n                                            <li class=\"nav-item\" role=\"presentation\">\n                                                <button class=\"nav-link\" id=\"prices-tab\" data-bs-toggle=\"tab\"\n                                                        data-bs-target=\"#prices\" type=\"button\" role=\"tab\"\n                                                        aria-controls=\"prices\" aria-selected=\"true\"\n                                                        x-text=\"$store.translations.modals?.order.prices.label || $el.innerText\">Preise                                                <\/button>\n                                            <\/li>\n                                        <\/ul>\n                                    <\/div>\n                                    <div class=\"col-md-9\">\n                                        <!-- Tab Content -->\n                                        <div class=\"tab-content\">\n                                            <div class=\"tab-pane fade show active\" id=\"preview\" role=\"tabpanel\"\n                                                 aria-labelledby=\"preview-tab\">\n                                                <!-- Image Tab Content -->\n                                                <h3 x-text=\"$store.translations.modals?.order.preview.previewoflabel || $el.innerText\">Vorschau Ihres Etiketts<\/h3>\n                                                <div id=\"preview-image-progress-bar-wrapper\" class=\"progress mb-3\" role=\"progressbar\">\n                                                    <div id=\"preview-image-progress-bar\" class=\"progress-bar progress-bar-striped progress-bar-animated\"\n                                                         style=\"width: 0%\"><\/div>\n                                                <\/div>\n                                                <div id=\"progress-text\"><\/div>\n                                                <div id=\"preview-image-container\">\n                                                <\/div>\n                                                <form id=\"preview-email\" class=\"mt-3\"\n                                                      x-show=\"$store.configurator.isLabelOrderable\">\n                                                    <p class=\"my-3\">\n                                                        <button class=\"btn btn-primary\" type=\"button\"\n                                                                data-bs-toggle=\"collapse\"\n                                                                data-bs-target=\"#preview-email-collapse\"\n                                                                aria-expanded=\"false\"\n                                                                aria-controls=\"preview-email-collapse\"\n                                                                x-text=\"$store.translations.modals?.order.preview.sendpreview || $el.innerText\">\n                                                            Senden Sie die Vorschau Ihres Etiketts an jemanden                                                            <i\n                                                                    class=\"bi bi-chevron-down\"><\/i>\n                                                        <\/button>\n                                                    <\/p>\n                                                    <div class=\"collapse\" id=\"preview-email-collapse\">\n                                                        <div id=\"preview-email-status\" class=\"text-primary\"><\/div>\n                                                        <fieldset id=\"preview-email-fields\">\n                                                            <div class=\"mb-3\">\n                                                                <label for=\"preview-email-from\" class=\"form-label\"\n                                                                       x-text=\"$store.translations.modals?.order.preview.fromname || $el.innerText\">\n                                                                    Absendername                                                                <\/label>\n                                                                <input type=\"text\" name=\"preview-from\"\n                                                                       id=\"preview-email-from\" class=\"form-control\"\n                                                                       :placeholder=\"$store.translations.modals?.order.preview.yourname || $el.getAttribute('placeholder')\"\n                                                                       placeholder=\"Ihr Name\"\n                                                                       aria-label=\"Absendername\">\n                                                            <\/div>\n                                                            <div class=\"mb-3\">\n                                                                <label for=\"preview-email\" class=\"form-label\"\n                                                                       x-text=\"$store.translations.modals?.order.preview.toemailaddress || $el.innerText\">\n                                                                    An E-Mail-Adresse                                                                <\/label>\n                                                                <input type=\"email\" name=\"preview-email\"\n                                                                       id=\"preview-email-address\" class=\"form-control\"\n                                                                       :placeholder=\"$store.translations.modals?.order.preview.sendtoemailaddress || $el.getAttribute('placeholder')\"\n                                                                       placeholder=\"An E-Mail-Adresse senden\"\n                                                                       aria-label=\"An E-Mail-Adresse\"\n                                                                       aria-describedby=\"send\">\n                                                            <\/div>\n                                                            <div class=\"mb-3\">\n                                                                <label for=\"preview-email-message\" class=\"form-label\"\n                                                                       x-text=\"$store.translations.modals?.order.preview.message || $el.innerText\">\n                                                                    Nachricht (optional)                                                                <\/label>\n                                                                <textarea name=\"preview-message\"\n                                                                          id=\"preview-email-message\"\n                                                                          class=\"form-control\"\n                                                                          :placeholder=\"$store.translations.modals?.order.preview.writeoptionalmessage || $el.getAttribute('placeholder')\"\n                                                                          placeholder=\"Schreiben Sie eine optionale Nachricht...\"\n                                                                          aria-label=\"Nachricht (optional)\"><\/textarea>\n                                                            <\/div>\n                                                            <div class=\"mb-3\">\n                                                                <button class=\"btn btn-primary w-100\" type=\"button\"\n                                                                        id=\"send\"\n                                                                        x-text=\"$store.translations.modals?.order.preview.send || $el.innerText\"\n                                                                        @click=\"$store.configurator.sendPreview()\"><i\n                                                                            class=\"bi bi-send\"><\/i> Senden!                                                                <\/button>\n                                                            <\/div>\n                                                        <\/fieldset>\n                                                    <\/div>\n                                                <\/form>\n                                            <\/div>\n                                            <div class=\"tab-pane fade\" id=\"info\" role=\"tabpanel\"\n                                                 aria-labelledby=\"info-tab\">\n                                                <!-- Information Tab Content -->\n                                                <h3 x-text=\"$store.translations.modals?.order.information.label || $el.innerText\">Information<\/h3>\n                                                <ul>\n                                                    <li>\n                                                    <span x-text=\"$store.translations.modals?.order.information.size || $el.innerText\">\n                                                        Gr\u00f6\u00dfe:                                                    <\/span>\n                                                        <span x-text=\"$store.canvas.size.width\"><\/span>mm x\n                                                        <span x-text=\"$store.canvas.size.height\"><\/span>mm\n                                                        <span x-show=\"$store.configurator.customSize\"\n                                                              x-text=\"$store.translations.modals?.order.information.customsize || $el.innerText\">\n                                                        (Custom size)                                                    <\/span>\n                                                    <\/li>\n                                                    <\/li>\n                                                    <li>\n                                                    <span x-text=\"$store.translations.modals?.order.information.chosentemplate || $el.innerText\">\n                                                        Chosen template:                                                    <\/span>\n                                                        <span x-text=\"$store.configurator.templateName || $store.translations.modals?.order.information.emptylabel || $el.innerText\">\n                                                        Empty label                                                    <\/span>\n                                                    <\/li>\n                                                    <li>\n                                                    <span x-text=\"$store.translations.modals?.order.information.labelid || $el.innerText\">\n                                                        Label ID (For support):                                                    <\/span>\n                                                        <span x-text=\"$store.configurator.labelID\"><\/span>\n                                                    <\/li>\n                                                <\/ul>\n                                            <\/div>\n                                            <div class=\"tab-pane fade\" id=\"prices\" role=\"tabpanel\"\n                                                 aria-labelledby=\"prices-tab\">\n                                                 \n                                                <div x-text=\"$store.configurator.priceTableMessage\"><\/div>\n\n                                                <table class=\"table\" x-show=\"$store.configurator.pricePerQuantity\">\n                                                    <thead>\n                                                        <tr>\n                                                            <th scope=\"col\">Quantity<\/th>\n                                                            <th scope=\"col\">Price<\/th>\n                                                        <\/tr>\n                                                    <\/thead>\n                                                    <tbody>\n                                                        <template x-for=\"row in $store.configurator.pricePerQuantity\">\n                                                            <tr>\n                                                                <td x-text=\"row.quantity\"><\/td>\n                                                                <td x-text=\"row.price\"><\/td>\n                                                            <\/tr>\n                                                        <\/template>\n                                                    <\/tbody>\n                                                <\/table>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"modal-footer\">\n                        <span class=\"text-muted\" x-show=\"!$store.configurator.isLabelOrderable\"\n                              x-text=\"$store.translations.modals?.order.updatinglabel || $el.innerText\">\n                            Your label is being updated&#8230;                        <\/span>\n                            <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                                    x-text=\"$store.translations.modals?.order.close || $el.innerText\">\n                                Schlie\u00dfen                            <\/button>\n                            <button type=\"button\" class=\"btn btn-primary modal-btn-order\"\n                                    :disabled=\"!$store.configurator.isLabelOrderable\"\n                                    @click=\"configurator.selectOrder()\"\n                                    x-text=\"$store.translations.modals?.order.order || $el.innerText\">\n                                Bestellung                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div id=\"custom-size-modal\" class=\"modal\" tabindex=\"-1\">\n                <form class=\"modal-dialog modal-dialog-top-centered\" onsubmit=\"return false;\">\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <h5 class=\"modal-title\" x-text=\"$store.translations.modals?.customsize.title\"><\/h5>\n                            <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n                        <\/div>\n                        <div class=\"modal-body\">\n                            <div class=\"input-group has-validation mb-3\">\n                                <span class=\"input-group-text\"><span\n                                            x-text=\"$store.translations.modals?.customsize.width\"><\/span><\/span>\n                                <input type=\"number\" name=\"width\"\n                                       :value=\"Math.round((custom_size_limit.max_width - custom_size_limit.min_width) \/ 2)\"\n                                       class=\"form-control\" step=\"0.25\" :min=\"custom_size_limit.min_width\"\n                                       :max=\"custom_size_limit.max_width\" id=\"custom-size-width\"\n                                       aria-describedby=\"min-width max-width\" required>\n                                <span class=\"input-group-text\">mm<\/span>\n                                <div class=\"invalid-feedback\"\n                                     x-text=\"`Please enter a value between ${custom_size_limit.min_width}mm and ${custom_size_limit.max_width}mm`\"><\/div>\n                            <\/div>\n                            <div class=\"input-group has-validation mb-3\">\n                                <span class=\"input-group-text\"><span\n                                            x-text=\"$store.translations.modals?.customsize.height\"><\/span><\/span>\n                                <input type=\"number\" name=\"height\"\n                                       :value=\"Math.round((custom_size_limit.max_height - custom_size_limit.min_height) \/ 2)\"\n                                       class=\"form-control\" step=\"0.25\" :min=\"custom_size_limit.min_height\"\n                                       :max=\"custom_size_limit.max_height\" id=\"custom-size-height\"\n                                       aria-describedby=\"min-height max-height\" required>\n                                <span class=\"input-group-text\">mm<\/span>\n                                <div class=\"invalid-feedback\"\n                                     x-text=\"`Please enter a value between ${custom_size_limit.min_height}mm and ${custom_size_limit.max_height}mm`\"><\/div>\n                            <\/div>\n                            <h5 x-text=\"$store.translations.modals?.customsize.limitations.header\"><\/h5>\n                            <p x-text=\"$store.translations.modals?.customsize.limitations.description\"><\/p>\n                            <table class=\"table\">\n                                <tbody>\n                                <tr>\n                                    <td x-text=\"$store.translations.modals?.customsize.limitations.minimalsize\"><\/td>\n                                    <td x-text=\"`${custom_size_limit.min_width}mm x ${custom_size_limit.min_height}mm`\"><\/td>\n                                <\/tr>\n                                <tr>\n                                    <td x-text=\"$store.translations.modals?.customsize.limitations.maximalsize\"><\/td>\n                                    <td x-text=\"`${custom_size_limit.max_width}mm x ${custom_size_limit.max_height}mm`\"><\/td>\n                                <\/tr>\n                                <\/tbody>\n                            <\/table>\n\n                            <div x-text=\"$store.translations.modals?.customsize.limitations.contact\">\n                                <a href=\"mailto:contact@flightcaselabels.nl\">\n                                    contact@flightcaselabels.nl                                <\/a>\n                            <\/div>\n                            <div class=\"modal-footer\">\n                                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                                        x-text=\"$store.translations.modals?.customsize.limitations.cancel\"><\/button>\n                                <button type=\"button\" id=\"custom-size-confirm\" class=\"btn btn-primary\"\n                                        data-bs-dismiss=\"modal\"\n                                        x-text=\"$store.translations.modals?.customsize.limitations.create\"><\/button>\n                            <\/div>\n                        <\/div>\n                <\/form>\n            <\/div>\n        <\/section>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":517,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-157","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gestalten Sie Ihre eigenen Etiketten \u2013 Flightcaselabels Konfigurator - Flightcaselabels Configurator<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flightcaselabels.design\/de\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gestalten Sie Ihre eigenen Etiketten \u2013 Flightcaselabels Konfigurator - Flightcaselabels Configurator\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flightcaselabels.design\/de\/\" \/>\n<meta property=\"og:site_name\" content=\"Flightcaselabels Configurator\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-10T15:25:41+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/flightcaselabels.design\/de\/\",\"url\":\"https:\/\/flightcaselabels.design\/de\/\",\"name\":\"Gestalten Sie Ihre eigenen Etiketten \u2013 Flightcaselabels Konfigurator - Flightcaselabels Configurator\",\"isPartOf\":{\"@id\":\"https:\/\/flightcaselabels.design\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/flightcaselabels.design\/de\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/flightcaselabels.design\/de\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/flightcaselabels.design\/wp-content\/uploads\/2024\/09\/Flightcaselabels-Configurator-Designed.webp\",\"datePublished\":\"2023-09-19T13:51:36+00:00\",\"dateModified\":\"2023-10-10T15:25:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/flightcaselabels.design\/de\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/flightcaselabels.design\/de\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/flightcaselabels.design\/de\/#primaryimage\",\"url\":\"https:\/\/flightcaselabels.design\/wp-content\/uploads\/2024\/09\/Flightcaselabels-Configurator-Designed.webp\",\"contentUrl\":\"https:\/\/flightcaselabels.design\/wp-content\/uploads\/2024\/09\/Flightcaselabels-Configurator-Designed.webp\",\"width\":660,\"height\":350},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/flightcaselabels.design\/de\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/flightcaselabels.design\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gestalten Sie Ihre eigenen Etiketten \u2013 Flightcaselabels Konfigurator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flightcaselabels.design\/de\/#website\",\"url\":\"https:\/\/flightcaselabels.design\/de\/\",\"name\":\"Flightcaselabels Configurator\",\"description\":\"Design &amp; order your own labels today!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flightcaselabels.design\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gestalten Sie Ihre eigenen Etiketten \u2013 Flightcaselabels Konfigurator - Flightcaselabels Configurator","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flightcaselabels.design\/de\/","og_locale":"de_DE","og_type":"article","og_title":"Gestalten Sie Ihre eigenen Etiketten \u2013 Flightcaselabels Konfigurator - Flightcaselabels Configurator","og_url":"https:\/\/flightcaselabels.design\/de\/","og_site_name":"Flightcaselabels Configurator","article_modified_time":"2023-10-10T15:25:41+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/flightcaselabels.design\/de\/","url":"https:\/\/flightcaselabels.design\/de\/","name":"Gestalten Sie Ihre eigenen Etiketten \u2013 Flightcaselabels Konfigurator - Flightcaselabels Configurator","isPartOf":{"@id":"https:\/\/flightcaselabels.design\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flightcaselabels.design\/de\/#primaryimage"},"image":{"@id":"https:\/\/flightcaselabels.design\/de\/#primaryimage"},"thumbnailUrl":"https:\/\/flightcaselabels.design\/wp-content\/uploads\/2024\/09\/Flightcaselabels-Configurator-Designed.webp","datePublished":"2023-09-19T13:51:36+00:00","dateModified":"2023-10-10T15:25:41+00:00","breadcrumb":{"@id":"https:\/\/flightcaselabels.design\/de\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flightcaselabels.design\/de\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/flightcaselabels.design\/de\/#primaryimage","url":"https:\/\/flightcaselabels.design\/wp-content\/uploads\/2024\/09\/Flightcaselabels-Configurator-Designed.webp","contentUrl":"https:\/\/flightcaselabels.design\/wp-content\/uploads\/2024\/09\/Flightcaselabels-Configurator-Designed.webp","width":660,"height":350},{"@type":"BreadcrumbList","@id":"https:\/\/flightcaselabels.design\/de\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flightcaselabels.design\/de\/"},{"@type":"ListItem","position":2,"name":"Gestalten Sie Ihre eigenen Etiketten \u2013 Flightcaselabels Konfigurator"}]},{"@type":"WebSite","@id":"https:\/\/flightcaselabels.design\/de\/#website","url":"https:\/\/flightcaselabels.design\/de\/","name":"Flightcaselabels Configurator","description":"Design &amp; order your own labels today!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flightcaselabels.design\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"}]}},"_links":{"self":[{"href":"https:\/\/flightcaselabels.design\/de\/wp-json\/wp\/v2\/pages\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flightcaselabels.design\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/flightcaselabels.design\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/flightcaselabels.design\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flightcaselabels.design\/de\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":1,"href":"https:\/\/flightcaselabels.design\/de\/wp-json\/wp\/v2\/pages\/157\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/flightcaselabels.design\/de\/wp-json\/wp\/v2\/pages\/157\/revisions\/158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flightcaselabels.design\/de\/wp-json\/wp\/v2\/media\/517"}],"wp:attachment":[{"href":"https:\/\/flightcaselabels.design\/de\/wp-json\/wp\/v2\/media?parent=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}