{% extends "base.html" %} {% block title %}{{ view.project_name }} - towelie
options{% endblock %} {% block body %}
<main class="mx-auto w-full max-w-3xl px-6 py-8" data-controller="options">
  <div class="mb-6 flex items-center gap-4">
    <h1 class="towelie-wordmark text-2xl text-[var(--color-accent)]">Options</h1>
    <a
      href="/"
      class="rounded-md px-2 py-1 text-xs text-[var(--color-text-faint)] transition-colors hover:bg-[var(--color-paper-dim)] hover:text-[var(--color-text)]"
      >Back to review</a
    >
  </div>

  <form
    class="space-y-6 rounded-xl border border-[var(--color-paper-line)] bg-[var(--color-paper)] p-6 shadow-[0_12px_28px_rgba(49,40,25,0.07)]"
    data-action="submit->options#save"
  >
    <div class="flex flex-col gap-2">
      <label
        for="prompt-template"
        class="text-[10px] font-medium tracking-[0.14em] text-[var(--color-text-faint)] uppercase"
        >AI review prompt template</label
      >
      <p class="text-xs text-[var(--color-text-dim)]">
        Available placeholders: <code>{% raw %}{{comments}}{% endraw %}</code>,
        <code>{% raw %}{{branch}}{% endraw %}</code>,
        <code>{% raw %}{{comment_count}}{% endraw %}</code>,
        <code>{% raw %}{{commit_ref}}{% endraw %}</code>,
        <code>{% raw %}{{commit_sha}}{% endraw %}</code>,
        <code>{% raw %}{{review_scope}}{% endraw %}</code>.
      </p>
      <textarea
        id="prompt-template"
        data-options-target="promptTemplate"
        rows="8"
        class="towelie-input w-full px-3 py-2 text-sm"
      ></textarea>
    </div>

    <div class="flex flex-col gap-2">
      <label
        for="comment-output-mode"
        class="text-[10px] font-medium tracking-[0.14em] text-[var(--color-text-faint)] uppercase"
        >Copied comment format</label
      >
      <select
        id="comment-output-mode"
        data-options-target="commentOutputMode"
        class="towelie-input towelie-select w-full px-3 py-2 text-sm"
      >
        <option value="line_numbers">Line numbers + comment</option>
        <option value="selected_lines">Selected lines + comment</option>
      </select>
    </div>

    <div class="flex flex-col gap-2">
      <label
        for="diff-style"
        class="text-[10px] font-medium tracking-[0.14em] text-[var(--color-text-faint)] uppercase"
        >Diff style</label
      >
      <select
        id="diff-style"
        data-options-target="diffStyle"
        class="towelie-input towelie-select w-full px-3 py-2 text-sm"
      >
        <option value="two_sides">Two sides</option>
        <option value="inline">Inline</option>
      </select>
    </div>

    <div class="flex items-center gap-3">
      <button
        type="submit"
        data-options-target="saveButton"
        class="rounded-lg bg-[var(--color-accent)] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[var(--color-accent-ink)] disabled:cursor-not-allowed disabled:bg-[var(--color-accent)]/50"
      >
        Save options
      </button>
      <span data-options-target="status" class="text-sm text-[var(--color-text-dim)]"></span>
    </div>
  </form>
</main>
{% endblock %}