{namespace neos=Neos\Neos\ViewHelpers}

<div class="o-container o-container--sm {marginTop}">
    <div class="c-countdown" data-countdown data-countdown-end-date="{countdownDate}">
        {neos:contentElement.editable(property: 'countdownTitle', class: 'c-countdown__title', tag: 'p')}

        <div class="c-countdown__item-wrapper">
            <div data-countdown-item class="c-countdown__item">
                <span data-countdown-days>00</span>
                <p>{f:translate(id: 'countdown.days', source: 'NodeTypes/Countdown', package: 'Newland.CityTheme')}</p>
            </div>
            <div data-countdown-item class="c-countdown__item">
                <span data-countdown-hours>00</span>
                <p>{f:translate(id: 'countdown.hours', source: 'NodeTypes/Countdown', package: 'Newland.CityTheme')}</p>
            </div>
            <div data-countdown-item class="c-countdown__item">
                <span data-countdown-minutes>00</span>
                <p>{f:translate(id: 'countdown.minutes', source: 'NodeTypes/Countdown', package: 'Newland.CityTheme')}</p>
            </div>
            <div data-countdown-item class="c-countdown__item">
                <span data-countdown-seconds>00</span>
                <p>{f:translate(id: 'countdown.seconds', source: 'NodeTypes/Countdown', package: 'Newland.CityTheme')}</p>
            </div>
        </div>
        <f:if condition="{countdownEndText}">
            <p data-countdown-end-text class="c-countdown__end-title hidden">{countdownEndText}</p>
        </f:if>
    </div>
</div>