<div class="m-breadcrumb breadcrumb--main">
    <span class="breadcrumb__label sr-only">Sie befinden sich hier:</span>
    <ul class="a-list-basic list--breadcrumb">
        <li class="list__item list__item--breadcrumb">
            <a href="/components/preview/homepage" class="a-link ">Barmer Startseite</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

        </li>
        <li class="list__item list__item--breadcrumb">
            <a href="/components/preview/article" class="a-link "><span class="link__inner">Themen-Übersichtseite</span><i class="a-icon icon--lock" aria-label=""></i></a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

        </li>
        <li class="list__item list__item--breadcrumb">
            Barmer So ein Unterthema
        </li>
    </ul>

</div>

<h1 class="p-forum-create-post__page-title">Vorschau Ihrer Kleinanzeige</h1>

<div class="o-textmodule ">

    <div class="a-richtext richtext--article">
        <p>Hier sehen Sie die Vorschau Ihrer Kleinanzeige.</p>
    </div>

</div>

<div class="p-forum-create-post__post-preview">
    <div class="p-forum-create-post__preview-headline">Überschrift</div>
    <div class="a-plaintext p-forum-create-post__preview-text">Alte Rostlaube</div>
    <div class="p-forum-create-post__preview-headline">Hochgeladenes Bild</div>
    <div class="a-plaintext p-forum-create-post__preview-text">
        rostlaube.jpg
        <img src="../../images/3x2/mann-mit-tablet.jpg" alt="Dies ist der alt-Text" title="Dies ist der title-Text" class="a-image p-forum-create-post__preview-image" loading="lazy">

    </div>
    <div class="p-forum-create-post__preview-headline">Hochgeladene Datei</div>
    <div class="a-plaintext p-forum-create-post__preview-text">kaufvertrag_pkw_von_privat_data.pdf</div>
    <div class="p-forum-create-post__preview-headline">Beschreibungstext</div>
    <div class="a-plaintext p-forum-create-post__preview-text">Fast wie neu.</div>
    <div class="p-forum-create-post__preview-headline">Ihre Daten</div>
    <div class="p-forum-create-post__preview-data"><span class="p-forum-create-post__preview-data-label">Autor*in:</span> Angela</div>
    <div class="p-forum-create-post__preview-data"><span class="p-forum-create-post__preview-data-label">Direkte E-Mail an::</span> angela@barmer.de</div>
    <div class="p-forum-create-post__preview-data"><span class="p-forum-create-post__preview-data-label">Erstellungsdatum:</span>15.10.2021</div>
</div>

<form class="o-form p-forum-create-post__form js-form" method="POST">
    <input type="hidden" value="Alte Rostlaube" class="a-input input--hidden" id="bm-listing-title" name="title">
    <input type="hidden" value="Fast wie neu." class="a-input input--hidden" id="bm-listing-text" name="text">
    <input type="hidden" value="Angela" class="a-input input--hidden" id="bm-listing-author" name="authorName">
    <input type="hidden" value="angela@barmer.de" class="a-input input--hidden" id="bm-listing-email" name="authorEmail">

    <div class="form__actions">
        <button class="a-btn btn--secondary" type="submit" formaction="/cancel">Zurück</button>

        <button class="a-btn btn--primary" type="submit" formaction="/publish">Beitrag veröffentlichen</button>

    </div>
</form>

<div class="o-teaser-collection teaser-collection--three-col-teaserlist js-teaser-targeting-init">

    <h3 class="teaser-collection__headline teaser-collection__headline--h2">Weitere Kleinanzeigen finden Sie hier</h3>

    <div class="teaser-collection__text">
        <p>Hier steht dann eine kurzer Richtext, der nicht soviele Styling-Optionen hat. Im Studio lässt sich dort wohl nur strong, kursiv und noch irgendetwas auszeichnen.</p>

    </div>

    <div class="teaser-collection__teaser-wrapper">
    </div>

</div>
{{render '@breadcrumb--main' partials.breadcrumb merge=true}}

<h1 class="p-forum-create-post__page-title">{{content.pageTitle}}</h1>

{{render '@textmodule' partials.textmodule merge=true }}

