<div x-data="HF_RESH_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="max-width: 800px;">    
       
        <p>{{texts.description_1}}</p>
        <p>{{texts.description_2}}</p>
        <p>{{texts.description_3}}</p>
        <br>
    </div>

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

                </td>
        </tr>

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

                </td>
        </tr>


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

                </td>
        </tr>


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

                </td>
        </tr>
     

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

                </td>
        </tr>

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

<br>
<h2>{{texts.quarantine_files_title}}</h2>

 <table class="widefat fixed striped mt-5">
        <thead>
            <tr>
                <th>{{ texts.filename_title }}</th>
                <th>{{ texts.when_title }}</th>
                <th>{{ texts.status_title }}</th>
                <th>{{ texts.hash_title }}</th>
            </tr>
        </thead>
        <tbody>
            <template x-for="m in quarantineFiles" :key="m.hash">  
                <tr>             
                    <td><code x-text="m.filename"></code></td>
                    <td><code x-text="m.when"></code></td>
                    <td><code x-text="m.status"></code></td>
                    <td><code x-text="m.hash"></code></td>
                    <template x-if="m.status === '{{ values.suspicious }}' || m.status === '{{ values.trusted }}'">
                        <button type="button" class="hfng-button" @click="doQuarantine(m.hash)" :disabled="!featureEnabled"> {{texts.quarantine_button}}</button>
                    </template>
                    <template x-if="m.status === '{{ values.suspicious }}'">
                        <button type="button" class="hfng-button" @click="doTrust(m.hash)" :disabled="!featureEnabled"> {{texts.trust_button}}</button>
                    </template>
                    <template x-if="m.status === '{{ values.suspicious }}' || m.status === '{{ values.quarantined }}'">
                        <button type="button" class="hfng-button" @click="doDelete(m.hash)" :disabled="!featureEnabled"> {{texts.delete_button}}</button>
                    </template>
                </tr>
            </template>

            <template x-if="quarantineFiles.length === 0">
                <tr>
                    <td colspan="2">{{ texts.no_data_title }}</td>
                </tr>
            </template>
        </tbody>
    </table>

    <hr class="hfng-divider" />

    
</div>

