@model IndexModel


<button id="alertsButton" class="btn btn-info">
    <span class="fa fa-bell"></span>
    <span id="alertsCount">
        @Model.Alerts.Count
    </span>
</button>

<div id="alertsFrame" class="bg-secondary">
    <div class="text-right">
        <button id="closeAlertsFrameButton"  class="btn btn-secondary mt-2 mr-2 btn-sm">
            <span class="fa fa-times pointer"></span>    
        </button>
        
    </div>
    
    <div class="mt-3">
        @foreach (var alert in Model.Alerts)
        {
            <div id="@alert.ID" class="card border-primary mb-3 mr-2 ml-2">
                <div class="card-header">@alert.CreatedOn.ToString()</div>
                <div class="card-body">
                    @if (!string.IsNullOrWhiteSpace(alert.Device?.DeviceName))
                    {
                        <h6 class="card-title">@alert.Device.DeviceName</h6>
                    }
                    <p class="card-text">@alert.Message</p>
                    <div class="text-right">
                        <button alert="@alert.ID" class="btn btn-sm btn-secondary alert-dismiss-button"
                                type="button">
                            Dismiss
                        </button>
                    </div>
                </div>
            </div>
        }
    </div>

</div>

<div class="work-area hidden">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active show" href="#deviceGridFrame" data-toggle="tab">
                Grid
            </a>
        </li>

        <li class="nav-item">
            <a id="consoleTab" class="nav-link" href="#consoleFrame" data-toggle="tab">
                Console
                <span id="consoleAlert" class="badge badge-info badge-pill align-top" hidden>
                    <i class="fa fa-exclamation" aria-hidden="true"></i>
                </span>
            </a>
        </li>

    </ul>
    <div id="tabContentWrapper">
        <div class="tab-content h-100">
            <partial name="_DataGrid" model="Model" />
            <partial name="_ConsoleFrame" model="Model" />
        </div>
    </div>
</div>

<script src="~/scripts/Main.js" type="module"></script>
<script>
    window.onload = (ev) => {
        Remotely.Init();
        document.querySelector(".loading-frame").remove();
        document.querySelector(".work-area").classList.remove("hidden");
    }
</script>