<div x-data="HF_DASH_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_params}}</h1>
   <div>
        <div x-show="!showWarning">
            <p><strong>ℹ️ {{texts.info}}: </strong>{{texts.wp_params_msg_line_1}}</p>
        </div>                

        <div x-show="showWarning">
            <p><strong>🔔 Notice: </strong>{{texts.wp_params_msg_line_1}}</p>
            <p>{{texts.wp_params_msg_line_2}}</p>            
            <p>{{texts.wp_params_msg_line_3}}</p>
        </div>                
    </div>

    <div>
        <p>{{texts.current_encryption}}</p>
    </div>

    <div x-show="debugActive">
        <p><strong>⚠️ {{texts.warning}}: </strong>{{texts.debug_active_warning}}</p>
    </div>
    <div x-show="debugActiveLog">
        <p><strong>⚠️ {{texts.warning}}: </strong>{{texts.debug_active_log_warning}}</p>
    </div>
    <div x-show="debugActiveDisplay">
        <p><strong>⚠️ {{texts.warning}}: </strong>{{texts.debug_active_display_warning}}</p>
    </div>

    <hr class="hfng-divider-small" />

    <h1>{{texts.title_dash}}</h1>



    <label>
        <input type="checkbox" x-model="showOnlyRunning"> {{ texts.show_only_running }}
    </label>

    <table class="widefat fixed striped mt-5">
        <thead>
            <tr>
                <th>{{ texts.module_title }}</th>
                <th>{{ texts.status_title }}</th>
            </tr>
        </thead>
        <tbody>
            <template x-for="m in myModules" :key="m.module">
                <tr x-show="!showOnlyRunning || m.status === 'Running' || m.status === 'Offline'">
                    <td><code x-text="m.module"></code></td>
                    <td>
                        <span :class="{
                                'hfng-status-running': m.status === 'Running',
                                'hfng-status-offline': m.status === 'Offline',
                                'hfng-status-premium': ['(REQUIRES PREMIUM)', '(PRO+)', '(Agency+)', '(Enterprise)'].includes(m.status)
                            }">
                            <template x-if="m.status === 'Running'">
                                <span>✅ {{texts.running}}</span>
                            </template>
                            <template x-if="m.status === 'Offline'">
                                <span>❌ {{texts.offline}}</span>
                            </template>
                            <template x-if="['(REQUIRES PREMIUM)', '(PRO+)', '(Agency+)', '(Enterprise)'].includes(m.status)">
                                <span>⚠️ <span x-text="m.status"></span></span>
                            </template>
                        </span>


                    </td>
                </tr>
            </template>

            <template x-if="myModules.length === 0">
                <tr>
                    <td colspan="2">{{ texts.no_functions }}</td>
                </tr>
            </template>
        </tbody>
    </table>
     <hr class="hfng-divider" />
</div>
