<!-- Search commands modal -->
<div class="modal fade" id="searchCommandsModal" tabindex="-1" role="dialog" aria-labelledby="searchCommandsModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'mautic.core.close' | trans }}">
          <span aria-hidden="true">&times;</span>
        </button>
        <p class="modal-title" id="searchCommandsModalLabel">
          {{ "mautic.core.help.searchcommands.title" | trans }}
        </p>
      </div>
      <div class="modal-body modal-scroll-content">
        <div class="row">        
          <h4 class="fw-sb mb-sm mt-md pi-md">{{ 'mautic.core.searchcommands.heading.operators'|trans }}</h4>
          <div class="text-helper mb-md pi-md">
            {{'mautic.core.searchcommands.heading.operators.description'|trans}}</div>
          <ul class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
            <!-- General operators -->
            <li class="panel">
              <a role="button" id="headingSearchOperators" class="accordion-heading collapsed" data-toggle="collapse"
                data-parent="#accordion" href="#collapseSearchOperators" aria-expanded="false"
                aria-controls="collapseSearchOperators">
                <i class="ri-arrow-down-s-line accordion-arrow"></i>
                <span class="accordion-title">{{ 'mautic.core.searchcommands.operators'|trans }}</span>
              </a>

              <div id="collapseSearchOperators" class="collapse accordion-wrapper" role="tabpanel"
                aria-labelledby="headingSearchOperators">
                <div class="accordion-content">
                  <p><code>+term</code>: {{ 'mautic.core.searchcommands.operators.exact_term'|trans|raw }}</p>
                  <p><code>!term</code>: {{ 'mautic.core.searchcommands.operators.exclude_terms'|trans|raw }}</p>
                  <p><code>"phrase"</code>: {{ 'mautic.core.searchcommands.operators.exact_phrase'|trans|raw }}</p>
                  <p><code>(term1 OR term2)</code>: {{ 'mautic.core.searchcommands.operators.grouping'|trans|raw }}</p>
                  <p><code>term1 OR term2</code>: {{ 'mautic.core.searchcommands.operators.multiple_terms'|trans|raw }}
                  </p>
                  <p><code>%term%</code>: {{ 'mautic.core.searchcommands.operators.wildcard'|trans|raw }}</p>
                </div>
              </div>
            </li>
          </ul>

          <h4 class="fw-sb mb-sm mt-32 pi-md">{{ 'mautic.core.searchcommands.heading.commands'|trans }}</h4>
          <div class="text-helper mb-md pi-md">{{'mautic.core.searchcommands.heading.commands.description'|trans}}</div>

          {% set searchCommands = searchCommandList() %}

          {% set commandGroups = {
              'identification': ['ids', 'name', 'email'],
              'interactions': ['email_sent', 'email_read', 'email_queued', 'email_pending'],
              'filters': []
          } %}

          {% set specialFormats = {
              'category': '{category alias}',
              'ids': 'ID1,ID2',
              'type': '{type name}',
              'lang': '{lang code}',
              'common': '{segment_alias} + {segment_alias} + ...',
              'email_sent': 'EMAIL_ID',
              'email_read': 'EMAIL_ID',
              'email_queued': 'EMAIL_ID',
              'email_pending': 'EMAIL_ID',
              'segment': '{segment_alias}'
          } %}

          <ul id="specificCommandsAccordion" class="accordion">
          {% for section, commands in searchCommands %}
              {% set sectionId = section|replace({'.': '_'})|lower %}
              <li class="panel">
                  <a role="button" id="heading{{ sectionId|capitalize }}" class="accordion-heading collapsed" data-toggle="collapse"
                    data-parent="#specificCommandsAccordion" href="#collapse{{ sectionId|capitalize }}" aria-expanded="false" aria-controls="collapse{{ sectionId|capitalize }}">
                      <i class="ri-arrow-down-s-line accordion-arrow"></i>
                      <span class="accordion-title">{{ section|trans }}</span>
                  </a>

                  <div id="collapse{{ sectionId|capitalize }}" class="collapse accordion-wrapper" role="tabpanel" aria-labelledby="heading{{ sectionId|capitalize }}">
                      <div class="accordion-content">
                          {% for groupName, groupCommands in commandGroups %}
                              {% if groupName != 'filters' %}
                                  {% set groupedCommands = commands|filter(command => command|trans|split(':')|first in groupCommands) %}
                              {% else %}
                                  {% set groupedCommands = commands|filter(command => command|trans|split(':')|first not in commandGroups.identification and command|trans|split(':')|first not in commandGroups.interactions) %}
                              {% endif %}

                              {% if groupedCommands|length > 0 %}
                                  <p class="fw-b mb-sm mt-md">{{ ('searchcommand.group.' ~ groupName)|trans }}</p>
                                  {% for command in groupedCommands %}
                                      {% set commandCode = command|trans %}
                                      {% set descriptionKey = command ~ '.description' %}
                                      {% if ':' in commandCode %}
                                          {# Command already has a specific format, leave as is #}
                                      {% else %}
                                          {% set commandBase = commandCode|split(' ')|first %}
                                          {% if commandBase in specialFormats|keys %}
                                              {% set commandCode = commandBase ~ ':' ~ specialFormats[commandBase] %}
                                          {% else %}
                                              {% set commandCode = commandCode ~ ':*' %}
                                          {% endif %}
                                      {% endif %}
                                      <p><code>{{ commandCode }}</code>: {{ descriptionKey|trans }}</p>
                                  {% endfor %}
                              {% endif %}
                          {% endfor %}
                      </div>
                  </div>
              </li>
          {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
