<div x-data="HF_GEO_APP">
    <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><strong>{{texts.note_title}}</strong></p>
        <p>{{texts.note_line_1}}</p>
        <p>{{texts.note_line_2}}</p>
        <p>{{texts.note_line_3}}</p>
        <p>{{texts.note_line_4}}</p>
        <p>{{texts.note_line_5}}</p>
        <p>{{texts.note_line_6}}</p>
        <p>{{texts.note_line_7}}</p>
        <p>{{texts.note_line_8}}</p>
        <p>{{texts.note_line_9}}</p>
        <p>{{texts.note_line_10}}</p>
        <p>{{texts.note_line_11}}</p>
        <p>{{texts.note_line_12}}</p>
        <p>{{texts.note_line_13}}</p>
    </div>

    <div>
        <label>
                <input type="checkbox" x-model="enableGeoIP" class="hfng-enable-feature-text">{{texts.enable_geoip}}
        </label>
    </div> 

    
   

    <div x-show="enableGeoIP"  x-transition.opacity.duration.300ms x-cloak>
        <hr class="hfng-divider-small" />
        <div>
            <h2>{{texts.select_provider}}</h2>   
            <select x-model="geoIpProvider" class="hfng-select">
                <option value="cloudflare">Cloudflare Headers</option>
                <option value="ipinfo">IPinfo.io</option>
                <option value="ipstack">Ipstack</option>
                <option value="freegeoip">FreeGeoIP</option>
            </select>
        </div>
        <div x-show="geoIpProvider!='cloudflare'">
        <h2>{{texts.api_key_title}}</h2>  
        <label>        
            <input type="text" x-model="geoIPApiKey" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.api_key_description}}
                </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.api_key_tooltip}}                                    
                        </span>
                </span>
        </div>        
        <div>
            <h2>{{texts.blocked_countries_title}}</h2>  
            <p>{{texts.blocked_countries_description}}</p>   
            <select 
                name="geoip_blocked_countries[]" 
                multiple 
                size="10" 
                style="min-width:250px;" 
                x-model="geoIPBlockedCountries"
            >
                <template x-for="(name, code) in allCountries" :key="code">
                    <option :value="code" 
                            :selected="geoIPBlockedCountries.includes(code)"
                    >
                        <span x-text="`${name} (${code})`"></span>
                    </option>
                </template>
            </select>
        </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>
        
        
    </div>
    <hr class="hfng-divider" />
</div>
