@using SharedLibraryCore
@using SharedLibraryCore.Alerts
@model IEnumerable<SharedLibraryCore.Alerts.Alert.AlertState>
@{
    Layout = null;
}
<div class="dropdown with-arrow" data-toggle="dropdown" id="alert-toggle" aria-haspopup="true" aria-expanded="false">
    <div data-toggle="tooltip" data-title="@(Model.Any() ? ViewBag.Localization["WEBFRONT_ALERTS_SOME_TOOLTIP"] : ViewBag.Localization["WEBFRONT_ALERTS_NONE_TOOLTIP"])" data-placement="bottom">
        <i class="oi oi-bell mt-5"></i>
    </div>
    @if (Model.Any())
    {
        <div class="position-absolute bg-danger rounded-circle ml-10" style="width: 0.5em;height: 0.5em;top: 0;"></div>
        <div class="dropdown-menu dropdown-menu-right w-250 w-md-400" aria-labelledby="alert-toggle">
            <div class="d-flex">
                <h6 class="dropdown-header">@((ViewBag.Localization["WEBFRONT_ALERTS_POPOVER_COUNT"] as string).FormatExt((int)ViewBag.Alerts.Count))</h6>
                <i class="oi oi-circle-x font-size-12 text-danger align-self-center profile-action" data-action="DismissAllAlerts" data-action-id="@ViewBag.User.ClientId"></i>
            </div>
            <div class="dropdown-divider"></div>
            <div style="max-height: 50vh; overflow: scroll" >
                @foreach (var alert in Model)
            {
                <div class="d-flex p-5 pl-10 pr-10">
                    <div class="align-self-center">
                        @if (alert.Category == Alert.AlertCategory.Error)
                        {
                            <i class="oi oi-warning text-danger font-size-12 mr-5"></i>
                        }
                        @if (alert.Category == Alert.AlertCategory.Warning)
                        {
                            <i class="oi oi-warning text-secondary font-size-12 mr-5"></i>
                        }
                        @if (alert.Category == Alert.AlertCategory.Information)
                        {
                            <i class="oi oi-circle-check font-size-12 mr-5 text-primary"></i>
                        }
                        @if (alert.Category == Alert.AlertCategory.Message)
                        {
                            <i class="oi oi-envelope-closed font-size-12 mr-5 text-primary"></i>
                        }
                    </div>
                    <div class="font-size-12 p-5">
                        <span class="text-force-break">@alert.Message</span>
                        <div class="text-muted d-flex">
                            <span>@alert.OccuredAt.HumanizeForCurrentCulture()</span>
                            @if (!string.IsNullOrEmpty(alert.Source))
                            {
                                <span class="ml-5 mr-5">&#8226;</span>
                                @if (alert.SourceId is null)
                                {
                                    <div class="text-white font-weight-light">@alert.Source.StripColors()</div>
                                }
                                else
                                {
                                    <a asp-controller="Client" asp-action="Profile" asp-route-id="@alert.SourceId" class="no-decoration">@alert.Source</a>
                                } 
                            }
                        </div>
                    </div>
                    <div class="ml-auto">
                        <i class="oi oi-circle-x font-size-12 ml-5 align-self-center profile-action" data-action="DismissAlert" data-action-id="@alert.AlertId"></i>
                    </div>
                </div>
            }
            </div>
        </div>
    }
</div>