<?php
$settings = $this->get_settings_for_display();

extract( wp_parse_args( $settings, [
    'style' => 'minimal-inline',
    'placeholder' => 'Type & hit enter..',
    'input_width_type' => 'full',
    'form_align' => 'right',
    'form_showup_event' => 'hover',
]) );

$cl = [ 'el-searchform' ];

/* style
--------------------------- */
if ( ! in_array( $style, [ 'classic', 'minimal-fly' ] ) ) {
    $style = 'minimal-inline';
}
$cl[] = 'searchform-' . $style;

if ( 'classic' == $style && 'custom' == $input_width_type ) {
    $cl[] = 'custom-sf-width';
}

if ( 'minimal-inline' == $style ) {
    
    /* inline form align
    --------------------------- */
    if ( 'left' != $form_align ) {
        $form_align = 'right';
    }
    $cl[] = 'form-align-' . $form_align;
    
    /* showup event
    --------------------------- */
    if ( 'click' != $form_showup_event ) {
        $form_showup_event = 'hover';
    }
    $cl[] = 'form-showup-' . $form_showup_event;
    
}

/* final
--------------------------- */
$cl = join( ' ', $cl );
?>

<div class="<?php echo esc_attr( $cl ); ?>">
    
    <?php 
    /* -------------------- classic */
    if ( 'classic' == $style ) { ?>
    
    <div class="classic-searchform">
    
        <form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) );?>" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction" class="form">

            <input type="text" name="s" class="classic-search-field search-field" value="<?php echo get_search_query();?>" placeholder="<?php echo esc_html( $placeholder ); ?>" />

            <button class="search-hit-btn" role="button" title="<?php echo esc_html__( 'Go', 'wi' ); ?>">
                <i class="fa fa-search"></i>
            </button>

        </form><!-- .form -->

    </div><!-- .classic-searchform -->
    
    <?php } elseif ( 'minimal-inline' == $style ) {
        /* -------------------- inline */
    ?>
    
    <button class="search-hit-btn" role="button" title="<?php echo esc_html__( 'Go', 'wi' ); ?>">
        <i class="fa fa-search"></i>
    </button>
    
    <div class="searchform-minimal-inline-dropdown">
    
        <form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) );?>" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction" class="form">

            <input type="text" name="s" class="classic-search-field search-field" value="<?php echo get_search_query();?>" placeholder="<?php echo esc_html( $placeholder ); ?>" />

            <button class="submit" role="button" title="<?php echo esc_html__( 'Go', 'wi' ); ?>">
                <i class="fa fa-search"></i>
            </button>

        </form><!-- .form -->
    
    </div><!-- .minimal-inline-search-form -->

    <?php } ?>
    
</div><!-- .el-search -->