@using MileageTraker.Web.ViewModels.FuelLog
@model IList<ImportFuelLogViewModel>

@{
    ViewBag.Title = "Import Fuel Logs";
}
@section Styles
{
    <link href="@Url.Content("~/Content/font-awesome.min.css")" rel="stylesheet" type="text/css" />
}

@Html.Partial("_StatusMessage")

<h2>@ViewBag.Title</h2>
<h5>Matching Mileage Logs based on Date, Vehicle, and Gas Purchased</h5>
	
<p id="page-match-status"></p>

<table id="fuellogs" class="table table-striped table-bordered table-hover table-condensed">
	<thead>
		<tr>
			<th>Match Status</th>
			<th style="width:15%"></th>
			<th>Date</th>
			<th>Driver</th>
			<th>Tag Number</th>
			<th>Odometer</th>
			<th>MPG</th>
			<th>Gas Purchased</th>
			<th>Total Price</th>
		</tr>
	</thead>
	@for (var i = 0; i < Model.Count; i++)
	{
		var viewModel = Model[i];
		<tr id="fuellog-@i" @if (viewModel.PreviouslyAdded && viewModel.LogId != null) { <text>class="complete"</text>}>
			@using (Html.BeginForm("ImportMatch", "FuelLog", FormMethod.Post))
			{
				<input type="hidden" name="fuelLogId" value="@viewModel.FuelLogId"/>
			}
			<td class="match-status">
				@if (viewModel.PreviouslyAdded)
				{
					<span class="label label-info">Previously Imported</span>
				}
				@if (viewModel.LogId != null)
				{
					@Html.Partial("MatchLink", new MatchLinkViewModel (viewModel))
				}
			</td>
			<td class="match-message"></td>
			<td>@Html.ValueFor(x => viewModel.Date, "{0:d}")</td>
			<td>@Html.ValueFor(x => viewModel.DriverFullName)</td>
			<td>@Html.ValueFor(x => viewModel.TagNumber)</td>
			<td>@Html.ValueFor(x => viewModel.Odometer)</td>
			<td>@Html.ValueFor(x => viewModel.MPG)</td>
			<td>@Html.ValueFor(x => viewModel.GasPurchased, "{0:0.000}")</td>
			<td>@Html.ValueFor(x => viewModel.TotalPrice, "{0:C}")</td>
		</tr>
	}
</table>

@section Scripts
{
	<script src="@Url.Content("~/Scripts/Shared/FuelLogImport.js")" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			matchFuelLogs();
		});
	</script>
}