@namespace AntDesign
@inherits NotificationBase

<div id="@Config.Key"
     class="@(ClassPrefix)-notice @(ClassPrefix)-notice-closable @GetClassName()"
     style="@Config.Style"
     @onclick="OnClick"
     @ref="Ref">

    <div class="@(ClassPrefix)-notice-content">
        <div class="@GetIconClassName()">
            @if (Config.Icon != null)
            {
                <span class="@(ClassPrefix)-notice-icon">
                    @Config.Icon
                </span>
            }
            else if (Config.NotificationType != NotificationType.None)
            {
                switch (Config.NotificationType)
                {
                    case NotificationType.Success:
                        {
                            <span role="img" aria-label="check-circle" class="anticon anticon-check-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-success">
                                <Icon Type="check-circle" Theme="outline"></Icon>
                            </span>

                            break;
                        }
                    case NotificationType.Warning:
                        {
                            <span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-warning">
                                <Icon Type="exclamation-circle" Theme="outline"></Icon>
                            </span>

                            break;
                        }
                    case NotificationType.Error:
                        {
                            <span role="img" aria-label="close-circle" class="anticon anticon-close-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-error">
                                <Icon Type="close-circle" Theme="outline"></Icon>
                            </span>

                            break;
                        }
                    case NotificationType.Info:
                        {
                            <span role="img" aria-label="info-circle" class="anticon anticon-info-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-info">
                                <Icon Type="info-circle" Theme="outline"></Icon>
                            </span>

                            break;
                        }
                }
            }

            <div class="@(ClassPrefix)-notice-message">
                @{
                    if (Config.Message.IsT0)
                    {
                        @((MarkupString)(Config.Message.AsT0))
                    }
                    else
                    {
                        @Config.Message.AsT1
                    }
                }
            </div>

            <div class="@(ClassPrefix)-notice-description">
                @{
                    if (Config.Description.IsT0)
                    {
                        @((MarkupString)(Config.Description.AsT0))
                    }
                    else
                    {
                        @Config.Description.AsT1
                    }
                }
            </div>

            @if (Config.Btn != null)
            {
                <span class="@(ClassPrefix)-notice-btn">
                    @Config.Btn
                </span>
            }
        </div>
    </div>

    <a tabindex="0" class="@(ClassPrefix)-notice-close" @onclick="Close" @onclick:preventDefault @onclick:stopPropagation>
        <span class="@(ClassPrefix)-close-x">
            <span role="img" aria-label="close" class="anticon anticon-close @(ClassPrefix)-close-icon">
                @Config.CloseIcon
            </span>
        </span>
    </a>
</div>