@{
    ViewBag.Title = "Scenario Templates";
}

@section scripts
{
    <script type="text/javascript">
    	function formatDate(jsonDate) {
    		if (jsonDate == null || jsonDate == "")
    			return "";
    		var dt = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10));
    		return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
    	}

    	init.push(function () {
			$('#sct').dataTable({
				"bProcessing": true,
				"bServerSide": true,
				"bAutoWidth" : false,
				"sAjaxSource": document.URL,
				"sServerMethod": "POST",
				"aoColumns": [
				{ "mDataProp": "Name" },
				{
					"mDataProp": "StartDate",
					"mRender": function (data, type, full) {
						return formatDate(data);
					}
				},
				{
					"mDataProp": "EndDate",
					"mRender": function (data, type, full) {
						return formatDate(data);
					}
				},
                { "mDataProp": "Duration" },
				{ "mDataProp": "ScenariosCount" },
                {
                	"mDataProp": "CGSplit",
                	"mRender": function (data, type, full) {
                		return data != null && data != "" ? parseFloat(data).toFixed(2)*100 + "%" : "";
                	}
                },
                {
                	"mDataProp": "EFXSplit",
                	"mRender": function (data, type, full) {
                		return data != null && data != "" ? parseFloat(data).toFixed(2) * 100 + "%" : "";
                	}
                }],
				"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {

				}
			});
			$('#sct_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
			$('#sct_wrapper .dataTables_processing').addClass("table-caption");
			$('#sct_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');
		});
    </script>
}

<div class="table-light table-responsive">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="sct">
        <thead>
            <tr>
                <th>
                    Template Name
                </th>
                <th>
                    Start Date
                </th>
                <th>
                    End Date
                </th>
                <th>
                    Duration
                </th>
                <th>
                    Scenarios #
                </th>
                <th>
                    Labor
                </th>
                <th>
                    Materials
                </th>
             </tr>
        </thead>
    </table>
</div>