export function renderCardioItem(workoutId, c, isReadOnly = false) {
    const card = document.createElement('div');
    card.className = 'card';
    const purposeLabels = { warmup: '🔥 Разминка', cooldown: '🧘 Заминка', separate: '➕ Отдельная' };
    const metrics = [];
    if (c.duration) metrics.push(`${c.duration} мин`);
    if (c.distance) metrics.push(`${c.distance} км`);
    if (c.speed) metrics.push(`${c.speed} км/ч`);
    if (c.incline) metrics.push(`наклон ${c.incline}`);
    if (c.resistance) metrics.push(`сопр. ${c.resistance}`);

    const actionsHtml = isReadOnly ? '' : `
        <div class="set-actions">
            <button class="icon-btn" onclick="CL.editCardio('${workoutId}', '${c.id}')">✎</button>
            <button class="icon-btn danger" onclick="CL.deleteCardio('${workoutId}', '${c.id}')">✕</button>
        </div>
    `;

    card.innerHTML = `
        <div style="display:flex; justify-content:space-between; align-items:flex-start;">
            <div>
                <div style="font-weight:600;">${c.type || '—'} ${purposeLabels[c.purpose] || ''}</div>
                <div class="text-small text-muted">${metrics.join(' • ') || '—'}</div>
                ${c.notes ? `<div class="text-small" style="margin-top:4px;">"${c.notes}"</div>` : ''}
            </div>
            ${actionsHtml}
        </div>
    `;
    return card;
}