{% load shared %}
<turbo-frame id="tag-modal">
<form method="post"
      action="{% url 'linkding:tags.merge' %}"
      data-turbo-frame="_top"
      novalidate>
  {% csrf_token %}
  <ld-modal class="modal active"
            data-close-url="{% url 'linkding:tags.index' %}"
            data-turbo-frame="tag-modal">
    <div class="modal-overlay" data-close-modal></div>
    <div class="modal-container" role="dialog" aria-modal="true">
      {% include 'shared/modal_header.html' with title="Merge Tags" %}
      <div class="modal-body">
        <details class="mb-4">
          <summary>
            <span class="text-bold mb-1">How to merge tags</span>
          </summary>
          <ol>
            <li>Enter the name of the tag you want to keep</li>
            <li>Enter the names of tags to merge into the target tag</li>
            <li>The target tag is added to all bookmarks that have any of the merge tags</li>
            <li>The merged tags are deleted</li>
          </ol>
        </details>
        <div class="form-group">
          {% formlabel form.target_tag "Target tag" %}
          {% formfield form.target_tag has_help=True %}
          {% formhelp form.target_tag %}
            Enter the name of the tag you want to keep. The tags entered below will be merged into this one.
          {% endformhelp %}
          {{ form.target_tag.errors }}
        </div>
        <div class="form-group">
          {% formlabel form.merge_tags "Tags to merge" %}
          {% formfield form.merge_tags has_help=True %}
          {% formhelp form.merge_tags %}
            Enter the names of tags to merge into the target tag, separated by spaces.
            These tags will be deleted after merging.
          {% endformhelp %}
          {{ form.merge_tags.errors }}
        </div>
      </div>
      <div class="modal-footer d-flex justify-between">
        <button type="button" class="btn btn-wide" data-close-modal>Cancel</button>
        <button type="submit" class="btn btn-primary btn-wide">Merge Tags</button>
      </div>
    </div>
  </ld-modal>
</form>
</turbo-frame>
