@using CarCareTracker.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@model List<VehicleViewModel>
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
    var recordTags = Model.SelectMany(x => x.Tags).Distinct();
}
@if (recordTags.Any())
{
    <div class='row'>
        <div class="col-12 d-flex align-items-center flex-wrap mt-2 mb-2">
            @foreach (string recordTag in recordTags)
            {
                <span onclick="filterGarage(this)" class="user-select-none ms-1 me-1 mt-1 mb-1 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
            }
            <datalist id="tagList">
                @foreach (string recordTag in recordTags)
                {
                    <!option value="@recordTag"></!option>
                }
            </datalist>
        </div>
    </div>
}
    <div class="row gy-3 align-items-stretch vehiclesContainer pb-2 @(recordTags.Any() ? "" : "mt-2")">
        @foreach (VehicleViewModel vehicle in Model)
        {
            @if (!(userConfig.HideSoldVehicles && !string.IsNullOrWhiteSpace(vehicle.SoldDate)))
            {
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-6 user-select-none garage-item" ondragover="dragOver(event)" ondrop="dropBox(event, @vehicle.Id)" draggable="true" ondragstart="dragStart(event, @vehicle.Id)" data-tags='@string.Join(" ", vehicle.Tags)' id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="@await Html.PartialAsync("_VehicleExtraFields", vehicle.ExtraFields)" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
                    <div class="card" onclick="viewVehicle(@vehicle.Id)">
                        <img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down; pointer-events:none; @(string.IsNullOrWhiteSpace(vehicle.SoldDate) ? "" : "filter: grayscale(100%);")" />
                        @if (!string.IsNullOrWhiteSpace(vehicle.SoldDate))
                        {
                            <div class="vehicle-sold-banner"><p class='display-6 mb-0'>@translator.Translate(userLanguage, "SOLD")</p></div>
                        } else if (vehicle.DashboardMetrics.Any())
                        {
                            <div class="vehicle-sold-banner">
                            @if (vehicle.DashboardMetrics.Contains(DashboardMetric.Default) && vehicle.LastReportedMileage != default)
                            {
                                
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <span class="ms-2"><i class="bi bi-speedometer me-2"></i>@vehicle.LastReportedMileage.ToString("N0")</span>
                                        </div>
                                        @if (vehicle.HasReminders)
                                        {
                                            <div>
                                                <span class="me-2"><i class="bi bi bi-bell-fill text-warning"></i></span>
                                            </div>
                                        }
                                    </div>
                            }
                            @if (vehicle.DashboardMetrics.Contains(DashboardMetric.CostPerMile) && vehicle.CostPerMile != default)
                            {
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <span class="ms-2"><i class="bi bi-cash-coin me-2"></i>@($"{vehicle.CostPerMile.ToString("C2")}/{vehicle.DistanceUnit}")</span>
                                        </div>
                                    </div>
                            }
                            @if (vehicle.DashboardMetrics.Contains(DashboardMetric.TotalCost) && vehicle.TotalCost != default)
                            {
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <span class="ms-2"><i class="bi bi-cash-coin me-2"></i>@($"{vehicle.TotalCost.ToString("C2")}")</span>
                                        </div>
                                    </div>
                            }
                            </div>
                        }
                        <div class="card-body">
                            <h5 class="card-title text-truncate garage-item-year" data-unit="@vehicle.Year">@($"{vehicle.Year}")</h5>
                            <h5 class="card-title text-truncate">@($"{vehicle.Make}")</h5>
                            <h5 class="card-title text-truncate">@($"{vehicle.Model}")</h5>
                            <p class="card-text text-truncate">@StaticHelper.GetVehicleIdentifier(vehicle)</p>
                        </div>
                    </div>
                </div>
            }
        }
        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-6 garage-item-add">
            <div class="card" onclick="showAddVehicleModal()" style="height:100%;">
                <img src="/defaults/addnew_vehicle.png" style="object-fit:scale-down;height:100%;" />
            </div>
        </div>
    </div>