{% macro tag_picker(all_tag_groups, selected_ids, dialog_id, field_name="tag_ids", title="انتخاب تگ‌ها", trigger_label="🏷 انتخاب تگ‌ها", form_action=None) %}
<div class="tag-picker-trigger">
  <button type="button" class="btn btn-ghost" onclick="document.getElementById('{{ dialog_id }}').showModal()">{{ trigger_label }}</button>
  <span class="muted tag-summary-{{ dialog_id }}">
    {{ selected_ids|length }} تگ انتخاب شد
  </span>
</div>

<dialog id="{{ dialog_id }}" class="tag-picker-dialog">
  {% if form_action %}<form method="post" action="{{ form_action }}">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">{% endif %}
  <div class="tag-picker-header">
    <span class="subtitle">{{ title }}</span>
    <div class="spacer"></div>
    <button type="button" class="btn btn-ghost" onclick="document.getElementById('{{ dialog_id }}').close()">✕</button>
  </div>
  <div class="tag-picker-body">
    {% for group in all_tag_groups %}
      {% if group.tags %}
      <div>
        <div class="tag-picker-group-title">{{ group.category.name }}</div>
        <div class="tag-picker-chips">
          {% for tag in group.tags %}
          <label class="tag-picker-chip">
            <input type="checkbox" name="{{ field_name }}" value="{{ tag.id }}"
                   {% if tag.id|string in selected_ids %}checked{% endif %}
                   onchange="noorUpdateTagSummary('{{ dialog_id }}')">
            <span>{{ tag.name }}</span>
          </label>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    {% endfor %}
  </div>
  <div class="tag-picker-footer">
    {% if form_action %}
    <button type="submit" class="btn btn-gold">✓ ذخیره تگ‌ها</button>
    {% else %}
    <button type="button" class="btn btn-gold" onclick="document.getElementById('{{ dialog_id }}').close()">✓ تایید</button>
    {% endif %}
  </div>
  {% if form_action %}</form>{% endif %}
</dialog>
{% endmacro %}