<div x-data="HF_DSEC_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}}</h1>
    
      <div class="wrap">    
                    

            <div class="notice notice-info" style="max-width: 800px;">
                <p>
                    <strong>{{texts.data_security_notice_title}}</strong><br>
                    {{texts.notice_line_1}}<br>
                    {{texts.notice_line_2}}<br><br>

                    <strong>{{texts.important_title}}</strong><br>
                    <div class="notice notice-warning" style="padding:10px; margin:5px 0;">
                        {{texts.important_notice}}
                    </div><br>

                    <strong>{{texts.custom_encryption_key_title}}</strong><br>
                    {{texts.custom_encryption_key_notice}}<br><br>

                    <code>define('HAPPYFENCENG_ENCRYPTION_KEY', 'your-own-secret-key-here');</code><br>
                    <code>define('HAPPYFENCENG_ENCRYPTION_SALT', 'your-own-secret-salt-here');</code>
                    <br><br>

                    {{texts.code_notice}}<br>

                    <div class="notice notice-error" style="padding:10px; margin:5px 0;">
                        {{texts.change_enc_key_warning}}
                    </div>

                    {{texts.change_enc_key_warning_2}}<br><br>

                    {{texts.change_enc_key_warning_3}}<br><br>

                    <div class="notice notice-error" style="padding:10px; margin:5px 0;">
                        {{texts.change_enc_key_warning_4}}
                    </div><br>

                    <strong>{{texts.migration_notice_title}}</strong><br>
                    <div class="notice notice-warning" style="padding:10px; margin:5px 0;">
                        {{texts.migration_notice_warning}}
                    </div>
                </p>
            </div>

             <div>
                <label>
                    <input type="checkbox" x-model="deleteTablesOnUninstall" class="hfng-enable-feature-text">{{texts.delete_tables_message}}
                </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>
