{% load i18n %}

{% trans "Forms" %}

{% trans "Composable form primitives. Combine " %}dcr-form{% trans ", " %}dcr-form__row{% trans ", " %}dcr-field{% trans ", " %}dcr-input{% trans " / " %}dcr-select{% trans ", and " %}dcr-input-group{% trans " to build any panel form." %}

{% trans "Plain input and select" %}

{% trans "Search + filter form" %}

{% trans "Usage" %}

<!-- Plain input -->
<div class="dcr-field">
  <label class="dcr-field__label" for="name">Queue name</label>
  <input id="name" class="dcr-input" type="text" placeholder="e.g. celery">
</div>

<!-- Select -->
<div class="dcr-field">
  <label class="dcr-field__label" for="state">State</label>
  <select id="state" class="dcr-select"><option>All states</option></select>
</div>

<!-- Search + button (input group) -->
<div class="dcr-form__group">
  <label class="dcr-form__label" for="q">Search by task name or ID</label>
  <div class="dcr-form__row--stretch">
    <div class="dcr-input-group">
      <svg class="dcr-input-group__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
      <input id="q" class="dcr-input-group__input" type="text" placeholder="e.g. send_order_email">
    </div>
    <button type="submit" class="dcr-btn dcr-btn--primary">Search</button>
  </div>
</div>

<!-- Full search + filter form -->
<form class="dcr-form">
  <div class="dcr-form__group">
    <label class="dcr-form__label" for="q">Search by task name or ID</label>
    <div class="dcr-form__row--stretch">
      <div class="dcr-input-group">…</div>
      <button class="dcr-btn dcr-btn--primary">Search</button>
    </div>
  </div>
  <div class="dcr-form__row">
    <div class="dcr-field">
      <label class="dcr-field__label" for="state">▿ State</label>
      <select id="state" class="dcr-select"><option>All states</option></select>
    </div>
  </div>
</form>

{% trans "Inline Edit" %}

{% trans "Edit a single value in place without navigating to a full change form. Useful for TTLs, retry counts, or short string values. Wrap the input in " %}dcr-inline-edit__field{% trans " to add a left-side icon." %}

{# With left icon #}

{% trans "Usage" %}

<!-- Wrap input + icon in dcr-inline-edit__field -->
<span class="dcr-inline-edit">
  <span class="dcr-inline-edit__field">
    <svg class="dcr-inline-edit__icon" ...>...</svg>
    <input class="dcr-inline-edit__input" type="text" value="86400">
  </span>
  <button class="dcr-inline-edit__btn">✓</button>
  <button class="dcr-inline-edit__btn dcr-inline-edit__btn--danger">✕</button>
</span>