<div x-data="HF_SUSQ_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>
        <br>
    </div>

    <p style="display: flex; gap: 10px;">
        <button type="button" class="button" x-on:click="selectAll" style="background-color: #28a745; color: #fff; border-color: #28a745;">
            {{texts.select_all}}
        </button>
        <button type="button" class="button" x-on:click="unselectAll" style="background-color: #dc3545; color: #fff; border-color: #dc3545;">
            {{texts.unselect_all}}
        </button>
    </p>

    <div class="notice notice-info" style="padding:15px; margin-bottom:20px;">
                <p><strong>{{texts.important}}</strong></p>
                <p class="description" style="color:#666; font-style:italic; margin-bottom:1em;">
                    {{texts.enabled_patterns_info}}
                </p>
    </div>
                  
    <table class="form-table">
    <table class="widefat fixed striped mt-5">
        <thead>
        </thead>
        <tbody>
            <template x-for="(value, index) in patternsModel" :key="index">
                <tr>
                    <td>
                        <label>
                            <input type="checkbox"
                                x-model="patternsModel[index]"
                                :value="true"
                                :checked="value === true" /> 
                            <span x-text="index"></span> 
                        </label>
                    </td>
                </tr>
            </template>
        </tbody>
    </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>


