<div x-data="HF_UPG_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>
        <p>{{texts.description_4}}</p>
        <br>
    </div>
    <table class="form-table">
        <tr>
            <th>{{texts.enable_guard_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enableGuard" :disabled="!featureEnabled" class='hfng-feature-text .title'>{{texts.enable_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_guard_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>  

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


