extension/sidebar/components/WorkflowCard.js

export function WorkflowCard(taskId, optionId, mode, steps, ownerInvolvement, selectedOption) {
  const isSelected = selectedOption === optionId;
  return `
    <button
      class="workflow-card ${isSelected ? "workflow-card-selected" : ""}"
      data-task-id="${taskId}"
      data-workflow-option="${optionId}"
      aria-pressed="${isSelected ? "true" : "false"}"
    >
      <div class="workflow-card-topline">
        <p class="workflow-kicker">Option ${optionId}</p>
        <span class="selection-indicator ${isSelected ? "selection-indicator-on" : ""}">${isSelected ? "Selected" : "Pick"}</span>
      </div>
      <h3>${mode}</h3>
      <ul>
        ${steps.map((step) => `<li>${step}</li>`).join("")}
      </ul>
      <p class="muted workflow-owner">Owner touch: ${ownerInvolvement}</p>
    </button>
  `;
}