<div x-data="HF_PF_APP" class="wrap">
    <div class="hfng-logo-wrap">
        <img src="{{ links.happyfenceng_logo_url }}"
            alt="HappyFenceNG Logo"
            class="hfng-logo">
        <p class="hfng-logo-info">
            {{ texts.happyfenceng_release_name }} &nbsp; | &nbsp;
            {{ texts.happyfenceng_version }} &nbsp; | &nbsp;
            {{ texts.happyfenceng_build }}
        </p>
    </div>

    <hr class="hfng-divider" />

    <h1>{{texts.title}}   
        <p x-show="!featureEnabled" class="hfng-feature-disabled">                
                    ( {{texts.feature_requires}} )
        </p>
    </h1> 

    <div class="notice notice-info" style="padding:15px; margin-bottom:20px;">
                <p>{{texts.description}}</p>
                <p>{{texts.description_1}}</p>
                <p>{{texts.description_2}}</p>
                <p>{{texts.description_3}}</p>
                <p>{{texts.description_4}}</p>
                </p>
    </div>
                
    <table class="form-table">
        <tr>
            <th>{{texts.filter_post_content}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enablePostFilter" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.filter_post_content_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.filter_post_content_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
        <tr>
            <th>{{texts.filter_option_update}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enableUpdateOptionFilter" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.filter_option_update_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.filter_option_update_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
         <tr>
            <th>{{texts.enable_rest_pre_dispatch_filter}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enableRestPreDispatchFilter" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.enable_rest_pre_dispatch_filter_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.enable_rest_pre_dispatch_filter_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
    </table>

    
    <br>
    <div>

        <button type="button" class="hfng-button" @click="saveSettings" :disabled="!featureEnabled"> {{texts.save_settings}}</button>
    </div>    
    <div x-show="myResult" 
            x-text="myResult" 
            :class="myColor" 
            style="margin-left:10px; display:inline-block;"
            x-transition.opacity.duration.300ms>
    </div>

    <hr class="hfng-divider" />

    
</div>

