<?php

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

  $color = getStyleKitColor($user_data["searchColor"]);
  $placeholder = $user_data["placeholder"];
  $searchStyle = $user_data["searchStyle"];

  $elMarkup .= '
    <style>
      html > body > main.flo_page_wrap > div.flo_page .'.$b.'__element--'.$element["id"].' .flex-element-type-search__input-wrap,
      html > body > main.flo_page_wrap > div.flo_page .'.$b.'__element--'.$element["id"].' .flex-element-type-search__input-wrap .flex-element-type-search__input {
        '.fontMixin($user_data, 'searchFont', true).'
      }
    </style>
    <div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--search '.$custom_classes.'" style="'.$elStyles.';">
  ';
    $elMarkup .= '
      <form
        class="flex-element-type-search__input-wrap flex-element-type-search__input-wrap--'.$searchStyle.'"
        style="color: '.$color.';border-color: '.$color.';"
        action="' . home_url("/") .'" method="get"
      >
        <input
          name="s"
          type="text"
          id="'.$element["id"].'"
          class="flex-element-type-search__input flo-no-styling"
          placeholder="'.$placeholder.'"></input>
        <label class="flex-element-type-search__icon-wrap" for="'.$element["id"].'">
          <i class="flex-element-type-search__icon flo-flex-icon-search"></i>
        </label>
      </form>
    </div>
    ';

  return $elMarkup;
}