<div x-data="HF_AGG_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_filesystem_sec}}</h2>
    <table class="form-table">
        <tr>
            <th>{{texts.enable_filesystem_scan_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enableFileSystemScan" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.enable_filesystem_scan_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.enable_filesystem_scan_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
        <tr>
            <th>{{texts.disable_builtin_file_edit_title}}</th>
            <td>                           
                <label>
                    <input type="checkbox" x-model="disableFileEdit" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.disable_builtin_file_edit_description}}                    
                </label>                       
                <span class="hfng-tooltip-wrap">
                    <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                    <span class="hfng-tooltip-text">
                        {{texts.disable_builtin_file_edit_tooltip_1}} 
                        {{texts.disable_builtin_file_edit_tooltip_2}}                                    
                    </span>
                </span>
            </td>
        </tr>
        <tr>
            <th>{{texts.monitor_unused_plugin_title}}</th>
            <td>                           
                <label>
                    <input type="checkbox" x-model="enablePluginMonitoring" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.monitor_unused_plugin_description}}                    
                </label>                       
                <span class="hfng-tooltip-wrap">
                    <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                    <span class="hfng-tooltip-text">
                        {{texts.monitor_unused_plugin_tooltip}}                        
                    </span>
                </span>
            </td>
        </tr>
    </table>

    
    <h2>{{texts.sub_title_rate_limiting}}</h2>
    <table class="form-table">
        <tr>
            <th>{{texts.enable_login_rate_limit_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enableLoginRateLimit" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.enable_login_rate_limit_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.enable_login_rate_limit_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
   
        <tr>
            <th>{{texts.login_rate_interval_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="loginRateInterval" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.login_rate_interval_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.login_rate_interval_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
   
        <tr>
            <th>{{texts.login_rate_max_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="loginRateMax" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.login_rate_max_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.login_rate_max_tooltip}}                                    
                        </span>
                    </span>

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


    <h2>{{texts.sub_title_robots_txt}}</h2>
    <table class="form-table">
        <tr>
            <th>{{texts.auto_patch_robots_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="autoPatchRobots" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.auto_patch_robots_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.auto_patch_robots_tooltip}}                                    
                        </span>
                    </span>

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


    <h2>{{texts.sub_title_light_uri_filters}}</h2>
    <div class="notice notice-info" style="padding:15px; margin-bottom:20px;">
                <p><strong>{{texts.important}}</strong></p>
                <p class="description" style="color:#666; font-style:italic; margin-bottom:1em;">
                    {{texts.enabled_uri_patterns_info}}
                </p>
    </div>
    
    <table class="form-table hfng-uri-patterns-table">
        <tr>
            <th>{{texts.enabled_uri_patterns_title}}</th>
            <td>
                <template x-for="key in uriPatterns" :key="key">
                    <label class="hfng-uri-pattern-label">
                        <input type="checkbox"
                            :value="key"
                            x-model="enabledURIPatterns"
                            :disabled="!featureEnabled">
                        <span x-text="key"></span>
                    </label>
                </template>             
            </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>


