{% extends "ui3/base.html" %}
{% block title %}Workspaces – BioQueue{% endblock %}
{% block content %}
<div class="page-head flex items-center justify-between mb-4">
  <div class="min-w-0">
    <h1 class="text-2xl font-semibold">Workspaces</h1>
    <p class="text-sm opacity-70 page-head-sub">Group jobs into named workspaces</p>
  </div>
</div>

<form id="workspace-filters" class="filter-bar flex flex-wrap gap-2 mb-4"
      hx-get="{% url 'ui3:workspaces' %}"
      hx-target="#workspace-table"
      hx-swap="outerHTML"
      hx-push-url="true"
      hx-include="#page-size-select"
      hx-trigger="submit, input delay:400ms, change">
  <input class="input input-bordered input-sm flex-1" type="text" name="q" value="{{ q }}" placeholder="Search by name, description, or id">
  <button class="btn btn-sm" type="submit">Search</button>
</form>

{% include "ui3/workspaces/_table.html" %}

<div class="card bg-base-100 shadow-sm p-5 mt-6">
  <h2 class="text-lg font-semibold">Add workspace</h2>
  <p class="text-sm opacity-70 mb-4">Name a workspace to group jobs on the job monitor and create page.</p>
  <form method="post" action="{% url 'ui3:workspace_create' %}"
        hx-post="{% url 'ui3:workspace_create' %}"
        hx-target="#workspace-table"
        hx-swap="outerHTML"
        hx-sync="#workspace-filters:replace"
        hx-on::after-request="if(event.detail.successful) this.reset()">
    {% csrf_token %}
    <label class="form-control">
      <div class="label"><span class="label-text">Name</span></div>
      <input class="ui-input w-full" name="name" maxlength="255" placeholder="RNA-seq 2026" required autocomplete="off">
    </label>
    <label class="form-control mt-4">
      <div class="label">
        <span class="label-text">Description</span>
        <span class="label-text-alt">optional</span>
      </div>
      <textarea class="ui-input w-full" name="description" rows="3" placeholder="Primary analysis workspace for this project"></textarea>
    </label>
    <div class="mt-4 flex justify-end">
      <button class="ui-btn ui-btn-primary" type="submit">Create workspace</button>
    </div>
  </form>
</div>
{% endblock %}