@namespace ThingsGateway.Razor

<Reconnector>
    <ReconnectingTemplate>
        <div class="connection-mask"></div>
        <div class="connection-body">
            <div class="row g-2 mx-1">
                @RenderThingsGateway
                <div class="col-12 col-sm-5">
                    <h5>@Reconnecting1</h5>
                    <p><b>@Reconnecting2</b></p>
                    <p>@((MarkupString)Reconnecting3)</p>
                </div>
                <div class="col-12 col-sm-2">
                    <div class="d-flex align-items-center justify-content-center h-100">
                        <a href="javascript:window.Blazor.reconnect()" class="btn btn-primary">@ReconnectFailed4</a>
                    </div>
                </div>
            </div>
        </div>
    </ReconnectingTemplate>
    <ReconnectFailedTemplate>
        <div class="connection-mask"></div>
        <div class="connection-body">
            <div class="row g-2 mx-1">
                @RenderThingsGateway
                <div class="col-12 col-sm-5">
                    <h5>@ReconnectFailed1</h5>
                    <p><b>@ReconnectFailed2</b></p>
                    <p>@((MarkupString)ReconnectFailed3)</p>
                </div>
                <div class="col-12 col-sm-2">
                    <div class="d-flex flex-column align-items-center justify-content-center h-100">
                        <a href="javascript:window.Blazor.reconnect()" class="btn btn-primary mb-3">@ReconnectFailed4</a>
                        <a href="javascript:location.reload()" class="btn btn-info">@ReconnectFailed5</a>
                    </div>
                </div>
            </div>
        </div>
    </ReconnectFailedTemplate>
    <ReconnectRejectedTemplate>
        <div class="connection-mask"></div>
        <div class="connection-body">
            <div class="row g-2 mx-1">
                @RenderThingsGateway
                <div class="col-12 col-sm-5">
                    <h5>@ReconnectRejected1</h5>
                    <p><b>@ReconnectRejected2</b></p>
                    <p>@((MarkupString)ReconnectRejected3)</p>
                </div>
                <div class="col-12 col-sm-2">
                    <div class="d-flex flex-column align-items-center justify-content-center h-100">
                        <a href="javascript:location.reload()" class="btn btn-info">@ReconnectRejected4</a>
                    </div>
                </div>
            </div>
        </div>
    </ReconnectRejectedTemplate>
</Reconnector>

@code {

    RenderFragment RenderThingsGateway =>
    @<div class="col-12 col-sm-5">
        <h5>@RenderThingsGateway1</h5>
        <div class="d-flex">
            <div class="flex-fill">
                <p></p>
                <p>@RenderThingsGateway2</p>
                <p></p>
                <p>@RenderThingsGateway3</p>
            </div>
            <div class="connection-body-tail d-none d-sm-block"></div>
        </div>
    </div>;
}


        