<div class="emoza-dashboard-card emoza-dashboard-card-no-box-shadow">
    <div class="emoza-dashboard-card-inner-header em-mb-10px">
        <h2 class="em-font-size-20px em-mb-10px em-mt-0"><?php echo esc_html__( 'General Settings', 'emoza-woocommerce' ); ?></h2>
        <p class="em-text-color-grey em-m-0">The general settings for the shop filters.</p>
    </div>
    <form class="em-shop-filter-settings">
        <div class="components-panel__row">
            <div class="components-base-control components-toggle-control css-1dd79d2 ej5x27r4">
                <div class="components-base-control__field css-1sf3vf3 ej5x27r3">
                    <div data-wp-c16t="true" data-wp-component="HStack" class="components-flex components-h-stack css-1aagzef e19lxcc00">
                        <span class="components-form-toggle">
                            <input class="components-form-toggle__input" id="inspector-toggle-control-0" type="checkbox" aria-describedby="inspector-toggle-control-0__help">
                            <span class="components-form-toggle__track"></span>
                            <span class="components-form-toggle__thumb"></span>
                        </span>
                        <label data-wp-c16t="true" data-wp-component="FlexBlock" for="inspector-toggle-control-0" class="components-flex-item components-flex-block components-toggle-control__label css-13y8vek e19lxcc00">Hide empty terms</label>
                    </div>
                </div>
                <p id="inspector-toggle-control-0__help" class="components-base-control__help css-1iwb6nq ej5x27r1">Hide terms that have no products.</p>
            </div>
        </div>
        <div class="components-panel__row">
            <div class="components-base-control components-toggle-control css-1dd79d2 ej5x27r4">
                <div class="components-base-control__field css-1sf3vf3 ej5x27r3">
                    <div data-wp-c16t="true" data-wp-component="HStack" class="components-flex components-h-stack css-1aagzef e19lxcc00">
                        <span class="components-form-toggle is-checked">
                            <input class="components-form-toggle__input" id="inspector-toggle-control-1" type="checkbox" aria-describedby="inspector-toggle-control-1__help" checked="">
                            <span class="components-form-toggle__track"></span>
                            <span class="components-form-toggle__thumb"></span>
                        </span>
                        <label data-wp-c16t="true" data-wp-component="FlexBlock" for="inspector-toggle-control-1" class="components-flex-item components-flex-block components-toggle-control__label css-13y8vek e19lxcc00">Display "Clear" on each filter</label>
                    </div>
                </div>
                <p id="inspector-toggle-control-1__help" class="components-base-control__help css-1iwb6nq ej5x27r1">Displays a "clear" button above each filter in the preset.</p>
            </div>
        </div>
        <div class="components-panel__row">
            <div class="components-base-control components-toggle-control css-1dd79d2 ej5x27r4">
                <div class="components-base-control__field css-1sf3vf3 ej5x27r3">
                    <div data-wp-c16t="true" data-wp-component="HStack" class="components-flex components-h-stack css-1aagzef e19lxcc00">
                        <span class="components-form-toggle is-checked">
                            <input class="components-form-toggle__input" id="inspector-toggle-control-2" type="checkbox" aria-describedby="inspector-toggle-control-2__help" checked="">
                            <span class="components-form-toggle__track"></span>
                            <span class="components-form-toggle__thumb"></span>
                        </span>
                        <label data-wp-c16t="true" data-wp-component="FlexBlock" for="inspector-toggle-control-2" class="components-flex-item components-flex-block components-toggle-control__label css-13y8vek e19lxcc00">Display active filters</label>
                    </div>
                </div>
                <p id="inspector-toggle-control-2__help" class="components-base-control__help css-1iwb6nq ej5x27r1">Displays the active filters. It shows the current filters selection and can be used to remove any active filter.</p>
            </div>
        </div>
        <div class="components-panel__row">
            <div class="components-base-control components-radio-control css-qy3gpb ej5x27r4">
                <div class="components-base-control__field css-1sf3vf3 ej5x27r3">
                    <label class="components-base-control__label css-1v57ksj ej5x27r2" for="inspector-radio-control-0">Active filters position</label>
                    <div data-wp-c16t="true" data-wp-component="VStack" class="components-flex components-h-stack components-v-stack css-1dnujmn e19lxcc00">
                        <div class="components-radio-control__option">
                            <input id="inspector-radio-control-0-0" class="components-radio-control__input" type="radio" name="inspector-radio-control-0" aria-describedby="inspector-radio-control-0__help" value="before-filters">
                            <label class="components-radio-control__label" for="inspector-radio-control-0-0">Before filters</label>
                        </div>
                        <div class="components-radio-control__option">
                            <input id="inspector-radio-control-0-1" class="components-radio-control__input" type="radio" name="inspector-radio-control-0" aria-describedby="inspector-radio-control-0__help" value="after-filters">
                            <label class="components-radio-control__label" for="inspector-radio-control-0-1">After filters</label>
                        </div>
                        <div class="components-radio-control__option">
                            <input id="inspector-radio-control-0-2" class="components-radio-control__input" type="radio" name="inspector-radio-control-0" aria-describedby="inspector-radio-control-0__help" value="above-products" checked="">
                            <label class="components-radio-control__label" for="inspector-radio-control-0-2">Above products list</label>
                        </div>
                    </div>
                </div>
                <p id="inspector-radio-control-0__help" class="components-base-control__help css-1iwb6nq ej5x27r1">The position of the active filters.</p>
            </div>
        </div>
        <div class="components-panel__row">
            <div class="components-base-control components-toggle-control css-1dd79d2 ej5x27r4">
                <div class="components-base-control__field css-1sf3vf3 ej5x27r3">
                    <div data-wp-c16t="true" data-wp-component="HStack" class="components-flex components-h-stack css-1aagzef e19lxcc00">
                        <span class="components-form-toggle is-checked">
                            <input class="components-form-toggle__input" id="inspector-toggle-control-3" type="checkbox" aria-describedby="inspector-toggle-control-3__help" checked="">
                            <span class="components-form-toggle__track"></span>
                            <span class="components-form-toggle__thumb"></span>
                        </span>
                        <label data-wp-c16t="true" data-wp-component="FlexBlock" for="inspector-toggle-control-3" class="components-flex-item components-flex-block components-toggle-control__label css-13y8vek e19lxcc00">Scroll to top on filter</label>
                    </div>
                </div>
                <p id="inspector-toggle-control-3__help" class="components-base-control__help css-1iwb6nq ej5x27r1">Scrolls to the top of the page when a filter is selected.</p>
            </div>
        </div>
    </form>
    <hr class="emoza-dashboard-divider">
    <a href="<?php echo esc_url( $this->settings['pf_upgrade_pro'] ); ?>" class="button button-primary emsf-save-settings emoza-dashboard-pro-tooltip" data-tooltip-message="<?php echo esc_attr__( 'This is only available on Emoza Pro', 'emoza-woocommerce' ); ?>" target="_blank" style="max-width: 150px;">
        Save settings
        <?php emoza_get_svg_icon( 'icon-lock-outline', true ); ?>
    </a>
</div>