<div x-data="HF_CFC_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_cfc}}</p>
        <p>{{texts.warning_cfc_line_1}}</p>
        <p>{{texts.warning_cfc_line_2}}</p>
    </div>

    <div class="notice notice-warning" style="margin-top: 15px;">
        <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>

    <div class="notice notice-info" style="margin-top: 15px;">
        <p>{{texts.geoip_cfc}}</p>
        <p>{{texts.geoip_cfc_line_1}}</p>
        <p>{{texts.geoip_cfc_line_2}}</p>
    </div>

    <div>
        <label>        
            <input type="checkbox" x-model="enableGuard" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.enable_guard}}
        </label>
    </div>

    <div>
        <label>
        <input type="checkbox" x-model="checkAdminOnly" :disabled="!featureEnabled">
        {{texts.check_admin_only}}                        
            <p class="description"> {{texts.check_admin_only_desc}}</p>        
        </label>
    </div>

    <div>
        <label>
             {{texts.allowed_ips_label}}
            <textarea x-model="allowed_ips" class="hfng-textarea" :disabled="!featureEnabled"></textarea>
            <p class="description"> {{texts.allowed_ips_desc}}</p>            
        </label>
    </div>
    <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>
    
<hr class="hfng-divider" />
    
</div>


