display-rule.html.twig in Popup Maker - All popup types 8

<div class="sgpm-popup-rule" data-rule-id="{{ index }}">
  <div>
    <label class="sgpm-label">Select Target</label>
    <select name="sgpm_rules[{{ index }}][param]" class="sgpm-select sgpm-rule-param">
      {% for type,nodes in displayRules %}
        {% if nodes is not empty %}
          <optgroup label="{{ type }}">
            <option data-sgpm-rule-param="{{ type }}_all"
                value="{{ type ~ '_all' }}" {% if rule.param is defined and rule.param == type ~'_all' %} selected="selected" {% endif %} >
              All {{ type }}s
            </option>
            <option data-sgpm-rule-param="{{ type }}_selected"
                value="{{ type ~ '_selected' }}" {% if rule.param is defined and rule.param == type ~ '_selected' %} selected="selected" {% endif %} >
              Selected {{ type }}s
            </option>
          </optgroup>
        {% endif %}
      {% endfor %}
    </select>
  </div>
  <div>
    <label class="sgpm-label">Operator</label>
    <select name="sgpm_rules[{{ index }}][operator]" class="sgpm-select">
      <option value="==" {% if rule.operator == '==' %}selected="selected"{% endif %}>Is</option>
      <option value="!=" {% if rule.operator == '!=' %}selected="selected"{% endif %}>Is not</option>
    </select>
  </div>
  {% for type,nodes in displayRules %}
    <div data-sgpm-rule-param="{{ type }}_selected" class="sgpm-rule-value {% if rule.param is not defined or rule.param != type ~ '_selected' %}sgpm-hide{% endif %}">
      <label class="sgpm-label">Selected {{ type }}s</label>
      <select {% if last or (rule.param is defined and rule.param == type ~ '_selected') %}name="sgpm_rules[{{ index }}][value][]"{% else %}data-name="sgpm_rules[{{ index }}][value][]"{% endif %} class="sgpm-select sgpm-popup-rule-value" multiple="multiple">
        {% for nodeId,nodeTitle in nodes %}
          <option value="{{ nodeId }}" {% if rule.param is defined and rule.param == type ~ '_selected' and nodeId in rule.value %} selected="selected" {% endif %}>{{ nodeTitle }}</option>
        {% endfor %}
      </select>
    </div>
  {% endfor %}
  <a href="#" class="sgpm-fab-btn sgpm-remove-rule">
    <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 13H5v-2h14v2z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </a>
  <a href="#" class="sgpm-fab-btn sgpm-add-rule {% if not last %}sgpm-hide{% endif %}">
    <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </a>
</div>