{{#switches.hasPostLink}}
  {{render '@button--primary' partials.postLink merge=true }}
{{/switches.hasPostLink}}

{{#switches.hasPreview}}
  <div class="p-forum-create-post__post-preview">
    <div class="p-forum-create-post__preview-headline">{{content.preview.titleLabel}}</div>
    <div class="a-plaintext p-forum-create-post__preview-text">{{content.preview.title}}</div>
    <div class="p-forum-create-post__preview-headline">{{content.preview.imageLabel}}</div>
    <div class="a-plaintext p-forum-create-post__preview-text">
      {{ content.preview.imageFilename }}
      {{ render '@image--default' partials.imgPreview merge=true }}
    </div>
    <div class="p-forum-create-post__preview-headline">{{content.preview.documentLabel}}</div>
    <div class="a-plaintext p-forum-create-post__preview-text">{{content.preview.documentFilename}}</div>
    <div class="p-forum-create-post__preview-headline">{{content.preview.textLabel}}</div>
    <div class="a-plaintext p-forum-create-post__preview-text">{{content.preview.text}}</div>
    <div class="p-forum-create-post__preview-headline">{{content.preview.dataLabel}}</div>
    <div class="p-forum-create-post__preview-data"><span class="p-forum-create-post__preview-data-label">{{content.preview.authorLabel}}:</span> {{content.preview.author}}</div>
    <div class="p-forum-create-post__preview-data"><span class="p-forum-create-post__preview-data-label">{{content.preview.emailLabel}}:</span> {{content.preview.email}}</div>
    <div class="p-forum-create-post__preview-data"><span class="p-forum-create-post__preview-data-label">{{content.preview.dateTimeCreatedLabel}}:</span>{{content.preview.dateTimeCreated}}</div>
  </div>
{{/switches.hasPreview}}

{{#switches.hasErrors}}
  {{ render '@list' partials.errorList merge=true}}
{{/switches.hasErrors}}

{{#switches.hasForm}}
  {{ render '@form' partials.form merge=true }}
{{/switches.hasForm}}

{{#switches.hasTeaserCollection}}
  {{ render '@teaser-collections--3-spaltige-teaserliste' partials.teaserCollection merge=true }}
{{/switches.hasTeaserCollection}}
{
  "switches": {
    "hasContactFlyout": "true",
    "hasForm": true,
    "hasPreview": true,
    "hasTeaserCollection": true
  },
  "content": {
    "alertText": "Die Sitzung wurde erfolgreich verlängert",
    "pageTitle": "Vorschau Ihrer Kleinanzeige",
    "preview": {
      "label": "Ihr Beitrag",
      "titleLabel": "Überschrift",
      "title": "Alte Rostlaube",
      "imageLabel": "Hochgeladenes Bild",
      "imageFilename": "rostlaube.jpg",
      "documentLabel": "Hochgeladene Datei",
      "documentFilename": "kaufvertrag_pkw_von_privat_data.pdf",
      "textLabel": "Beschreibungstext",
      "text": "Fast wie neu.",
      "dataLabel": "Ihre Daten",
      "authorLabel": "Autor*in",
      "author": "Angela",
      "emailLabel": "Direkte E-Mail an:",
      "email": "angela@barmer.de",
      "dateTimeCreatedLabel": "Erstellungsdatum",
      "dateTimeCreated": "15.10.2021"
    }
  },
  "partials": {
    "sessionMetadata": {
      "content": {
        "expiredDialogId": "bm-dialog-session-expired",
        "expiringDialogId": "bm-dialog-session-expiring"
      }
    },
    "expiring": {
      "switches": {
        "hidden": true,
        "secondaryButton": true
      },
      "content": {
        "id": "bm-dialog-session-expiring",
        "text": "In <span class=\"js-session-timer\">5</span> Minuten endet ihre Sitzung und Sie werden automatisch ausgeloggt."
      },
      "partials": {
        "primaryButton": {
          "content": {
            "label": "Login verlängern"
          }
        },
        "secondaryButton": {
          "content": {
            "label": "Logout"
          }
        }
      }
    },
    "expired": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-dialog-session-expired"
      }
    },
    "modalVideo": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-video"
      },
      "viewtypes": {
        "specifier": "modal--video"
      },
      "partials": {
        "consent": {
          "viewtypes": {
            "specifier": "consent--in-modal"
          }
        },
        "videoFigure": {
          "switches": {
            "hasHeadline": false,
            "hasFigcaption": false,
            "hasVideo": false
          }
        }
      }
    },
    "textmodule": {
      "switches": {
        "hasHeadline": false,
        "hasIntro": false,
        "hasCTA": false
      },
      "viewtypes": {},
      "partials": {
        "detailText": {
          "switches": {
            "hasWrapper": true,
            "hasDefaultText": false
          },
          "viewtypes": {},
          "content": {
            "text": "<p>Hier sehen Sie die Vorschau Ihrer Kleinanzeige.</p>"
          },
          "partials": {}
        }
      }
    },
    "form": {
      "viewtypes": {
        "specifier": "p-forum-create-post__form js-form"
      },
      "content": {
        "attributes": {
          "action": false,
          "method": "POST"
        }
      },
      "partials": {
        "items": [
          {
            "type": "formelement-input--hidden",
            "content": {
              "value": "Alte Rostlaube",
              "name": "title",
              "id": "bm-listing-title"
            }
          },
          {
            "type": "formelement-input--hidden",
            "content": {
              "value": "Fast wie neu.",
              "name": "text",
              "id": "bm-listing-text"
            }
          },
          {
            "type": "formelement-input--hidden",
            "content": {
              "value": "Angela",
              "name": "authorName",
              "id": "bm-listing-author"
            }
          },
          {
            "type": "formelement-input--hidden",
            "content": {
              "value": "angela@barmer.de",
              "name": "authorEmail",
              "id": "bm-listing-email"
            }
          }
        ],
        "buttons": [
          {
            "type": "button--secondary",
            "viewtypes": {},
            "content": {
              "type": "submit",
              "label": "Zurück",
              "attributes": "formaction=\"/cancel\""
            }
          },
          {
            "type": "button--primary",
            "viewtypes": {},
            "content": {
              "type": "submit",
              "label": "Beitrag veröffentlichen",
              "attributes": "formaction=\"/publish\""
            }
          }
        ]
      }
    },
    "teaserCollection": {
      "switches": {
        "hasHeadline": true,
        "teaserItemAmount": 8
      },
      "viewtypes": {},
      "content": {
        "headline": "Weitere Kleinanzeigen finden Sie hier"
      },
      "partials": {
        "teaserItems": [
          {
            "switches": {
              "isLinkable": false,
              "hasTeaserHeadlineAsLink": true,
              "hasTextChevron": true,
              "hasTeaserImage": false
            },
            "viewtypes": {
              "specifier": ""
            },
            "content": {
              "headline": "Auto & Zubehör"
            },
            "partials": {
              "teaserText": {
                "content": {
                  "text": "\nOb neue oder gebrauchte Fahrzeuge, Kfz-Ersatzteile, Reifen, Felgen, Zubehör- oder Tuningteile – vielleicht hat der Kollegenkreis, was Sie suchen."
                }
              }
            }
          },
          {
            "switches": {
              "isLinkable": false,
              "hasTeaserHeadlineAsLink": true,
              "hasTextChevron": true,
              "hasTeaserImage": false
            },
            "viewtypes": {
              "specifier": ""
            },
            "content": {
              "headline": "Bücher & Hörbücher"
            },
            "partials": {
              "teaserText": {
                "content": {
                  "text": "Bücher und Hörbücher günstig kaufen & verkaufen - Angebote aus dem Kollegenkreis"
                }
              }
            }
          },
          {
            "switches": {
              "isLinkable": false,
              "hasTeaserHeadlineAsLink": true,
              "hasTextChevron": true,
              "hasTeaserImage": false
            },
            "viewtypes": {
              "specifier": ""
            },
            "content": {
              "headline": "Computer und Elektronik"
            },
            "partials": {
              "teaserText": {
                "content": {
                  "text": "Smartphones, Netbooks, Tablets, PCs und noch vieles mehr - Technik-Angebote aus dem Kollegenkreis "
                }
              }
            }
          },
          {
            "switches": {
              "isLinkable": false,
              "hasTeaserHeadlineAsLink": true,
              "hasTextChevron": true,
              "hasTeaserImage": false
            },
            "viewtypes": {
              "specifier": ""
            },
            "content": {
              "headline": "Fahrgemeinschaften"
            },
            "partials": {
              "teaserText": {
                "content": {
                  "text": "Suche Mitfahrgelegenheit oder biete eine Fahrgemeinschaft an - Kleinanzeigen von Kollegen für Kollegen"
                }
              }
            }
          },
          {
            "switches": {
              "isLinkable": false,
              "hasTeaserHeadlineAsLink": true,
              "hasTextChevron": true,
              "hasTeaserImage": false
            },
            "viewtypes": {
              "specifier": ""
            },
            "content": {
              "headline": "Haushalt & Möbel"
            },
            "partials": {
              "teaserText": {
                "content": {
                  "text": "Gebrauchte Möbel zu günstigen Preisen kaufen oder selbst verkaufen. Stöbern Sie in den Angeboten aus dem Kollegenkreis."
                }
              }
            }
          },
          {
            "switches": {
              "isLinkable": false,
              "hasTeaserHeadlineAsLink": true,
              "hasTextChevron": true,
              "hasTeaserImage": false
            },
            "viewtypes": {
              "specifier": ""
            },
            "content": {
              "headline": "Immobilien & Vermietungen"
            },
            "partials": {
              "teaserText": {
                "content": {
                  "text": "Sie suchen oder bieten ein neues Zuhause? Jetzt finden oder inserieren!"
                }
              }
            }
          },
          {
            "switches": {
              "isLinkable": false,
              "hasTeaserHeadlineAsLink": true,
              "hasTextChevron": true,
              "hasTeaserImage": false
            },
            "viewtypes": {
              "specifier": ""
            },
            "content": {
              "headline": "Kinderkleidung & Spielzeug"
            },
            "partials": {
              "teaserText": {
                "content": {
                  "text": "Inserate für alles, wofür die eigenen Kleinen zu groß sind."
                }
              }
            }
          },
          {
            "switches": {
              "isLinkable": false,
              "hasTeaserHeadlineAsLink": true,
              "hasTextChevron": true,
              "hasTeaserImage": false
            },
            "viewtypes": {
              "specifier": ""
            },
            "content": {
              "headline": "Regionale Veranstaltungen"
            },
            "partials": {
              "teaserText": {
                "content": {
                  "text": "Ob Konzerte, Events oder Partys - hier finden Sie Anzeigen von Kollegen und Kolleginnen für Veranstaltungen in Ihrer Umgebung."
                }
              }
            }
          }
        ]
      }
    },
    "imgPreview": {
      "viewtypes": {
        "specifier": "p-forum-create-post__preview-image"
      },
      "content": {
        "sourceUrl": "../../images/3x2/mann-mit-tablet.jpg"
      }
    }
  }
}

No notes defined.