export function CustomTaskInput({ value }) {
  return `
    <section class="screen-card">
      <div class="screen-intro">
        <p class="step-label">Step 3</p>
        <h2>Add one custom instruction</h2>
      </div>
      <label class="field-label" for="flowpilot-custom-rule">Custom rule</label>
      <input
        id="flowpilot-custom-rule"
        class="text-input"
        value="${escapeAttribute(value)}"
        placeholder="Optional"
      />
      <div class="button-row split-actions">
        <button id="flowpilot-back-button" class="ghost-button">Back</button>
        <button id="flowpilot-skip-rule" class="ghost-button">Skip</button>
        <button id="flowpilot-save-rule" class="primary-button">Continue</button>
      </div>
    </section>
  `;
}

function escapeAttribute(value) {
  return String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;");
}