<div x-data="HF_FUN_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>

    <h2>{{texts.sub_title_basic}}</h2>
    <table class="form-table">
        <tr>
            <th>{{texts.block_xml_rpc_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="blockXmlRpc" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.block_xml_rpc_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.block_xml_rpc_tooltip}}                                    
                        </span>
                    </span>

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

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

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

    
    <h2>{{texts.extended_protection_title}}</h2>
    <table class="form-table">
        <tr>
            <th>{{texts.enable_custom_login_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enableCustomLogin" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.enable_custom_login_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.enable_custom_login_tooltip}}                                    
                        </span>
                    </span>

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

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

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

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

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


    <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>


