<% let relationshipIdProperty="" ; if (baseUrl.includes("/medios-pagos")) relationshipIdProperty="idMoneda" ; if
    (baseUrl.includes("/usuario")) relationshipIdProperty="id" ; if (baseUrl.includes("/pagos-individuales"))
    relationshipIdProperty="idMedio" ; if (baseUrl.includes("/contratos")) relationshipIdProperty="" ; %>

    <!-- Script for the functionality of the data table -->
    <script defer src="/js/template/data-table.js"></script>

    <div class="card">
        <div class="card-body">
            <div class="d-flex container-fluid justify-content-between p-0">
                <h4 class="mb-2">
                    <%= title %>
                </h4>
                <a href="/contratos/crear" class="mb-2 btn btn-sm btn-new btn-success rounded border-0"><i
                        class="fa fa-plus"></i>Agregar</a>
            </div>
            <hr>
            <div class="row">
                <div class="col-12 table-responsive">
                    <div id="order-listing_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                        <div class="row">
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <table id="order-listing" class="table dataTable no-footer" role="grid"
                                    aria-describedby="order-listing_info">
                                    <thead>
                                        <tr>
                                            <th>N°</th>
                                            <th>ID Fiscal</th>
                                            <th>Nombre</th>
                                            <th>Fecha de Nacimiento</th>
                                            <th>Plan</th>
                                            <th class="d-none">ID Titular</th>
                                            <th class="text-right">Opciones</th>
                                        </tr>
                                    </thead>
                                    <tbody class="t-body-container">
                                        <% 
                                        let counter=1; 
                                        for(let i=0; i < data.length; i++) { 
                                            const beneficiario=data[i];
                                            %>
                                            <tr role="row" data-id="<%= beneficiario.id %>" class="selectable-listItem"
                                                style="cursor: pointer;">
                                                <td>
                                                    <%= counter %>
                                                </td>
                                                <td>
                                                    <%= beneficiario.id %>
                                                </td>
                                                <td>
                                                    <%= beneficiario.razonSocial %>
                                                </td>
                                                <td>
                                                    <%= helpers.dateFormattedDMY(null, null, null, beneficiario.fechaNacimiento) %>
                                                </td>
                                                <td>
                                                    <%= beneficiario.seguro.descripcion %>
                                                </td>
                                                <td class="d-none">
                                                    <%= beneficiario.idTitular %>
                                                </td>
                                                <td class="text-right action-buttons">
                                                    <a href="/beneficiarios/<%= beneficiario.id %>" class="btn btn-sm btn-info btn-detail text-center p-2"
                                                        style="height: 30px;"><i class="fa fa-search"></i>
                                                        Detalle</a>
                                                    <a href="/beneficiarios/modificar/<%= beneficiario.id %>"
                                                        class="btn btn-sm btn-primary btn-modify p-2"
                                                        style="height: 30px;"><i class="fa fa-pencil"></i>
                                                        Modificar</a>
                                                    <button class="btn btn-sm btn-danger btn-delete p-2"
                                                        style="height: 30px;"><i class="fa fa-trash-o"></i>
                                                        Borrar</button>
                                                </td>
                                            </tr>

                                            <% counter++; } %>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const resourceName = "<%= resourceName %>";

        const titleName = "<%= titleSingular %>";

        // user object
        const user = JSON.parse(`<%- JSON.stringify(user) %>`);

        const relationshipStructure = JSON.parse(`<%- JSON.stringify(relationship) %>`);
    </script>
    <script src="/js/classes/NavigableIterator.js" defer></script>
    <script src="/js/components/list/list.js" defer></script>
    <script src="/js/components/individuals/pagos-individuales/delete.js" defer></script>
    <!-- <script src="/js/components/list-relationship/relationship.js" defer></script> -->
    <!-- <script src="/js/components/info-box/info-box.js" defer></script> -->