<?php

function renderSearchElement($block_class, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $b = 'flex-element-type-search';
  $data = $element['data'];
  $user_data = $data['user_data'];
  extract($user_data);

  $expandMode = useVar($user_data, "expandMode", false);

  $font = getFontData($user_data, 'searchFont');
  $fontAttributes = '
    style="' . $font['style'] . '"
    data-font="' . $font['dataFont'] . '"
  ';

  $line_class = $showLine ? $b . '__input-wrap--has-border' : '';
  $background_class = $showBackground ? $b . '__input-wrap--has-background' : '';
  $expand_class = $expandMode && $showIcon ? $b . '--expand-mode' : '';

  $icons = $showIcon ? '
    <div class="'.$b.'__icon" '.$fontAttributes.'>
      <i class="flo-flex-icon-search"></i>
    </div>
  ' : '';

  $icons .= $showIcon && $expandMode ? '
    <div class="'.$b.'__close-icon" '.$fontAttributes.'>
      <i class="flo-flex-icon-close-big"></i>
    </div>
  ' : '';

  return '
    <div
      class="
        '.$block_class.'__element
        '.$block_class.'__element--'.$element["id"].'
        '.$block_class.'__element--search '
        .$custom_classes . '
      "
      style="'.$elStyles.';"
    >
      <div
        class="
          '.$b.'
          '.$b.'--direction-'.useVar($user_data, 'direction', 'normal').'
          '.$expand_class.'
        "
        style="
          --input-color: ' . getStyleKitColor($user_data["textColor"]) . ';
          --icon-color: '. getStyleKitColor($user_data["iconColor"]) .';
          --icon-color-when-collapsed: '. getStyleKitColor(useVar($user_data, "iconColorWhenCollapsed", 'scheme_1/overline/default')) .';
          --bg-color: '. getStyleKitColor($user_data["backgroundColor"]) .';
          --line-color: ' . getStyleKitColor($user_data["lineColor"]) . ';
        "
      >
        <form
          class="
            '.$b.'__input-wrap
            '.$line_class.'
            '.$background_class.'
          "
          action="' . home_url("/") . '"
          method="get"

          '.$fontAttributes.'
        >
          <input
            class="'.$b.'__input flo-no-styling"
            name="s"
            type="text"
            id="'.$element["id"].'"
            style="border-bottom: 0px;"
            autocomplete="off"
            placeholder="'.$user_data["placeholder"].'"
          />
          '.$icons.'
        </form>
      </div>
    </div>
  ';
}
