<?php

function renderCountdownElement($b, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $data = $element['data'];
  $user_data = $data['user_data'];
  $elMarkup = "";

  $selectedDate = $user_data['selectedDate'];
  $view = $user_data['cardView'] ? 'flip' : 'text';
  $labels = $user_data['showLabels'] ? '<span data-key="label" data-view="text" class="tick-label"></span>' : '';

  $elMarkup .= '
    <style>
      .' . $b . '__element--' . $element["id"] . ' .tick-flip,
      .' . $b . '__element--' . $element["id"] . ' .tick-group > div,
      .' . $b . '__element--' . $element["id"] . ' .flex-element-type-countdown__separator {
        ' . getFontData($user_data, 'digits')['style'] . '
        text-indent: 0;
        letter-spacing: 0!important;
        line-height: inherit;
      }
      .' . $b . '__element--' . $element["id"] . ' span[data-key="label"] {
        ' . getFontData($user_data, 'labels')['style'] . '
      }
      .' . $b . '__element--' . $element["id"] . ' .flex-element-type-countdown__expired-message {
        ' . getFontData($user_data, 'text')['style'] . '
      }
    </style>
    <div class="' . $b . '__element ' . $b . '__element--' . $element["id"] . ' ' . $b . '__element--countdown ' . $custom_classes . '" data-flex-chunk="element-countdown" style="' . $elStyles . '; --text-color: ' . getStyleKitColor($user_data["textColor"]) . ';">
  ';
  $elMarkup .= '
      <div
        class="flex-element-type-countdown__timer tick"
        data-value="' . $selectedDate . '"
        data-user-data=\'' . json_encode($user_data) . '\'
        style="
        --digits-color: ' . getStyleKitColor($user_data["digitsColor"]) . ';
        --cards-bg-color: ' . getStyleKitColor($user_data["cardsBgColor"]) . ';
        --digits-text-view-color: ' . getStyleKitColor($user_data["digitsColorTextView"]) . ';
        --labels-color: ' . getStyleKitColor($user_data["labelsColor"]) . ';
        --separators-color: ' . getStyleKitColor($user_data["separatorsColor"]) . ';
        "
      >
        <div data-repeat="true" data-layout="horizontal fit" data-transform="preset(d, h, m, s) -&gt; delay">
            <div class="tick-group">
                <div 
                  class="flex-element-type-countdown__digit-wrapper--' . $view . '" 
                  data-key="value" 
                  data-repeat="true" 
                  data-transform="pad(00) -&gt; split -&gt; delay"
                >
                    <span data-view="' . $view . '"></span>
                </div>
                ' . $labels . '
            </div>
        </div>

      </div>
      </div>
    ';

  return $elMarkup;
}
