@inject IPageHeadBuilder pagebuilder
@model CustomerLoyaltyPointsModel
@{
    Layout = "_TwoColumns";

    //title
    pagebuilder.AddTitleParts(Loc["Title.Account"]);
}
@section left
{
    @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.LoyaltyPoints })
}
<section class="page account-page loyalty-points-page pl-lg-3 pt-3 pt-lg-0">
    <h1 class="h2 generalTitle">@Loc["Account.MyAccount"] - @Loc["Account.LoyaltyPoints"]</h1>
    <div class="loyalty-points-overview">
        <div class="current-balance alert alert-success">@Loc["LoyaltyPoints.CurrentBalance", Model.LoyaltyPointsBalance, Model.LoyaltyPointsAmount]</div>
        @if (Model.MinimumLoyaltyPointsBalance > 0)
        {
            <div class="min-balance alert alert-danger">@Loc["LoyaltyPoints.MinimumBalance", Model.MinimumLoyaltyPointsBalance, Model.MinimumLoyaltyPointsAmount]</div>
        }
    </div>
    <div class="loyalty-points-history">
        <h5><strong>@Loc["LoyaltyPoints.History"]</strong></h5>
        @if (Model.LoyaltyPoints.Any())
        {
                        <div id="customer-loyalty-points" class="table-responsive">
                            <table class="table">
                                <thead role="rowgroup">
                                    <tr role="row">
                                        <th role="columnheader"><div>@Loc["LoyaltyPoints.Fields.Date"]</div></th>
                                        <th role="columnheader"><div>@Loc["LoyaltyPoints.Fields.Points"]</div></th>
                                        <th role="columnheader"><div>@Loc["LoyaltyPoints.Fields.PointsBalance"]</div></th>
                                        <th role="columnheader"><div>@Loc["LoyaltyPoints.Fields.Message"]</div></th>
                                    </tr>
                                </thead>
                                <tbody role="rowgroup">
                                    @for (int i = 0; i < Model.LoyaltyPoints.Count; i++)
                                    {
                                        var item = Model.LoyaltyPoints[i];
                                        <tr role="row">
                                            <td>
                                                <div>
                                                    @item.CreatedOn
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    @item.Points
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    @item.PointsBalance
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    @item.Message
                                                </div>
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
        }
        else
        {
            <section class="no-data alert alert-info my-3">
                @Loc["LoyaltyPoints.NoHistory"]
            </section>
        }
    </div>
</section>
