<div x-data="HF_MLOG_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="padding:15px; margin-bottom:20px;">
                <p><strong>{{texts.important}}</strong>{{texts.disclaimer_main|raw}}</p>
                <p class="description" style="color:#666; font-style:italic; margin-bottom:1em;">
                    {{texts.disclaimer_description}}
                </p>
    </div>
        
    <div>
      <label>
        <input type="radio"
                name="happyfenceng_log_type"
                value="file"
                x-model="logType"               
                :checked="logType === 'file'" />
            {{texts.file_logs}}
        </label>&nbsp&nbsp&nbsp
        <label>
            <input type="radio"
                name="happyfenceng_log_type"
                value="db"
                x-model="logType"
                :disabled="!enabledDb"
                :checked="logType === 'db'" />
            {{texts.database_logs}}
        </label>&nbsp&nbsp&nbsp
        <label>
            <input type="radio"
                name="happyfenceng_log_type"
                value="siem"
                x-model="logType"
                :disabled="!enabledSiem"
                :checked="logType === 'siem'" />
            {{texts.siem_logs}}
        </label>
    </div>

   

    <div>
        <h2>{{texts.log_severities_title}}</h2><p x-show="!enabledSeverity">{{texts.severity_requires}}</p>
         <fieldset style="margin-bottom: 1em;">
            <template x-for="sev in allSeverities">
                <label style="margin-right:12px;">
                    <input type="checkbox"
                        :name="sev.name"
                        x-bind:disabled="!sev.is_enabled"
                        x-model="sev.is_checked" />
                    <span x-text="sev.name"></span>
                    <span x-show="!sev.is_enabled" class="text-muted"></span><br>
                </label>
                <br>
            </template>
        </fieldset>
    

        <h2>{{texts.log_facilities_title}}</h2><p x-show="!enabledFacility">{{texts.facility_requires}}</p>
        <fieldset style="margin-bottom: 1em;">
            <template x-for="fac in allFacilities">
                <label style="margin-right:12px;">
                    <input type="checkbox"
                        :name="fac.name"                        
                        x-bind:disabled="!fac.is_enabled"
                        x-model="fac.is_checked" />
                    <span x-text="fac.name"></span>
                    <span x-show="!fac.is_enabled" class="text-muted"></span><br>
                </label>
                <br>
            </template>
        </fieldset>
    </div>

    <div x-show="logType=='siem'">         
        <label>{{texts.siem_endpoint}}</label><br>
            <input type="text"
                name="happyfenceng_siem_endpoint"
                id="happyfenceng_siem_endpoint"                
                x-model="siemEndpoint"
                class="regular-text"
                placeholder="logs.example.com:514" />
                <p class="description">{{texts.siem_endpoint_description}}</p>
    </div>

    <div x-show="logType=='db'">   
         <h2>{{texts.log_records}}</h2>
            

        <!-- Filtri -->
        <select x-model="filterSeverity">            
            <template x-for="sev in allSeverities">
                <option :value="sev.value" x-bind:selected="sev.value === filterSeverity">
                    <span x-text="sev.name"></span>
                </option>
            </template>
        </select>

        <select x-model="filterFacility">           
            <template x-for="fac in allFacilities">
                <option :value="fac.value" x-bind:selected="fac.value === filterFacility">
                    <span x-text="fac.name"></span>
                </option>
            </template>
        </select>

        <input type="date" x-model="filterDateFrom" />
        <input type="date" x-model="filterDateTo" />


        <select x-model="filterPaged">
            <template x-for="pag in totalPages">
                <option :value="pag">
                    <span x-text="pag"></span>
                </option>
            </template>
        </select>

        <select x-model="filterPerPage">
            <template x-for="num in [10, 25, 50, 100]">
                <option :value="num">
                    <span x-text="num"></span>
                </option>
            </template>
        </select>

        <div>
            <br>            
            <button type="button" class="hfng-button" @click="showLogs()">{{texts.show_logs_title}}</button>
            <div x-show="myShowResult" 
                x-text="myShowResult" 
                :class="myShowColor" 
                style="margin-left:10px; display:inline-block;"
                x-transition.opacity.duration.300ms>
            </div>
            <!-- Messaggio se non ci sono logs -->
            <p x-show="pageLogs.length === 0">{{texts.no_records_found}}</p>
        </div>    

        <table class="widefat striped" x-show="pageLogs.length > 0">
            <thead>
                <tr>
                    <th>{{texts.timestamp_title}}</th>
                    <th>{{texts.severity_title}}</th>
                    <th>{{texts.facility_title}}</th>
                    <th>{{texts.message_title}}</th>
                </tr>
            </thead>
            <tbody>
                <template x-for="log in pageLogs">
                    <tr>
                        <td x-text="log.timestamp"></td>
                        <td x-text="log.severity"></td>
                        <td x-text="log.facility"></td>
                        <td><code x-text="log.message"></code></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>

