<?php

/**
 * Site header search replace.
 *
 * @package Total WordPress theme
 * @subpackage Partials
 * @version 5.8.0
 */

use TotalTheme\Header\Menu\Search;

defined( 'ABSPATH' ) || exit;

$class = [
    'header-searchform-wrap',
    'wpex-surface-1',
    'wpex-text-3',
    'wpex-absolute',
    'wpex-z-999',
    'wpex-inset-0',
    'wpex-transition-all',
    'wpex-duration-300',
    'wpex-invisible',
    'wpex-opacity-0',
];

if ( get_theme_mod( 'menu_search_slide_down' ) ) {
    $class[] = '-wpex-translate-y-50';
}

$button_hover_class = '';

if ( ! get_theme_mod( 'header_background' ) ) {
    $button_hover_class = ' wpex-hover-text-1';
}

?>

<div id="searchform-header-replace" class="<?php echo esc_attr( implode( ' ', $class ) ); ?>" data-placeholder="<?php echo esc_attr( Search::get_placeholder_text() ); ?>" data-disable-autocomplete="true">
	<div class="searchform-header-replace__inner container wpex-flex wpex-justify-between wpex-items-center wpex-relative wpex-h-100">
        <?php echo Search::get_form(); ?>
        <button id="searchform-header-replace-close" class="wpex-unstyled-button wpex-transition-colors wpex-flex wpex-items-center wpex-justify-center wpex-user-select-none<?php echo esc_attr( $button_hover_class ); ?>">
            <span class="searchform-header-replace-close__icon" aria-hidden="true">&times;</span>
            <span class="screen-reader-text"><?php esc_html_e( 'Close search', 'total' ); ?></span>
        </button>
    </div>
</div>