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

    <!-- 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>
                <button class="mb-2 btn btn-sm btn-new btn-success rounded border-0 ">
                    <i class="fa fa-plus"></i>Agregar
                </button>
            </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>
                                            <% for(let i=0; i < list.tHeaderData.length; i++) { 
                                                const headerData=list.tHeaderData[i]; 
                                                if (!headerData.isForTableDisplay)
                                                continue; %>
                                                <th>
                                                    <%= headerData.thName %>
                                                </th>
                                                <% } %>
                                                    <th class="text-right">Opciones</th>
                                        </tr>
                                    </thead>
                                    <tbody class="t-body-container">
                                        <% let counter=1; for(let i=0; i < list.data.length; i++) { const
                                            listItem=list.data[i];
                                            console.log(helpers.dobToAge(listItem.fechaNacimiento)); %>
                                            <tr role="row" data-id="<%= listItem.id %>"
                                                relationship-id="<%= listItem[relationshipIdProperty] %>"
                                                class="selectable-listItem"
                                                age-value="<%= helpers.dobToAge(listItem?.fechaNacimiento) === 'NaN' ? "" : helpers.dobToAge(listItem?.fechaNacimiento) %>"
                                                style="cursor: pointer;">
                                                <td>
                                                    <%= counter %>
                                                </td>
                                                <% for(let j=0; j < list.tHeaderData.length; j++) { const
                                                    tHeaderData=list.tHeaderData[j]; if (!tHeaderData.isForTableDisplay)
                                                    continue; %>
                                                    <td>
                                                        <%= listItem[tHeaderData.property] %>
                                                    </td>
                                                    <%}%>
                                                        <td class="text-right action-buttons">
                                                            <button
                                                                class="btn btn-sm btn-info btn-detail text-center p-2"
                                                                style="height: 30px;"><i class="fa fa-search"></i>
                                                                Detalle</button>
                                                            <button class="btn btn-sm btn-primary btn-modify p-2"
                                                                style="height: 30px;"><i class="fa fa-pencil"></i>
                                                                Modificar</button>
                                                            <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>
    <%- include('info-box.ejs') %>
        <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/list-relationship/relationship.js" defer></script>
        <script src="/js/components/info-box/info-box.js" defer></script>