@page
@model BillsTracker.Pages.BillsModel

@{
    /*
    https://stackoverflow.com/questions/20700734/razor-editorfor-checkbox-event-binding
    https://stackoverflow.com/questions/32167499/custom-razor-html-attributes
    */
    ViewData["Title"] = "Bills";
}

<h1>Bills</h1>

<p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Bill[0].Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Bill[0].Amount)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Bill[0].Paid)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.Bill) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Amount)
            </td>
            <td>
                @Html.EditorFor(modelItem => item.Paid, new { htmlAttributes = new { @data_itemId=$"{item.Id}" } })
            </td>
            <td>
                <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>
