<?php
$params[ 'style' ] = array(
    'type' => 'select',
    'options' => [
        'classic' => 'Classic Form',
        'minimal-inline' => 'Search Icon - Dropdown',
    ],
    'std' => 'minimal-inline',
    'title' => 'Search Form Style',
    
    'section' => 'general',
    'section_title' => 'General',
);

$params[ 'placeholder' ] = array(
    'type' => 'text',
    'std' => 'Type & hit enter..',
    'title' => 'Search placeholder text',
);

$params[ 'form_align' ] = array(
    'type' => 'select',
    'options' => [
        'left' => 'Left',
        'right' => 'Right',
    ],
    'std' => 'right',
    'title' => 'Form align',
    'condition' => [
        'style[value]' => 'minimal-inline',
    ]
);

$params[ 'form_showup_event' ] = array(
    'type' => 'select',
    'options' => [
        'hover' => 'Hover',
        'click' => 'Click',
    ],
    'std' => 'hover',
    'title' => 'Form showup event',
    'condition' => [
        'style[value]' => 'minimal-inline',
    ]
);

$params[ 'form_inline_width' ] = array(
    'type' => 'size',
    'title' => 'Form width',
    'condition' => [
        'style[value]' => 'minimal-inline',
    ],
    
    'selectors' => [
        '{{WRAPPER}} .searchform-minimal-inline-dropdown' => 'width:{{SIZE}}{{UNIT}};'
    ],
    'px_min' => 100,
    'px_max' => 700,
    'std_unit' => 'px',
    'std_size' => 300,
);

$params[ 'form_padding' ] = array(
    'type' => 'size',
    'title' => 'Form padding',
    'condition' => [
        'style[value]' => 'minimal-inline',
    ],
    
    'selectors' => [
        '{{WRAPPER}} .searchform-minimal-inline-dropdown' => 'padding:{{SIZE}}{{UNIT}};'
    ],
    'px_min' => 0,
    'px_max' => 50,
    'std_unit' => 'px',
    'std_size' => 10,
);

$params[ 'form_inline_button_background' ] = array(
    'type' => 'color',
    'title' => 'Form button background',
    'condition' => [
        'style[value]' => 'minimal-inline',
    ],
    'std' => '#000',
    'selectors' => [
        '{{WRAPPER}} .searchform-minimal-inline-dropdown .submit' => 'background:{{VALUE}};'
    ],
);

$params[ 'form_inline_button_color' ] = array(
    'type' => 'color',
    'title' => 'Form button color',
    'condition' => [
        'style[value]' => 'minimal-inline',
    ],
    'std' => '#fff',
    'selectors' => [
        '{{WRAPPER}} .searchform-minimal-inline-dropdown .submit' => 'color:{{VALUE}};'
    ],
);

/* INPUT
------------------------------------------------------------------------ */
$input = '{{WRAPPER}} .el-searchform .search-field';
$input_focus = '{{WRAPPER}} .el-searchform .search-field:focus';

$params[ 'input_typography' ] = array(
    'type' => 'typography',
    'title' => 'Search field typography',
    'selector' => $input,
    
    // style
    'section' => 'input',
    'section_title' => 'Search field style',
    'section_tab' => 'style',
);

$params[ 'input_width_type' ] = array(
    'type' => 'select',
    'title' => 'Search field width',
    'options' => [
        'full' => 'Fullwidth',
        'custom' => 'Custom width',
    ],
    'std' => 'full',
    'condition' => [
        'style[value]' => 'classic',
    ]
);

$params[ 'input_width' ] = array(
    'type' => 'size',
    'title' => 'Search field custom width',
    
    'selectors' => [
        '{{WRAPPER}} .custom-sf-width .search-field' => 'width:{{SIZE}}{{UNIT}};'
    ],
    'px_min' => 100,
    'px_max' => 700,
    'std_unit' => 'px',
    'std_size' => 300,
    
    'condition' => [
        'style[value]' => 'classic',
        'input_width_type[value]' => 'custom',
    ],
);

