<div x-data="HF_PRI_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-warning" x-show="privacyNoticeWarnings" style="margin-top: 15px;">        
        <p>{{texts.privacy_warning}}</p>        
    </div>

    <div class="notice notice-warning" x-show="cookieNoticeWarnings" style="margin-top: 15px;">        
        <p>{{texts.cookie_warning}}</p>        
    </div>

    <div class="notice notice-warning" x-show="termsNoticeWarnings" style="margin-top: 15px;">        
        <p>{{texts.terms_warning}}</p>        
    </div>

   

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

                </td>
        </tr>
        <tr>
            <th>{{texts.top_banner_text_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="topBannerText" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.top_banner_text_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.top_banner_text_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
        <tr>
            <th>{{texts.color_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="colorModel" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.color_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.color_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
        <tr>
            <th>{{texts.text_color_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="textColorModel" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.text_color_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.text_color_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
         
        <tr>
            <th>{{texts.enable_policy_banner_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enablePolicyBanner" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.enable_policy_banner_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.enable_policy_banner_tooltip}}                                    
                        </span>
                    </span>
                </td>
        </tr>
         <tr x-show="!enablePolicyBanner" x-transition.opacity.duration.500ms>
            <th>{{texts.privacy_url_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="privacyUrl" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.privacy_url_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.privacy_url_tooltip}}                                    
                        </span>
                    </span>
                </td>
        </tr> 
        
       
        <tr>
            <th>{{texts.enable_cookie_banner_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enableCookieBanner" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.enable_cookie_banner_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.enable_cookie_banner_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
          <tr x-show="!enableCookieBanner" x-transition.opacity.duration.500ms>
            <th>{{texts.cookie_url_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="cookieUrl" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.cookie_url_description|raw}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.cookie_url_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>


        <tr>
            <th>{{texts.enable_terms_banner_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="enableTermsBanner" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.enable_terms_banner_description|raw}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.enable_terms_banner_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>
        <tr x-show="!enableTermsBanner" x-transition.opacity.duration.500ms>
            <th>{{texts.terms_url_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="termsUrl" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.terms_url_description|raw}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.terms_url_tooltip}}                                    
                        </span>
                    </span>
                </td>
        </tr>
         
        <tr>
            <th>{{texts.show_manage_link_title}}</th>
                <td>                
                    <label>        
                        <input type="checkbox" x-model="showManageLink" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.show_manage_link_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.show_manage_link_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>        
        <tr>
            <th>{{texts.company_name_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="companyName" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.company_name_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.company_name_tooltip}}                                    
                        </span>
                    </span>

                </td>
        </tr>        
        <tr>
            <th>{{texts.owner_email_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="ownerEmail" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.owner_email_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.owner_email_tooltip}}                                    
                        </span>
                    </span>
                </td>
        </tr>        
        <tr>
            <th>{{texts.treatment_location_title}}</th>
                <td>                
                    <label>        
                        <input type="text" x-model="treatmentLocation" :disabled="!featureEnabled" class='hfng-feature-text .title'> {{texts.treatment_location_description}}
                    </label>                        
                    <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.treatment_location_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>

    <hr class="hfng-divider" />

    
</div>

