{# Add/edit target modal. Driven by HTMX. Pass `_target` for edit mode,
   `error` (string) for inline validation feedback. #}
<div id="plan-modal-backdrop"
     class="fixed inset-0 bg-overlay-strong z-50 flex items-center justify-center p-4"
     onclick="if (event.target === this) this.remove();">
  <div class="bg-surface rounded-lg shadow-xl w-full max-w-md p-5"
       style="border:0.5px solid var(--color-hairline);">
    <div class="flex justify-between items-start mb-4">
      <h3 class="text-[15px] font-semibold">{% if _target %}Edit target{% else %}Add target{% endif %}</h3>
      <button type="button" class="text-label-2 text-2xl leading-none"
              onclick="document.getElementById('plan-modal-backdrop').remove()">&times;</button>
    </div>

    {% if error %}
      <div class="text-[12px] text-neg mb-3">{{ error }}</div>
    {% endif %}

    <form hx-post="/positions/plan/target"
          hx-target="#plan-body" hx-swap="outerHTML"
          hx-on::after-request="if (event.detail.successful) document.getElementById('plan-modal-backdrop').remove()"
          class="space-y-3">
      <div>
        <label class="label-uc text-[10px] text-label-2 block mb-1">Symbol</label>
        <input type="text" name="symbol" required
               value="{{ _target.symbol if _target else '' }}"
               {% if _target %}readonly{% endif %}
               class="w-full px-2 py-[6px] text-[13px] rounded-md font-mono"
               style="background:var(--color-surface); border:0.5px solid var(--color-hairline); color:var(--color-text);"
               placeholder="e.g. HIMS">
      </div>

      <div>
        <label class="label-uc text-[10px] text-label-2 block mb-1">Target type</label>
        <div class="flex gap-2">
          <label class="flex-1 px-3 py-[6px] rounded-md text-center text-[12px] cursor-pointer"
                 style="border:0.5px solid var(--color-hairline);">
            <input type="radio" name="target_unit" value="usd" class="mr-1"
                   {% if not _target or _target.target_unit.value == 'usd' %}checked{% endif %}>
            Dollar amount
          </label>
          <label class="flex-1 px-3 py-[6px] rounded-md text-center text-[12px] cursor-pointer"
                 style="border:0.5px solid var(--color-hairline);">
            <input type="radio" name="target_unit" value="shares" class="mr-1"
                   {% if _target and _target.target_unit.value == 'shares' %}checked{% endif %}>
            Share count
          </label>
        </div>
      </div>

      <div>
        <label class="label-uc text-[10px] text-label-2 block mb-1">Amount</label>
        <input type="number" name="target_amount" step="any" min="0.01" required
               value="{{ '%.10g'|format(_target.target_amount|float) if _target else '' }}"
               class="w-full px-2 py-[6px] text-[13px] rounded-md num"
               style="background:var(--color-surface); border:0.5px solid var(--color-hairline); color:var(--color-text);"
               placeholder="1000">
      </div>

      <div>
        <label class="label-uc text-[10px] text-label-2 block mb-1">Tags</label>
        <input type="text" name="tags"
               value="{% if _target and _target.tags %}{{ _target.tags|join(', ') }}{% endif %}"
               class="w-full px-2 py-[6px] text-[13px] rounded-md"
               style="background:var(--color-surface); border:0.5px solid var(--color-hairline); color:var(--color-text);"
               placeholder="core, income, watch"
               list="all-tags-datalist">
        <datalist id="all-tags-datalist">
          {% for t in (all_tags or []) %}<option value="{{ t }}"></option>{% endfor %}
        </datalist>
        <div class="text-[10px] text-label-3 mt-1">Comma-separated. Lowercased on save.</div>
      </div>

      <div class="flex justify-end gap-2 pt-2">
        <button type="button"
                class="px-3 py-[6px] text-[12px] rounded-md"
                style="border:0.5px solid var(--color-hairline);"
                onclick="document.getElementById('plan-modal-backdrop').remove()">Cancel</button>
        <button type="submit"
                class="px-3 py-[6px] text-[12px] rounded-md font-semibold text-white"
                style="background:var(--color-accent);">Save target</button>
      </div>
    </form>
  </div>
</div>