@model Neo.LegitimateLicences.NewRouteRequest.NewRouteRequestDashboardModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Security
@using Neo.Afx.Mvc
@using Neo.LegitimateLicences.Common;

<script type="text/javascript">
@Html.Raw("function ViewModel" + Model.AjaxRequestTicket + "() { }")

@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
    newRouteRequestView: ko.mapping.fromJSON('@Html.Raw(Model.NewRouteRequestView.ToJson(JsonSerializerOptions.EscapeBackSlash | JsonSerializerOptions.FormatDateTime))'),  
    newRouteStatusSummary: @Html.Raw(Model.NewRouteStatusSummary.ToJson(JsonSerializerOptions.None)),
    comments: ko.observable(@Html.Raw(Model.Comments.ToJson(JsonSerializerOptions.FormatDateTime | JsonSerializerOptions.EscapeBackSlash))),
    wf: @Html.Raw(Model.WorkflowInstance.ToJson(JsonSerializerOptions.None))
});
</script>

<script type="text/javascript">
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{

});
</script>

<div id="@(new HtmlString("koContainer" + Model.AjaxRequestTicket))">
    @Html.Partial("Console.PageHeader")

    <div class="row">
        <div class="col">
            <div id="MainCard" class="card">
                <div class="card-header navbar">
                    <h4 class="card-title" data-bind="text:wf.Description"></h4>
                </div>
                <div class="card-body">
                    <div class="row" data-bind="foreach:newRouteStatusSummary">
                        <div class="item col-sm-12 col-lg-4">
                            <div class="card card-round card-clickable d-flex" style="/*height:75px;*/ text-align:center;"
                                 data-bind="css: { statusComplete: (Status=='Complete'), statusInProgress: (Status=='In Progress'), statusNotRequired:(Status=='Not Required'), statusNotStarted:(Status=='Not Started') }">
                                <div class="card-body align-items-center d-flex justify-content-center">
                                    <h4 data-bind="text:Title + '(' + Status + ')'"></h4>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 col-lg-3" data-bind="visible: comments().length > 0">
            <div id="MainCard" class="card">
                <div class="card-header navbar">
                    <h4 class="card-title">
                        Latest Comments
                    </h4>
                </div>
                <div class="card-body">
                    <div data-bind="foreach: comments">
                        <div style="padding-bottom:15px;" class="row">
                            <div class="item col-sm-12 col-lg-12">
                                <div>
                                    <label class="bmd-label-floating" data-bind="text:Comments"></label><br />
                                    <span style="font-weight:bold;" data-bind="text:UserCreatedBy.FullName + ' @@ ' + CreatedDate"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    @*<div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-header navbar">
                            <h4 class="card-title">New operating licence (from source) for licence LKN123123</h4>

                            <ul class="navbar-nav topbar-nav ml-md-auto align-items-center" style="display:flex; flex-direction:row">
                                <li class="nav-item">
                                    <a href="#" class="nav-link quick-sidebar-toggler"><i class="fas fa-list-alt"></i></a>
                                </li>
                            </ul>
                        </div>
                        <div class="row card-body">
        <pre>
            snazzy application dashboard with....
                date created (+days since then)
                green/red/yellow flag based on age
                current process status (graphical?)
                lastest comments
        </pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>*@

    <script type="text/javascript">
    @Html.Raw("var viewModel = new ViewModel" + Model.AjaxRequestTicket + "();")

    $().ready(function () {
        var mainDiv = $("#@(new HtmlString("koContainer" + Model.AjaxRequestTicket))");
        ko.cleanNode(mainDiv[0]);
        ko.applyBindings(viewModel, mainDiv[0]);
    });
    </script>