@model EForT.Models.AccountsModel

<div id="card-list-table">
    <table id="card-list" class="table table-striped table-bordered user-table table-responsive-md">
        <thead>
            <tr>
                <th scope="col" style="width:10%" class="text-center">Default Card</th>
                <th scope="col" style="width:30%" class="text-center">Nickname</th>
                <th scope="col" style="width:20%" class="text-center">Last Four Digits</th>
                <th scope="col" style="width:20%" class="text-center">Edit Nickname</th>
                <th scope="col" style="width:10%" class="text-center">Default Card Settings</th>
                <th scope="col" style="width:10%" class="text-center">Delete</th>
            </tr>
        </thead>
        <tbody>
            @{
                if (Model.CreditCardList == null || Model.CreditCardList.Count() == 0)
                {
                    
                }
                else
                {
                    int numValidCards = 0;
                    foreach (var item in Model.CreditCardList)
                    {
                        if (item.IsDeleted == false)
                        {
                            numValidCards++;
                        }
                    }
                    if (numValidCards > 0)
                    {
                            {
                                foreach (var item in Model.CreditCardList)
                                {
                                    if (item.IsDeleted == false)
                                    {
            <tr>
                @{
                    if (item.IsDefault == true)
                    {
                        <td align="center"><i class="fa fa-check font-medium-3"></i></td>
                    }
                    else
                    {
                        <td align="center"><i class="fa fa-times font-medium-3"></i></td>
                    }
                }
                <td align="center">@item.NickName</td>
                <td align="center"><i class="fa fa-credit-card"></i> XXXX-XXXX-XXXX-@item.LastFourDigits</td>
                <td align="center"><button type="button" class="btn btn-icon btn-pure secondary js-edit-card-nickname" data-url="@Url.Action("EditCreditCardNickname", "Accounts", new { accountId = item.Id })"><i class="fa fa-pencil"></i></button></td>                            @{
                    if (item.IsDefault == false)
                    {
                        <td align="center"><button type="button" id="make-default-credit-card" class="btn btn-icon btn-pure secondary js-make-default-credit-card" data-url="@Url.Action("MakeDefaultCreditCard", "Accounts", new { creditCardId = item.Id })">Make default <i class="fa fa-plus"></i></button></td>
                    }
                    else
                    {
                        <td align="center"><button type="button" id="make-default-credit-card" class="btn btn-icon btn-pure secondary js-remove-default-credit-card" data-url="@Url.Action("RemoveDefaultCreditCard", "Accounts", new { creditCardId = item.Id })">Remove as default <i class="fa fa-minus"></i></button></td>
                    }
                }


                <td align="center"><button type="button" class="btn btn-icon btn-pure secondary js-delete-card" data-url="@Url.Action("DeleteExternalCardAPI", "Accounts", new { CardId = @item.Id })"><i class="fa fa-trash"></i></button></td>
            </tr>
                                    }
                                }
                            }
                        
                    }
                    else
                    {
                        
                    }
                }
            }
        </tbody>
    </table>
</div>


