<div x-data="HF_BUN_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.autoremove_dangerous_files_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="autoremoveDangerousFiles" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.autoremove_dangerous_files_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.autoremove_dangerous_files_tooltip}}                                    
                        </span>
                    </span>

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

   
    <h2>{{texts.sub_title_api_rest}}</h2>
    <table class="form-table">
        <tr>
            <th>{{texts.select_endpoints_to_block_title}}</th>
            <td>                
                    <label>        
                        <input type="checkbox" x-model="enableRestBlocking" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.select_endpoints_to_block_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.select_endpoints_to_block_tooltip}}                         
                        </span>
                    </span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="hfng-rest-endpoints-cell">
                 <template x-for="path in allRestEndpoints" >
                        <label style="display:block;">
                                <input type="checkbox"
                                       :value="path"
                                       :disabled="!featureEnabled"
                                       x-model="blockedEndpoints"
                                       >
                        <span x-text="path"></span>
                </template>             
            </td>
        </tr>
    </table>

    <h2>{{texts.sub_title_user_enum}}</h2>
    <table class="form-table">
        <tr>
            <th>{{texts.block_user_enum_title}}</th>
            <td>                           
                <label>
                    <input type="checkbox" x-model="enableBlockUserEnum" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.block_user_enum_description}}                    
                </label>                       
                <span class="hfng-tooltip-wrap">
                    <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                    <span class="hfng-tooltip-text">
                        {{texts.block_user_enum_tooltip}}                        
                    </span>
                </span>
            </td>
        </tr>
    </table>

   
    <h2>{{texts.sub_title_404}}</h2>
    <table class="form-table">
        <tr>
            <th>{{texts.enable_404_trap_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enable404Trap" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.enable_404_trap_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.enable_404_trap_tooltip}}                                    
                        </span>
                    </span>

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

    <table class="form-table">
        <tr>
            <th>{{texts.mode_404_trap_title}}</th>
                <td>                
                    <label>
                        <select name="trap_404_mode" x-model="trap404Mode"  :disabled="!featureEnabled">
                            <option value="stealth" :selected="trap404Mode === 'stealth'">Stealth</option>
                            <option value="template" :selected="trap404Mode === 'template'">Template</option>
                            <option value="shield_black" :selected="trap404Mode === 'shield_black'">Shield Black</option>
                        </select>
                    </label>
                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.mode_404_trap_tooltip}}                                    
                        </span>
                    </span>

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


    <table class="form-table">
        <tr>
            <th>{{texts.max_words_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="trap404MaxWords" :disabled="!featureEnabled" class='hfng-feature-text .title' min="10" max="1000">{{texts.max_words_description}} 
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.max_words_tooltip}}                                    
                        </span>
                    </span>

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

    <h2>{{texts.template_page_title}}</h2>
    <table class="form-table hfng-template-page-table">
        <tr>
            <th>{{ texts.template_page_description }}</th>
            <td>
                <div class="hfng-select-wrapper">
                    <select name="trap_404_template" x-model="selectedPageId"  :disabled="!featureEnabled">
                        <template x-for="page in pages" :key="page.ID">
                            <option :value="page.ID" x-text="page.post_title"></option>
                        </template>
                    </select>
                </div>
            </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>


