@model Vehicle
@{
    var isNew = Model.Id == 0;
    if (Model.ImageLocation == "/defaults/noimage.png")
    {
        Model.ImageLocation = "";
    }
}
<div class="modal-header">
    <h5 class="modal-title" id="addVehicleModalLabel">@(isNew ? "Add New Vehicle" : "Edit Vehicle")</h5>
    @if (isNew)
    {
        <button type="button" class="btn-close" onclick="hideAddVehicleModal()" aria-label="Close"></button>
    }
    else if (!isNew)
    {
        <button type="button" class="btn-close" onclick="hideEditVehicleModal()" aria-label="Close"></button>
    }
    
</div>
<div class="modal-body">
    <form class="form-inline">
        <div class="form-group">
            <label for="inputYear">Year</label>
            <input type="number" id="inputYear" class="form-control" placeholder="Year(must be after 1900)" value="@(isNew ? "" : Model.Year)">
            <label for="inputMake">Make</label>
            <input type="text" id="inputMake" class="form-control" placeholder="Make" value="@Model.Make">
            <label for="inputModel">Model</label>
            <input type="text" id="inputModel" class="form-control" placeholder="Model" value="@Model.Model">
            <label for="inputLicensePlate">License Plate</label>
            <input type="text" id="inputLicensePlate" class="form-control" placeholder="License Plate" value="@Model.LicensePlate">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" id="inputIsElectric" checked="@Model.IsElectric">
                <label class="form-check-label" for="inputIsElectric">Electric Vehicle</label>
            </div>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" id="inputUseHours" checked="@Model.UseHours">
                <label class="form-check-label" for="inputUseHours">Use Engine Hours</label>
            </div>
            @if (!string.IsNullOrWhiteSpace(Model.ImageLocation))
            {
                <label for="inputImage">Replace picture(optional)</label>
                <input onChange="uploadFileAsync(this)" type="file" accept=".png,.jpg,.jpeg" class="form-control-file" id="inputImage">
            } else
            {
                <label for="inputImage">Upload a picture(optional)</label>
                <input onChange="uploadFileAsync(this)" type="file" accept=".png,.jpg,.jpeg" class="form-control-file" id="inputImage">
            }
        </div>
    </form>
</div>
<div class="modal-footer">
    @if (isNew)
    {
        <button type="button" class="btn btn-secondary" onclick="hideAddVehicleModal()">Cancel</button>
        <button type="button" onclick="saveVehicle(false)" class="btn btn-primary">Add New Vehicle</button>
    } else if (!isNew)
    {
        <button type="button" class="btn btn-secondary" onclick="hideEditVehicleModal()">Cancel</button>
        <button type="button" onclick="saveVehicle(true)" class="btn btn-primary">Save Vehicle</button>
    }
</div>
<script>
    var uploadedFile = "@Model.ImageLocation";
    function getVehicleModelData() {
        return { id: @Model.Id}
    }
</script>