<div x-data="HF_MFA_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.warning_MFA}}</p>
        <p>{{texts.warning_MFA_line_1}}</p>
        <p>{{texts.warning_MFA_line_2|raw}}</p>             
    </div>

    <h2>{{texts.enable_mfa_title}}</h2>
    <div>
        <label>
            <input type="checkbox" x-model="enableMFA" :disabled="!featureEnabled" class="hfng-enable-feature-text">{{texts.enable_mfa_description}}            
            <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.enable_mfa_tooltip}}                                    
                        </span>
            </span>
        </label>
    </div>

    <h2>{{texts.redirect_mfa_title}}
    <span class="hfng-tooltip-wrap">
        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
            <span class="hfng-tooltip-text">
                {{texts.redirect_mfa_tooltip}}                                    
            </span>
        </span>
    </h2>
    <div>
        <select name="happyfenceng_redirect_page" class="regular-text" :disabled="!featureEnabled">
            <!-- Opzione predefinita -->
            <option value="">{{texts.default_wordpress}}</option>

            <!-- Opzioni generate dinamicamente -->
            <template x-for="page in allPages" :key="page.post_name">
                <option :value="page.post_name"
                        :selected="savedRedirect === page.post_name">
                    <span x-text="page.post_title"></span>
                </option>
            </template>
        </select>
    </div>

    <br>
    <h2>{{texts.admin_options_title}}</h2>
    <div>
        <label>
            <input type="checkbox" x-model="mfaForceAdmin" :disabled="!featureEnabled" class="hfng-enable-feature-text">{{texts.require_admin_activate_mfa_description}}            
            <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.require_admin_activate_mfa_tooltip}}                                    
                        </span>
            </span>
        </label>
    </div>
    <div>
        <label>
            <input type="checkbox" x-model="mfaDisableAdmin" :disabled="!featureEnabled" class="hfng-enable-feature-text">{{texts.disable_mfa_for_admins_description}}            
            <span class="hfng-tooltip-wrap">
                        <span class="dashicons dashicons-editor-help hfng-tooltip-icon"></span>
                        <span class="hfng-tooltip-text">
                            {{texts.disable_mfa_for_admins_tooltip}}                                    
                        </span>
            </span>
        </label>
    </div>

    <label>
        <input type="checkbox" x-model="showTable">
        {{texts.show_management_table}}
    </label>
    <br>
    <!-- Tabella degli utenti, visibile solo se "showTable" è true -->
    <div x-show="showTable">
    <h2>{{texts.mfa_user_management_title}}</h2>

        <table class="widefat fixed striped users">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>MFA Status</th>
                    <th>MFA Method</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <template x-for="user in users" :key="user.ID">
                    <tr>
                        <td x-text="user.username"></td>
                        <td x-text="user.email"></td>
                        <td x-text="user.role"></td>
                        <td x-text="user.mfa_status"></td>
                        <td x-text="user.mfa_method"></td>
                        <td>
                            <template x-if="user.mfa_status === '✅ Enabled'">
                                <button @click="resetMfa(user.ID)">🔁 Disable MFA</button>
                            </template>
                        </td>
                    </tr>
                </template>
                <template x-if="!users.length">
                    <tr>
                        <td colspan="6">No users found</td>
                    </tr>
                </template>
            </tbody>
        </table>
    </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>

