export function renderSetRow(workoutId, exerciseId, set, index, isReadOnly = false) {
    const row = document.createElement('div');

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

    if (set.isDropset && set.subSets && set.subSets.length > 0) {
        row.className = 'dropset-group';
        const subsText = set.subSets.map(s => `${s.weight}×${s.reps}`).join(' → ');
        const ratingStars = '★'.repeat(set.rating || 3);
        row.innerHTML = `
            <div class="set-row" style="grid-template-columns: 30px 1fr auto ${isReadOnly ? '0' : 'auto'};">
                <div class="set-number">${index + 1}</div>
                <div class="set-cell dropset">🔥 ${subsText}</div>
                <div class="set-rating">${ratingStars}</div>
                ${actionsHtml}
            </div>
        `;
    } else {
        row.innerHTML = `
            <div class="set-row">
                <div class="set-number">${index + 1}</div>
                <div class="set-cell">${set.weight || '—'} кг</div>
                <div class="set-cell">${set.reps || '—'}</div>
                <div class="set-rating">${'★'.repeat(set.rating || 3)}</div>
                ${actionsHtml}
            </div>
        `;
    }
    return row;
}