<div x-data="HF_IPBL_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="margin-top: 15px;">
        <p>{{texts.warning_ipbl_external_url}}</p>
        <p>{{texts.warning_ipbl_external_url_line_1}}</p>
        <p>{{texts.warning_ipbl_external_url_line_2}}</p>        
    </div>

    <div class="notice notice-info" style="margin-top: 15px;">
        <p>{{texts.warning_ipbl}}</p>
        <p>{{texts.warning_ipbl_line_1}}</p>
        <p>{{texts.warning_ipbl_line_2}}</p>
        <p><strong>{{texts.important}}</strong>{{texts.important_line_0}}</p>
        <p>{{texts.important_line_1}}</p>
        <p><code>{{texts.important_line_2|json_encode|raw}}</code></p>        
    </div>

 <table class="form-table">
    <tr>    
       <th>{{texts.enable_ipbl_vpn_proton_guard_title}}</th>      
       <td>
            <label>        
                <input type="checkbox" x-model="enableIPBLProtonGuard" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.enable_ipbl_vpn_proton_guard_description}}
            </label>                        
           <span class="hfng-tooltip-wrap">
                <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                <span class="hfng-tooltip-text">
                    {{texts.enable_ipbl_vpn_proton_guard_tooltip}}                                    
                </span>
            </span>
        </td>
    </tr>
    <tr>    
       <th>{{texts.enable_ipbl_vpn_tor_guard_title}}</th>
       <td>
            <label>        
                <input type="checkbox" x-model="enableIPBLTorGuard" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.enable_ipbl_vpn_tor_guard_description}}
            </label>                        
            <span class="hfng-tooltip-wrap">
                <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                <span class="hfng-tooltip-text">
                    {{texts.enable_ipbl_vpn_tor_guard_tooltip}}                                    
                </span>
            </span>
        </td>
    </tr>
    <tr>
        <th>{{texts.enable_ipbl_guard_title}}</th>
        <td>
            <label>
                <input type="checkbox" x-model="enableGuard" :disabled="!featureEnabled" class="hfng-enable-feature-text">{{texts.enable_ipbl_guard_description}}
            </label>
            <span class="hfng-tooltip-wrap">
                <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                <span class="hfng-tooltip-text">
                    {{texts.enable_ipbl_guard_tooltip}}                                    
                </span>
            </span>
        </td>
    </tr>
    </table>

    <br>

    <div>
        <h2>{{texts.blacklist_label}}<h2>
        <textarea x-model="blacklistIPs" class="hfng-textarea" :disabled="!featureEnabled"></textarea>
        <br>
        <p class="description"> {{texts.blacklist_desc}}</p>
    </div>

    <br>
    <div>
        <button type="button" class="hfng-button" @click="checkMyIP" :disabled="!featureEnabled"> {{texts.check_my_ip}}</button>
        <button type="button" class="hfng-button" @click="saveSettings" :disabled="!featureEnabled"> {{texts.save_settings}}</button>
    </div>
    <div x-show="myIPResult" 
            x-text="myIPResult" 
            :class="myIPColor" 
            style="margin-left:10px; display:inline-block;"
            x-transition.opacity.duration.300ms>
    </div>

    <hr class="hfng-divider" />

    
</div>

