<goat-condition-builder id="simple-condition-builder">

    <goat-cb-predicate condition-operator="or">
      <goat-cb-predicate vertical="true" condition-operator="and">
        <goat-cb-compound-expression field-label="Age" condition-operator="or">
          <goat-cb-expression id="age">
            <goat-input inline="true" placeholder="Select Value"></goat-input>
          </goat-cb-expression>
          <goat-cb-expression id="age">
            <goat-input inline="true" placeholder="Select Value"></goat-input>
          </goat-cb-expression>
          <goat-button size="sm" icon="add" slot="end">Add expression</goat-button>
        </goat-cb-compound-expression>
        <goat-cb-compound-expression field-label="State">
          <goat-cb-expression id="age">
            <goat-input inline="true" placeholder="Select Value"></goat-input>
          </goat-cb-expression>
        </goat-cb-compound-expression>


        <goat-button slot="end" size="sm" icon="add">Add predicate</goat-button>
      </goat-cb-predicate>


    </goat-cb-predicate>

    <goat-cb-predicate condition-operator="or">
      <goat-cb-predicate vertical="true">
        <goat-cb-compound-expression field-label="State">
          <goat-cb-expression id="age">
            <goat-input inline="true" placeholder="Select Value"></goat-input>
          </goat-cb-expression>
        </goat-cb-compound-expression>
        <goat-button slot="end" size="sm" icon="add">Add predicate</goat-button>
      </goat-cb-predicate>
    </goat-cb-predicate>

    <goat-cb-predicate>
      <goat-cb-compound-expression field-label="City">
        <goat-cb-expression id="age">
          <goat-input inline="true" placeholder="Select Value"></goat-input>
        </goat-cb-expression>
      </goat-cb-compound-expression>
      <goat-button slot="end" size="sm" icon="add">Add predicate</goat-button>
    </goat-cb-predicate>

    <goat-button size="sm" icon="add">Add rule</goat-button>

  </goat-condition-builder>

  <script>
    const conditionBuilder = document.querySelector('goat-condition-builder');
    conditionBuilder.addEventListener('condition-builder:change', (event) => {
      console.log(event.detail);
    });

    document.querySelector('#age').operators = [{
      label: 'Less than',
      value: 'new',
      icon: 'file-earmark',
    },
      {
        label: 'More than',
        value: 'save',
        icon: 'person-circle',
      }];
  </script>