<?php

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

  extract($user_data);

  $titleFont = getFontData($user_data, "titleFont");
  $textFont = getFontData($user_data, "textFont");
  $lowerTitleFont = getFontData($user_data, "lowerTitleFont");
  $buttonFont = getFontData($user_data, "buttonFont");
  $buttonOutlineBorder = useVar($user_data, "buttonOutlineBorder", false);

  $title = $showTitle ? '
    <div
      class="flex-element-type-tabs2-text__title"
      data-font="'.$titleFont['dataFont'].'"
      style="'.$titleFont['style'].'"
    >
    </div>
  ' : '';

  $text = $showText ? '
    <div
      class="flex-element-type-tabs2-text__text"
      data-font="'.$textFont['dataFont'].'"
      style="'.$textFont['style'].'"
    >
    </div>
  ' : '';


  $lowerTitle = $showLowerTitle ? '
    <div
      class="flex-element-type-tabs2-text__lower-title"
      data-font="'.$lowerTitleFont['dataFont'].'"
      style="'.$lowerTitleFont['style'].'"
    >
    </div>
  ' : '';

  $buttonOutlineClass = $buttonOutlineBorder ? "flex-element-type-tabs2-text__button--has-border" : "";

  $button = useVar($user_data, 'showButton', false) ? '
    <a
      class="
        flex-element-type-tabs2-text__button
        flex-element-type-tabs2-text__button--client
        '.$buttonOutlineClass.'
      "
      data-font="'.$buttonFont['dataFont'].'"
      style="'.$buttonFont['style'].'"
    ></a>
  ' : '';

  $elMarkup = '
    <div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--close-block '.$custom_classes.'" style="'.$elStyles.'">
      <div
        class="flex-element-type-tabs2-text"
        style="
          --textAlign: '.useVar($user_data, 'textAlign', 'left').';
          --titleGap: '.remCalc($titleGap).';
          --textGap: '.remCalc($textGap).';
          --lowerTitleGap: '.remCalc(useVar($user_data, 'lowerTitleGap', 18)).';

          --titleColor: '.getStyleKitColor($titleColor).';
          --textColor: '.getStyleKitColor($textColor).';
          --lowerTitleColor: '.getStyleKitColor($lowerTitleColor).';
          --buttonLabelColor: '.getStyleKitColor(useVar($user_data, 'buttonLabelColor', 'scheme_1/button/text/default')).';
          --buttonBackgroundColor: '.getStyleKitColor(useVar($user_data, 'buttonBackgroundColor', 'scheme_1/button/background/default')).';
          --buttonBorderColor: '.getStyleKitColor(useVar($user_data, 'buttonBorderColor', 'scheme_1/button/background/default')).';
          --buttonHoverLabelColor: '.getStyleKitColor(useVar($user_data, 'buttonHoverLabelColor', 'scheme_1/button/text/hover')).';
          --buttonHoverBackgroundColor: '.getStyleKitColor(useVar($user_data, 'buttonHoverBackgroundColor', 'scheme_1/button/background/hover')).';
          --buttonHoverBorderColor: '.getStyleKitColor(useVar($user_data, 'buttonHoverBorderColor', 'scheme_1/button/background/hover')).';
          --buttonCornerRadius: '.remCalc(useVar($user_data, 'buttonCornersRadius', 0)).';
          --buttonBorderWidth: '.useVar($user_data, 'buttonLineWidth', 1).'px;
        "
        data-selected-tabs-element="'.$selectedTabsElement.'"
        data-use-color-overrides="'. useVar($user_data, 'useColorOverrides', false) .'"
      >
        '.$title.'
        '.$text.'
        '.$lowerTitle.'
        '.$button.'
      </div>
    </div>
  ';

  return $elMarkup;
}
