@using PlexRequests.UI.Helpers
@inherits PlexRequests.UI.Helpers.EmptyViewBase<PlexRequests.UI.Models.LandingPageViewModel>

<img class="landing-header" src="~/Content/images/logo.png" width="300" />
<div id="area" class="landing-block">
    @if (Model.NoticeEnable && (!Model.EnabledNoticeTime || Model.NoticeActive))
    {
        <div class="media">
            <div class="media-left media-middle">
                <i class="fa fa-bell"></i>
            </div>
            <div class="media-body">
                <h4 class="media-heading landing-title">Notice</h4>
                @Model.NoticeMessage<br />
                @if (Model.EnabledNoticeTime)
                {
                    <strong><span id="startDate"></span> <span id="endDate"></span></strong>
                }
            </div>
        </div>
    }

    <div class="media">
        <div class="media-left media-middle">
            <i id="statusIcon" class="fa fa-spinner fa-spin fa-fw"></i>
        </div>
        <div class="media-body">
            <h4 class="media-heading landing-title" id="statusTitle">Checking...</h4>
            The Plex server is <strong><span id="statusText">Loading...</span></strong> (check this page for continuous status updates)
        </div>
    </div>
</div>
<div style="text-align: center; margin-top: 20px">
    <a href="@Model.ContinueUrl?landing=false" class="btn btn-primary-outline">Continue</a>
</div>

<script>
    $(function () {
        @if (Model.NoticeEnable && (!Model.EnabledNoticeTime || Model.NoticeActive))
        {
        <text>
        var start = moment("@Model.NoticeStart.ToString("O")");
        var end = moment("@Model.NoticeEnd.ToString("O")");

        var text = "for " + start.to(end, true);
        $('#startDate').html(start.toString());
        $('#endDate').html(text);
        </text>
        }
        var base = "@Html.GetBaseUrl()";
        var url = createBaseUrl(base, "landing/status");

        $.ajax({
            type: "GET",
            url: url,
            dataType: "json",
            success: function (response) {
                $('#statusIcon').removeClass("fa-spinner fa-spin fa-fw");
                if (response === true) {
                    //fa fa-check-circle fa-5x
                    $('#statusIcon').addClass("fa-check-circle");
                    $('#statusText').text("currently online");
                    $('#statusTitle').text("Currently Online");
                } else {
                    $('#statusIcon').addClass("fa-times-circle");
                    $('#statusText').text("currently offline");
                    $('#statusTitle').text("Currently Offline");
                }
            },
            error: function (e) {
                console.log(e);
                $('#statusIcon').addClass("fa-times-circle");
            }
        });

    });
</script>