{% extends "base.html" %}
{% import "icons.html" as icons %}
{% block title %}{{ view.project_name }} - towelie{%
endblock %} {% block html_class %}overflow-hidden{% endblock %} {% block
body_class %}overflow-hidden{% endblock %} {% block body %}
<div
  class="towelie-app-shell flex h-screen overflow-hidden"
  data-controller="review"
  data-review-target="shell"
>
  <aside
    class="towelie-sidebar flex h-full w-[220px] shrink-0 flex-col border-r border-[var(--color-paper-line)] bg-[var(--color-paper)]"
    data-review-target="sidebar"
  >
    <div class="border-b border-[var(--color-paper-line)] p-3">
      <div class="mb-2 flex items-center justify-between">
        <span
          class="text-[10px] font-medium tracking-[0.14em] text-[var(--color-text-faint)] uppercase"
          >Review message</span
        >
        <span
          class="font-mono text-[10px] text-[var(--color-text-faint)]"
          data-review-target="commentCount"
          >0 notes</span
        >
      </div>
      <textarea
        rows="3"
        placeholder="Overall thoughts on this diff…"
        class="towelie-input w-full resize-none rounded-md px-2.5 py-2 text-[11px]"
        data-review-target="submitNotes"
      ></textarea>
      <button
        class="mt-2 flex w-full items-center justify-center gap-1.5 rounded-md bg-[var(--color-accent)] px-3 py-2 text-[11px] font-medium text-white transition-colors hover:bg-[var(--color-accent-ink)]"
        type="button"
        data-action="review#finishReview"
      >
        {{ icons.submit_review_icon() }}
        Submit review
      </button>
    </div>

    <div class="flex items-center justify-between border-b border-[var(--color-paper-line)] px-3 py-2">
      <span
        class="text-[10px] font-medium tracking-[0.14em] text-[var(--color-text-faint)] uppercase"
        >Changed files</span
      >
      <span
        class="rounded-full bg-[var(--color-paper-dim)] px-1.5 py-0.5 font-mono text-[10px] text-[var(--color-text-faint)]"
        data-review-target="fileCount"
        >0</span
      >
    </div>

    <nav
      class="towelie-file-tree min-h-0 flex-1 overflow-y-auto py-1"
      data-review-target="fileExplorer"
    ></nav>

    <div class="border-t border-[var(--color-paper-line)] p-2">
      <button
        class="flex w-full items-center justify-center gap-1.5 rounded-md py-1 text-[10px] text-[var(--color-text-faint)] transition-colors hover:bg-[var(--color-paper-dim)] hover:text-[var(--color-text-dim)]"
        type="button"
        data-action="review#toggleSidebar"
      >
        {{ icons.collapse_sidebar_icon() }}
        Collapse
      </button>
    </div>
  </aside>

  <button
    type="button"
    class="towelie-sidebar-strip hidden h-full w-7 shrink-0 border-r border-[var(--color-paper-line)] bg-[var(--color-paper)] text-[var(--color-text-faint)] transition-colors hover:bg-[var(--color-paper-dim)]"
    data-action="review#toggleSidebar"
    data-review-target="sidebarStrip"
    aria-label="Expand sidebar"
  >
    {{ icons.expand_sidebar_icon() }}
  </button>

  <main class="min-w-0 flex-1 overflow-y-auto" data-review-target="mainScroll">
    <header class="border-b border-[var(--color-paper-line)] bg-[var(--color-paper)] px-4 py-2">
      <div class="mb-2 flex items-center gap-3">
        <span class="towelie-wordmark text-[17px] text-[var(--color-accent)]"
          >towelie</span
        >
        <span class="h-5 w-px bg-[var(--color-paper-line)]"></span>
        <a
          href="/options"
          class="rounded-md px-2 py-1 text-[11px] text-[var(--color-text-faint)] transition-colors hover:bg-[var(--color-paper-dim)] hover:text-[var(--color-text)]"
          >Options</a
        >
      </div>
      <div class="flex flex-wrap items-center gap-3">
        <div class="flex items-center gap-2">
          <label
            class="text-[10px] tracking-[0.14em] text-[var(--color-text-faint)] uppercase"
            >Branch</label
          >
          <select
            data-action="review#reloadReview"
            data-review-target="branchSelect"
            class="towelie-input towelie-select min-w-44 px-2 py-1.5 font-mono text-[12px]"
          >
            <option value="">Current branch</option>
          </select>
        </div>
        <div class="flex items-center gap-2">
          <label
            class="text-[10px] tracking-[0.14em] text-[var(--color-text-faint)] uppercase"
            >Base</label
          >
          <select
            data-action="review#reloadReview"
            data-review-target="baseBranchSelect"
            class="towelie-input towelie-select min-w-32 px-2 py-1.5 font-mono text-[12px]"
          ></select>
        </div>
        <div class="flex items-center gap-2">
          <label
            class="text-[10px] tracking-[0.14em] text-[var(--color-text-faint)] uppercase"
            >Commit</label
          >
          <select
            data-action="review#reloadReview"
            data-review-target="commitSelect"
            class="towelie-input towelie-select max-w-[360px] min-w-56 px-2 py-1.5 font-mono text-[11px]"
          ></select>
        </div>
        <button
          type="button"
          class="h-8 w-8 rounded-md border border-[var(--color-paper-line)] text-[13px] text-[var(--color-text-faint)] transition-colors hover:border-[var(--color-text-faint)] hover:text-[var(--color-text)] disabled:cursor-not-allowed disabled:opacity-50"
          data-action="review#refreshDiff"
          title="Refresh diff"
          aria-label="Refresh diff"
        >
          ↻
        </button>
      </div>
    </header>

    <section
      class="border-b border-[var(--color-paper-line)] bg-[var(--color-paper)] px-4 py-2"
      data-controller="checks"
    >
      <div class="mb-1 flex items-center gap-2">
        <span
          class="text-[10px] font-medium tracking-[0.14em] text-[var(--color-text-faint)] uppercase"
          >Checks</span
        >
        <span
          data-checks-target="status"
          class="text-xs text-[var(--color-text-faint)]"
          >loading…</span
        >
        <button
          class="ml-auto text-[11px] text-[var(--color-text-faint)] transition-colors hover:text-[var(--color-text)]"
          type="button"
          data-action="checks#copyOutput"
        >
          Copy
        </button>
        <button
          class="text-[var(--color-text-faint)] transition-colors hover:text-[var(--color-text)]"
          type="button"
          data-action="checks#refresh"
        >
          ↻
        </button>
      </div>
      <pre
        data-checks-target="output"
        class="towelie-check-output rounded-md border border-[var(--color-paper-line)] bg-[var(--color-surface-recessed)] p-2 font-mono text-[11px] whitespace-pre-wrap text-[var(--color-text-dim)] empty:hidden"
      ></pre>
    </section>

    <section class="py-2">
      <div class="w-full" data-review-target="output"></div>
    </section>
  </main>
</div>
{% endblock %}