$params[ 'input_height' ] = array(
    'type' => 'size',
    'title' => 'Search field height',
    
    'px_min' => 10,
    'px_max' => 100,
    
    'std_unit' => 'px',
    'std_size' => 40,
    
    'selectors' => [
        $input => 'height: {{SIZE}}{{UNIT}};',
        '{{WRAPPER}} .searchform-minimal-inline-dropdown .submit' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};line-height:{{SIZE}}{{UNIT}};',
    ],
);

$params[ 'input_color' ] = array(
    'type' => 'color',
    'title' => 'Search field text color',
    'selectors' => [
        $input => 'color: {{VALUE}};',
    ],
    
    // tab
    'tab' => 'input_normal',
    'tab_title' => 'Normal',
    'tabs'     => 'input',
);

$params[ 'input_bg' ] = array(
    'type' => 'color',
    'title' => 'Input background color',
    'selectors' => [
        $input => 'background-color: {{VALUE}};',
    ],
);

$params[ 'input_border_color' ] = array(
    'type' => 'color',
    'title' => 'Search field border color',
    'selectors' => [
        $input => 'border-color: {{VALUE}};',
    ],
);

$params[ 'input_border_width' ] = array(
    'type' => 'size',
    'title' => 'Search field border size',
    'px_min' => 0,
    'px_max' => 10,
    
    'std_unit' => 'px',
    'std_size' => 1,
    
    'selectors' => [
        $input => 'border-width: {{SIZE}}{{UNIT}};',
    ],
);

$params[ 'input_border_radius' ] = array(
    'type' => 'size',
    'title' => 'Search field border radius',
    'px_min' => 0,
    'px_max' => 50,
    
    'std_unit' => 'px',
    'std_size' => 0,
    
    'selectors' => [
        $input => 'border-radius: {{SIZE}}{{UNIT}};',
        '{{WRAPPER}} .searchform-minimal-inline-dropdown .submit' => 'border-radius:0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}} 0;',
    ],
);

$params[] = [
    'type' => 'tab_close',
];

$params[ 'input_fucus_color' ] = array(
    'type' => 'color',
    'title' => 'Search field focus text color',
    'selectors' => [
        $input_focus => 'color: {{VALUE}};',
    ],
    
    // tab
    'tab' => 'input_focus',
    'tab_title' => 'Focus',
);

$params[ 'input_focus_bg' ] = array(
    'type' => 'color',
    'title' => 'Search field focus background color',
    'selectors' => [
        $input_focus => 'background-color: {{VALUE}};',
    ],
);

$params[ 'input_focus_border_color' ] = array(
    'type' => 'color',
    'title' => 'Search field focus border color',
    'selectors' => [
        $input_focus => 'border-color: {{VALUE}};',
    ],
);

$params[] = [
    'type' => 'tab_close',
];

$params[] = [
    'type' => 'tabs_close',
];

/* BUTTON
------------------------------------------------------------------------ */
$params[ 'btn_size' ] = array(
    'type' => 'size',
    'title' => 'Button font size',
    'selectors' => [
        '{{WRAPPER}} .search-hit-btn' => 'font-size:{{SIZE}}{{UNIT}}'
    ],
    
    'std_unit' => 'px',
    'std_size' => 16,
    'px_max' => 44,
    'px_min' => 6,
    
    // style
    'section' => 'button',
    'section_title' => 'Button Style',
    'section_tab' => 'style',
);

$params[ 'btn_container_size' ] = array(
    'type' => 'size',
    'title' => 'Button size',
    'selectors' => [
        '{{WRAPPER}} .search-hit-btn' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};line-height:{{SIZE}}{{UNIT}};'
    ],
    
    'std_unit' => 'px',
    'std_size' => 44,
    'px_max' => 60,
    'px_min' => 16,
);

$params[ 'btn_color' ] = array(
    'type' => 'color',
    'title' => 'Button color',
    'selectors' => [
        '{{WRAPPER}} .search-hit-btn' => 'color:{{VALUE}};',
    ],
);

$params[ 'btn_hover_color' ] = array(
    'type' => 'color',
    'title' => 'Button hover color',
    'selectors' => [
        '{{WRAPPER}} .search-hit-btn:hover' => 'color:{{VALUE}};',
    ],
);