@{
	ViewData["Title"] = "Home Page";
}

<div class="row">
	<div class="col-xs-18 col-md-12">
		@(Html.Kendo().Grid<TelerikAspNetCoreApp58.Models.OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);
                    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                    columns.Bound(p => p.ShipName);
                    columns.Bound(p => p.ShipCity);
                })
                   .Pdf(p => p.PaperSize("auto"))

  .ToolBar(toolbar =>
  {
      toolbar.ClientTemplateId("PatientGridToolbarTemplate");
  })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
		)
	</div>
</div>
<script id="PatientGridToolbarTemplate" type="text/x-kendo-template">
    <div style="height:125px;padding-top:3px;">
        <div style="border:1px solid black;width:35%;float:left;padding:10px;">
            <div>Scenario: <b>@ViewBag.Rule</b></div>
            <div>Description: <b>@ViewBag.RuleDescription</b></div>
            <div>
                <div style="float:left">
                    Run Date:  <b>... </b>
                </div>
                    <div style="float:right;padding-left:20px;">
                        Rule Version: <b>...</b>
                    </div>
            </div>
            <br />
            <div>Data Ingestion:  <b>...</b></div>
            <div> Rule Engine:  <b>...</b></div>
        </div>
        <div style="border:1px solid black;float:right;width:20%;padding:10px;margin-right: 5%;">
            <div> Total Patient Population:  <b id="TotalPatients">...</b></div>
            <div>
                <div style="float:left"> Matching Patient Population: ... <b id="MatchingPatients"></b> </div> <div style="float:right;"> <b id="MatchingPercentage"></b></div>
            </div>
        </div>
    </div>
    <div style="float:left;width:100%;padding-bottom:5px">
        <div style="float:left;width:30%;padding:4px;">
            <a role="button" class="k-button k-button-icontext k-grid-excel" href="\\#"><span class="k-icon k-i-file-excel"></span>export to excel</a>
            <a role="button" id="gridExportPdf" class="k-button k-button-icontext k-grid-pdf" href="\\#"><span class="k-icon k-i-file-pdf"></span>export to pdf</a>
        </div>
    </div>
</script>