@using MP.MONO.Data
@using MP.MONO.UI.Components
@using MP.MONO.Core.DTO
@using MP.MONO.UI.Data

@inject IJSRuntime JSRuntime
@inject CurrentDataService MMDataService

<div class="card">
    <div class="card-header bg-secondary text-light">
        <div class="d-flex justify-content-between">
            <div class="p-2">
                <h5>Alarm Messages Setup <sub>(LR)</sub></h5>
            </div>
            <div class="p-2">
                <div class="d-flex ">
                    <div class="px-2">
                        <div class="input-group input-group-sm">
                            <div class="input-group-prepend">
                                <span class="input-group-text">search</span>
                            </div>
                            <input class="form-control form-control-sm" @bind-value="@SearchVal" title="Filter" placeholder="Filter alarm" />
                        </div>
                    </div>
                    <div class="px-2">
                        <button class="btn btn-sm btn-primary" @onclick="() => resetAlarmSetup()" title="Reset Alarm Config"><i class="fa-solid fa-gear"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-12">
                @if (ListRecords == null || ListRecords.Count == 0)
                {
                    <div class="alert alert-warning text-center h3">No data</div>
                }
                else
                {
                    <div class="row">
                        <div class="col-12 mb-2">
                            <ul class="list-group">
                                @foreach (var item in ListRecords)
                                {
                                    if (okShow(item.FullValue))
                                    {
                                        <li class="list-group-item list-group-item-action @cssSilenced(item.Muted)" @onclick="() => toggleMute(item)">
                                            <div>@item.FullValue</div>
                                        </li>
                                    }
                                }
                            </ul>
                        </div>
                        <div class="col-6">
                            <i>click to mute/unmute alarms</i>
                        </div>
                        <div class="col-6">
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-primary">Alarm Enabled</button>
                                <button type="button" class="btn btn-secondary">Alarm Disabled</button>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>

    </div>
</div>