<div x-data="HF_INTE_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.description}}</p>
        <p>{{texts.description_line_1}}</p>
        <p>{{texts.description_line_2}}</p>     
    </div>

    <div class="notice notice-info" style="margin-top: 15px;" x-show="!isApache">
        <p>{{texts.web_server}}</p>
        <p>{{texts.description_not_apache}}</p>
        <p>{{texts.description_not_apache_2}}</p>        
    </div>



    <div x-show="isApache">
        <div>
            <label>
                <input type="checkbox" x-model="enableHtaccessProtection" :disabled="!featureEnabled" class="hfng-enable-feature-text">{{texts.enable_htaccess_protection}}
            </label>
        </div>
        <div>
        <p>{{texts.current_htaccess_title}}</p>
        <textarea id="textarea_current_htaccess" class="hfng-textarea" name="currenthtaccess" rows="20" cols="100" readonly>{{texts.current_htaccess|raw}}</textarea>
        <p>{{texts.proposed_patch_title}}</p>
        <textarea id="textarea_patched_htaccess" class="hfng-textarea" name="patchedhtaccess" rows="20" cols="100" readonly>{{texts.proposed_patch|raw}}</textarea>
        </div>

        <div class="button-container">
            <button type="button" class="hfng-button" @click="applyPatch" :disabled="!featureEnabled">{{texts.apply_patch}}</button>    
            <button type="button" class="hfng-button" @click="restoreBackup" :disabled="!featureEnabled">{{texts.restore_patch}}</button>    
        </div>

        


        <div x-show="htAccessDoesNotMatch" x-text="explainButton" x-transition.opacity.duration.300ms>            
            <button type="button" class="hfng-button" @click="resetMd5" :disabled="!featureEnabled"> {{texts.reset_md5}}</button>    
        </div>
        
        <div x-show="mySaveResult" 
            x-text="mySaveResult" 
            :class="mySaveResultColor" 
            style="margin-left:10px; display:inline-block;"
            x-transition.opacity.duration.300ms>
        </div>
    </div>
    <br>


   
  

    <br>
    <div x-show="isApache">
        <div>       
            <button type="button" class="hfng-button" @click="saveSettings" :disabled="!featureEnabled"> {{texts.save_settings}}</button>
        </div>
        <div x-show="mySaveResult" 
                x-text="mySaveResult" 
                :class="mySaveResultColor" 
                style="margin-left:10px; display:inline-block;"
                x-transition.opacity.duration.300ms>
        </div>
    </div>

    <hr class="hfng-divider" />

    
</div>

