VITEC-website/packages/vitec/ContentBlocks/ContentElements/card/templates/backend-preview.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Preview"/>
<f:section name="Content">

<f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
<f:asset.script identifier="vitec-backend-collapse" src="EXT:vitec/Resources/Public/JavaScript/backend-preview-collapse.js"/>

<details class="vitec-collapse">
<summary>
    <f:if condition="{data.image.0}"><f:image image="{data.image.0}" class="vitec-collapse__thumb" width="72c" height="44c" alt=""/></f:if>
    <span class="vitec-collapse__label">Card</span>
    <span class="vitec-collapse__hint">{data.header}</span>
    <f:if condition="{data.layout_variant} == 'flipcard'"><span class="vitec-badge">Flip</span></f:if>
</summary>
<div class="vitec-collapse__body">
<div class="vitec-preview vitec-preview--{data.background_variant}">

    <f:comment>Thumbnail: image > icon > placeholder</f:comment>
    <f:if condition="{data.image.0}">
        <f:then>
            <f:image image="{data.image.0}"
                     class="vitec-preview__thumb"
                     width="120c"
                     height="80c"
                     alt="Card image preview"/>
        </f:then>
        <f:else>
            <f:if condition="{data.icon.0}">
                <f:then>
                    <f:image image="{data.icon.0}"
                             class="vitec-preview__thumb"
                             width="120c"
                             height="80"
                             alt="Card icon preview"/>
                </f:then>
                <f:else>
                    <div class="vitec-preview__thumb-placeholder">
                        <f:switch expression="{data.layout_variant}">
                            <f:case value="text_only">📝</f:case>
                            <f:case value="icon_card">✦</f:case>
                            <f:case value="feature">⭐</f:case>
                            <f:case value="compact">▫</f:case>
                            <f:case value="flipcard">🔄</f:case>
                            <f:defaultCase>▢</f:defaultCase>
                        </f:switch>
                    </div>
                </f:else>
            </f:if>
        </f:else>
    </f:if>

    <div class="vitec-preview__body">
        <div class="vitec-preview__label">VITEC · Card</div>

        <f:if condition="{data.eyebrow}">
            <div class="vitec-preview__eyebrow">{data.eyebrow}</div>
        </f:if>

        <h3 class="vitec-preview__headline">
            <f:if condition="{data.header}">
                <f:then>{data.header}</f:then>
                <f:else>
                    <em style="color:#c00;">⚠ Headline missing</em>
                </f:else>
            </f:if>
        </h3>

        <f:if condition="{data.subheader}">
            <div class="vitec-preview__subline">{data.subheader}</div>
        </f:if>

        <f:if condition="{data.bodytext}">
            <div class="vitec-preview__body-text">
                <f:format.stripTags>{data.bodytext}</f:format.stripTags>
            </div>
        </f:if>

        <f:if condition="{data.back_headline}">
            <div class="vitec-preview__body-text">🔄 Back: {data.back_headline}</div>
        </f:if>

        <div class="vitec-preview__ctas">
            <f:if condition="{data.primary_cta_label}">
                <span class="vitec-preview__cta-btn">{data.primary_cta_label} →</span>
            </f:if>
            <f:if condition="{data.secondary_cta_label}">
                <span class="vitec-preview__cta-btn vitec-preview__cta-btn--secondary">
                    {data.secondary_cta_label}
                </span>
            </f:if>
        </div>
    </div>

    <f:comment>Settings sidebar with badges</f:comment>
    <div class="vitec-preview__settings">

        <span class="vitec-badge">
            <f:switch expression="{data.layout_variant}">
                <f:case value="vertical">▤ Vertical</f:case>
                <f:case value="horizontal">▥ Horizontal</f:case>
                <f:case value="horizontal_reverse">▤ Horizontal-Rev</f:case>
                <f:case value="image_overlay">▣ Image Overlay</f:case>
                <f:case value="text_only">📝 Text Only</f:case>
                <f:case value="icon_card">✦ Icon Card</f:case>
                <f:case value="feature">⭐ Feature</f:case>
                <f:case value="compact">▫ Compact</f:case>
                <f:case value="flipcard">🔄 Flip Card</f:case>
                <f:defaultCase>{data.layout_variant}</f:defaultCase>
            </f:switch>
        </span>

        <span class="vitec-badge">
            <span class="vitec-badge__dot vitec-badge__dot--{data.background_variant}"></span>
            <f:switch expression="{data.background_variant}">
                <f:case value="none">No BG</f:case>
                <f:case value="orange">Orange</f:case>
                <f:case value="blue">Blue</f:case>
                <f:case value="graphite">Graphite</f:case>
                <f:case value="midnight">Midnight</f:case>
                <f:case value="light">Light</f:case>
                <f:case value="dark">Dark</f:case>
                <f:defaultCase>{data.background_variant}</f:defaultCase>
            </f:switch>
        </span>

        <f:if condition="{data.image_aspect_ratio} != 'auto'">
            <span class="vitec-badge">⛶ {data.image_aspect_ratio -> f:format.raw()}</span>
        </f:if>

        <f:if condition="{data.text_alignment} != 'left'">
            <span class="vitec-badge">
                <f:switch expression="{data.text_alignment}">
                    <f:case value="center">↔ Center</f:case>
                    <f:case value="right">→ Right</f:case>
                    <f:defaultCase>{data.text_alignment}</f:defaultCase>
                </f:switch>
            </span>
        </f:if>

        <f:if condition="{data.border_style} != 'none'">
            <span class="vitec-badge">▭ Border: {data.border_style}</span>
        </f:if>

        <f:if condition="{data.shadow} != 'none'">
            <span class="vitec-badge">☁ Shadow: {data.shadow}</span>
        </f:if>

        <f:if condition="{data.card_link.url}">
            <span class="vitec-badge">🔗 Whole-card link</span>
        </f:if>

        <f:if condition="{data.cssClass}">
            <span class="vitec-badge">⌗ .{data.cssClass}</span>
        </f:if>

        <f:if condition="{data.debug}">
            <span class="vitec-badge vitec-badge--warning">⚙ Debug ON</span>
        </f:if>

    </div>

</div>
</div>
</details>

</f:section>
</html>