viewof tarjetas = {
const initCards = async () => {
const container = document.getElementById('cardContainer');
const input = document.getElementById('searchInput');
const sortAscButton = document.getElementById('sortAsc');
const sortDescButton = document.getElementById('sortDesc');
const modal = document.createElement('div');
modal.id = "infoModal";
modal.style.display = "none";
modal.style.position = "absolute";
modal.style.backgroundColor = "white";
modal.style.border = "1px solid #ccc";
modal.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
modal.style.padding = "10px";
modal.style.zIndex = "1000";
document.body.appendChild(modal);
if (!container || !input || !sortAscButton || !sortDescButton) {
console.warn("Esperando al DOM...");
await new Promise(resolve => setTimeout(resolve, 100));
return initCards();
}
input.addEventListener('keyup', filterCards);
sortAscButton.addEventListener('click', () => sortCards('asc'));
sortDescButton.addEventListener('click', () => sortCards('desc'));
container.addEventListener('click', (event) => {
if (event.target.classList.contains('info-button')) {
const personaId = event.target.dataset.id;
const persona = DATOS.find(p => p.id === personaId);
showModal(event, persona);
}
});
document.addEventListener('click', (event) => {
if (!modal.contains(event.target) && !event.target.classList.contains('info-button')) {
modal.style.display = "none";
}
});
};
initCards();
return html`
<div>
<div class="search-bar">
<input type="text" id="searchInput" placeholder="Buscar por nombre o federación..." />
<button id="sortDesc" class="sort-button">Ordenar ↓</button>
<button id="sortAsc" class="sort-button">Ordenar ↑</button>
</div>
<div class="card-container" id="cardContainer">
${DATOS.map(persona => html`
<div class="card">
<!-- MODAL -->
${persona.extra1 || persona.extra2 || persona.extra3 || persona.extra4 ? html`
<button class="info-button" data-id="${persona.id}">+</button>
` : ''}
<!-- LOGO -->
<div class="logo-section">
<img src="${persona.logo}" alt="Logo" class="logo-img">
</div>
<!-- NOMBRE Y FEDERACIÓN -->
<div class="info-section">
<div class="nombre">${persona.nombre}</div>
<div class="federacion">${persona.genero} ${persona.federacion}</div>
</div>
<!-- SALARIO -->
<div class="highlight-section">
<div class="salario">${persona.salario} €</div>
</div>
<!-- AÑO -->
<div class="info-extra">
<div class="año"><a href="${persona.enlace}" target="_blank">Salario bruto relativo a ${persona.año}</a></div>
</div>
<!-- LÍNEA SEPARADORA -->
<div class="divider"></div>
<!-- FINANCIACIÓN -->
<div class="final-info">
<div class="financiacion">Financiación pública: ${persona.financiacion}</div>
</div>
</div>
`)}
</div>
</div>
`;
};