@model PantheonRA.WebApi.Contracts.EmployeeFamilyMember
@using PantheonRA.BackOffice.Enums

<div id="family-member-accordion-@Model.AnId" class="panel evaluation-panel panel-default pm-accordion-row">
    @Html.Hidden("FamilyMemberId-" + Model.AnId, Model.AnId)
    @Html.Hidden("FamilyMemberQId-" + Model.AnId, Model.AnQId)

    @*Employee family member header*@
    <table class="table table-bordered table-fixed evaluation-table">
        <tbody>
            <tr>
                <td style="width: 76%;" onclick="collapseAccordionPM('#collapse-@Model.AnId', '#arrow-@Model.AnId')">
                    <div class="row eval-row">
                        <div class="open-position" href="#collapse-@Model.AnId">
                            <div class="panel-heading" role="tab" id="heading-@Model.AnId">
                                <h4 class="panel-title">
                                    <a id="arrow-@Model.AnId"
                                       class="text-default collapsed"
                                       role="button"
                                       aria-controls="ariaCollapse-@Model.AnId">
                                    </a>
                                </h4>
                            </div>
                        </div>
                        <div class="open-position" href="#collapse-@Model.AnId" title="@Loc.FullName">
                            <span id="Row-@Model.AnId-FullName">
                                @Model.AcName @Model.AcSurname
                            </span>
                        </div>
                    </div>
                </td>

                <td style="width: 20%;" title="@Loc.Relationship">
                    <div class="row eval-row">
                        <i class="fas fa-users text-success"></i>
                        <span id="Row-@Model.AnId-Relationship">
                            @(!string.IsNullOrEmpty(Model.AcRelative) ? RelativeTypesHelper.GetRelativeValueByKey(Model.AcRelative) : string.Empty)
                        </span>
                    </div>
                </td>

                <td style="width: 4%;" title="@Loc.Delete">
                    <div class="row eval-row">
                        <i class="far fa-trash-alt" onclick="deleteFamilyMember(@Model.AnId)" style="cursor: pointer;"></i>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    @*Employee family member info*@
    <div id="collapse-@Model.AnId" class="panel-collapse collapse" role="tabpanel" aria-labelledby="family-member-@Model.AnId">
        @Html.Partial("_FamilyMemberFields", Model)
    </div>
</div>
