@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>(BB)</sub></h5>
            </div>
            <div class="p-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 class="card-body">
        <div class="row">
            <div class="col-3">
                @if (ListRecords == null)
                {
                    <LoadingData></LoadingData>
                }
                else if (ListRecords.Count == 0)
                {
                    <div class="alert alert-warning text-center h3">No record found</div>
                }
                else
                {
                    <b>Alarm Bank</b>
                    <ul class="list-group">
                        @foreach (var item in ListRecords)
                        {
                            <li class="list-group-item list-group-item-action @cssActive(item.memAddr)" @onclick="() => raiseSelect(item)">
                                @item.description
                            </li>
                        }
                    </ul>
                }
            </div>
            <div class="col-9">
                @if (AlarmMap == null)
                {
                    <div class="alert alert-warning text-center h3">Select Bank First</div>
                }
                else
                {
                    <div class="row">
                        <div class="col-12 mb-2">
                            <ul class="list-group">
                                @foreach (var item in AlarmMap.messagesMap)
                                {
                                    <li class="list-group-item list-group-item-action @cssSilenced(item.Key)" @onclick="() => toggleMute(item.Key)">
                                        <div>@item.Value</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>