<div x-data="HF_PRE_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|raw}}   
        <p x-show="!featureEnabled" class="hfng-feature-disabled">                
                    ( {{texts.feature_requires}} )
        </p>
    </h1> 

                  
    <table class="form-table">
        <tr>
            <th>{{texts.block_rest_guests_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="blockRestGuests" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.block_rest_guests_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.block_rest_guests_tooltip}}                                    
                        </span>
                    </span>

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

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

                </td>
        </tr>
       
    

    <h2>{{texts.advanced_protection}}</h2>
    
         <tr>
            <th>{{texts.login_obfuscation_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="loginObfuscation" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.login_obfuscation_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.login_obfuscation_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>

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

                </td>
        </tr>

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

                </td>
        </tr>
         <tr>
            <th>{{texts.disable_oembed_discovery_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="disableOmbedDiscovery" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.disable_oembed_discovery_description|raw}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.disable_oembed_discovery_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>

         <tr>
            <th>{{texts.block_xmlrpc_pingback_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="blockXmlRpcPingBack" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.block_xmlrpc_pingback_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.block_xmlrpc_pingback_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>

