{% extends "base.html" %}
{% from "_macros.html" import icon %}
{#
  What a folder hands to the chats started inside it.

  A page rather than a panel in the sidebar, following the admin convention:
  compact rows, and the full form one click away. A form per folder row in a
  tree that nests eight deep would be unusable, and the sidebar is the one
  place in the application that has to stay scannable.

  The whole form is one PATCH at the route that already existed. Every field is
  clearable, because `update_folder` reads the raw form and checks key presence
  rather than declaring `Form(None)` parameters -- with those, an empty box and
  an absent one are the same request.
#}

{% block title %}{{ folder.name }} - LLeMbas{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
{% endblock %}

{% block body_attrs %} data-authenticated="true"{% endblock %}

{% block body %}
<div class="shell">
  {% include "partials/sidebar.html" %}

  <main class="main">
    <header class="topbar">
      <h1 class="topbar__title">
        {{ icon("folder", "icon--sm") }}
        <span>{{ folder.name }}</span>
      </h1>
      <span class="spacer"></span>
      <a class="btn btn--sm" href="/chat?folder={{ folder.id }}">
        {{ icon("plus", "icon--sm") }} New chat here
      </a>
    </header>

    {#
      `.admin-scroll` is what scrolls, not `.page`. `.main` is a flex column
      with `min-height: 0`, so a `.page` dropped straight into it overflows the
      viewport with nothing to scroll -- Save and Back end up somewhere below
      the bottom of the window, reachable only by zooming out. Every other page
      of this shape already wraps its content this way; this one did not.
    #}
    <div class="admin-scroll">
    <div class="page">
      <form hx-patch="/api/folders/{{ folder.id }}" hx-swap="none">
        <div class="card">
          <h2 class="card__title">Name</h2>
          <div class="field">
            <input class="input" type="text" name="name" maxlength="200"
                   value="{{ folder.name }}" aria-label="Folder name" required>
          </div>
          <div class="field">
            <label class="field__label" for="folder-description">Description</label>
            <input class="input" type="text" id="folder-description" name="description"
                   maxlength="500" value="{{ folder.description }}"
                   placeholder="What this folder is for.">
            <p class="field__hint">
              For you, not for any model. It is never sent anywhere.
            </p>
          </div>
        </div>

        <div class="card">
          <h2 class="card__title">System prompt</h2>
          <p class="card__lede">
            Used by every chat in this folder, and by folders nested inside it,
            unless the chat has a prompt of its own. Read each time a reply is
            built rather than copied when a chat is made, so editing this
            reaches the chats already here.
          </p>
          <div class="field">
            <textarea class="textarea" name="system_prompt" rows="8"
                      aria-label="System prompt"
                      placeholder="Leave empty to fall through to the model's prompt, then the instance's.">{{ folder.system_prompt }}</textarea>
            <p class="field__hint">
              Precedence, not concatenation: chat, then folder, then model, then
              instance. The most specific one wins outright.
            </p>
          </div>
        </div>

        <div class="card">
          <h2 class="card__title">What a new chat starts as</h2>
          <p class="card__lede">
            Seeds, copied onto a chat when it is created and its own from then
            on. Anything chosen on the new-chat screen wins over these.
          </p>

          <div class="field">
            <label class="field__label" for="folder-model">Model</label>
            <select class="select" id="folder-model" name="model_id">
              <option value="">No opinion</option>
              {% for model in models %}
              <option value="{{ model.model_id }}"
                      {{ 'selected' if model.model_id == folder.model_id }}>
                {{ model.label }}
              </option>
              {% endfor %}
            </select>
          </div>

          <div class="field">
            <label class="field__label" for="folder-kind">Kind</label>
            <select class="select" id="folder-kind" name="kind">
              <option value="" {{ 'selected' if not folder.kind }}>No opinion</option>
              <option value="chat" {{ 'selected' if folder.kind == 'chat' }}>Chat</option>
              <option value="agent" {{ 'selected' if folder.kind == 'agent' }}>Agent chat</option>
            </select>
            <p class="field__hint">
              A folder set to one kind shows on only that side of the sidebar's
              switch, and opens the new-chat screen already on that fork.
            </p>
          </div>

          {% if agent_profiles %}
          {# Only meaningful for an agent chat, and shown regardless of the kind
             above: somebody filling this in is on their way to setting the kind
             too, and a field that appears only once another field is right is a
             field people conclude is missing. #}
          <div class="field">
            <label class="field__label" for="folder-profile">Connection</label>
            <select class="select" id="folder-profile" name="ssh_profile_id">
              <option value="">No opinion</option>
              {% for profile in agent_profiles %}
              <option value="{{ profile.id }}"
                      {{ 'selected' if profile.id == folder.ssh_profile_id }}>
                {{ profile.name }}
              </option>
              {% endfor %}
            </select>
          </div>

          {# A button and a hidden field, not a text box -- the same shape the
             new-chat screen uses, and for the same reason it gives there: a
             path is something you would rather find than spell. `data-dir-field`
             is what wires it; see ui.js. #}
          <div class="field" data-dir-field>
            <span class="field__label">Project directory</span>
            <input type="hidden" name="project_dir"
                   value="{{ folder.project_dir }}" data-dir-value>
            <div class="dir-row">
              <button class="btn" type="button" data-dir-browse
                      aria-label="Choose the project directory">
                {{ icon("folder", "icon--sm") }}
                <span class="dir-row__path" data-dir-label>
                  {{ folder.project_dir or "the connection's own default" }}
                </span>
              </button>
              {# Always here, not only when something is stored: browsing to a
                 directory and then changing your mind before saving needs a way
                 back to "no opinion" as much as clearing a saved one does. #}
              <button class="btn btn--icon" type="button" data-dir-clear
                      aria-label="Clear the project directory" title="No opinion">
                {{ icon("x", "icon--sm") }}
              </button>
            </div>
            <p class="field__hint">
              What a relative path is measured from in chats started here.
            </p>
          </div>

          {% if agent_modes %}
          <div class="field">
            <label class="field__label" for="folder-mode">Approval mode</label>
            <select class="select" id="folder-mode" name="agent_mode">
              <option value="">No opinion</option>
              {% for value, label, hint in agent_modes %}
              <option value="{{ value }}" title="{{ hint }}"
                      {{ 'selected' if value == folder.agent_mode }}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>
          {% endif %}
          {% endif %}
        </div>

        <div class="form-actions">
          <button class="btn btn--primary" type="submit">
            {{ icon("check", "icon--sm") }} Save
          </button>
          <a class="btn" href="/chat">Back</a>
        </div>
      </form>
    </div>
    </div>
  </main>
</div>
{% endblock %}