<div class="mod-pedal mod-pedal-boxy{{{cns}}} mod-three-knobs mod-{{color}} {{color}}">
    <div mod-role="drag-handle" class="mod-drag-handle"></div>
    <div class="mod-plugin-brand"><h1>{{brand}}</h1></div>
    <div class="mod-plugin-name"><h1>{{label}}</h1></div>
    <div class="mod-light on" mod-role="bypass-light"></div>
    <div class="mod-control-group mod-enumerated-group bottom clearfix">



    <!-- 5 sections compressor start -->
        <!-- 1st section -->
      <div>
        {{#controls.0}}
        <div class="mod-enumerated" mod-role="input-control-port" mod-port-symbol="{{symbol}}" mod-widget="custom-select">
          <div mod-role="input-control-value" mod-port-symbol="{{symbol}}" class="mod-enumerated-selected"></div>
          <div class="mod-enumerated-list">
            {{#scalePoints}}
            <div mod-role="enumeration-option" mod-port-value="{{value}}">{{label}}</div>
            {{/scalePoints}}
          </div>
        </div>
        {{/controls.0}}
        {{#controls.5}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.5}}
        {{#controls.6}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.6}}
        {{#controls.7}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.7}}
        {{#controls.8}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.8}}
        {{#controls.9}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.9}}
      </div>
        <!-- 2nd section -->
      <div>
        {{#controls.1}}
        <div class="mod-enumerated" mod-role="input-control-port" mod-port-symbol="{{symbol}}" mod-widget="custom-select">
          <div mod-role="input-control-value" mod-port-symbol="{{symbol}}" class="mod-enumerated-selected"></div>
          <div class="mod-enumerated-list">
            {{#scalePoints}}
            <div mod-role="enumeration-option" mod-port-value="{{value}}">{{label}}</div>
            {{/scalePoints}}
          </div>
        </div>
        {{/controls.1}}
        {{#controls.10}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.10}}
        {{#controls.11}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.11}}
        {{#controls.12}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.12}}
        {{#controls.13}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.13}}
        {{#controls.14}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.14}}
      </div>
        <!-- 3th section  -->
      <div>
        {{#controls.2}}
        <div class="mod-enumerated" mod-role="input-control-port" mod-port-symbol="{{symbol}}" mod-widget="custom-select">
          <div mod-role="input-control-value" mod-port-symbol="{{symbol}}" class="mod-enumerated-selected"></div>
          <div class="mod-enumerated-list">
            {{#scalePoints}}
            <div mod-role="enumeration-option" mod-port-value="{{value}}">{{label}}</div>
            {{/scalePoints}}
          </div>
        </div>
        {{/controls.2}}
        {{#controls.15}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.15}}
        {{#controls.16}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.16}}
        {{#controls.17}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.17}}
        {{#controls.18}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.18}}
        {{#controls.19}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.19}}
      </div>
        <!-- 4th section  -->
      <div>
        {{#controls.3}}
        <div class="mod-enumerated" mod-role="input-control-port" mod-port-symbol="{{symbol}}" mod-widget="custom-select">
          <div mod-role="input-control-value" mod-port-symbol="{{symbol}}" class="mod-enumerated-selected"></div>
          <div class="mod-enumerated-list">
            {{#scalePoints}}
            <div mod-role="enumeration-option" mod-port-value="{{value}}">{{label}}</div>
            {{/scalePoints}}
          </div>
        </div>
        {{/controls.3}}
        {{#controls.20}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.20}}
        {{#controls.21}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.21}}
        {{#controls.22}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.22}}
        {{#controls.23}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.23}}
        {{#controls.24}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.24}}

      </div>
        <!-- 5th section -->
      <div>
        {{#controls.4}}
        <div class="mod-enumerated" mod-role="input-control-port" mod-port-symbol="{{symbol}}" mod-widget="custom-select">
          <div mod-role="input-control-value" mod-port-symbol="{{symbol}}" class="mod-enumerated-selected"></div>
          <div class="mod-enumerated-list">
            {{#scalePoints}}
            <div mod-role="enumeration-option" mod-port-value="{{value}}">{{label}}</div>
            {{/scalePoints}}
          </div>
        </div>
        {{/controls.4}}
        {{#controls.25}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.25}}
        {{#controls.26}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.26}}
        {{#controls.27}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.27}}
        {{#controls.28}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.28}}
        {{#controls.29}}
        <div class="mod-knob">
            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
            <span class="mod-knob-title">{{name}}</span>
        </div>
        {{/controls.29}}
      </div>
<!-- end of 5 sections compressor -->
<!-- starting rest of knobs -->
  <div>
    {{#controls.30}}
    <div class="mod-knob">
        <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
        <span class="mod-knob-title">{{name}}</span>
    </div>
    {{/controls.30}}
    {{#controls.31}}
    <div class="mod-knob">
        <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
        <span class="mod-knob-title">{{name}}</span>
    </div>
    {{/controls.31}}
    {{#controls.32}}
    <div class="mod-knob">
        <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
        <span class="mod-knob-title">{{name}}</span>
    </div>
    {{/controls.32}}
    {{#controls.33}}
    <div class="mod-knob">
        <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
        <span class="mod-knob-title">{{name}}</span>
    </div>
    {{/controls.33}}

  </div>
</div>

    <div class="mod-control-group mod-{{knob}} top clearfix">
</div>
    <div class="mod-footswitch" mod-role="bypass"></div>
    <div class="mod-pedal-input">
        {{#effect.ports.audio.input}}
        <div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-audio-port" mod-port-symbol="{{symbol}}">
            <div class="mod-pedal-input-image"></div>
        </div>
        {{/effect.ports.audio.input}}
        {{#effect.ports.midi.input}}
        <div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-midi-port" mod-port-symbol="{{symbol}}">
            <div class="mod-pedal-input-image"></div>
        </div>
        {{/effect.ports.midi.input}}
        {{#effect.ports.cv.input}}
        <div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-cv-port" mod-port-symbol="{{symbol}}">
            <div class="mod-pedal-input-image"></div>
        </div>
        {{/effect.ports.cv.input}}
    </div>
    <div class="mod-pedal-output">
        {{#effect.ports.audio.output}}
        <div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-audio-port" mod-port-symbol="{{symbol}}">
            <div class="mod-pedal-output-image"></div>
        </div>
        {{/effect.ports.audio.output}}
        {{#effect.ports.midi.output}}
        <div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-midi-port" mod-port-symbol="{{symbol}}">
            <div class="mod-pedal-output-image"></div>
        </div>
        {{/effect.ports.midi.output}}
        {{#effect.ports.cv.output}}
        <div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-cv-port" mod-port-symbol="{{symbol}}">
            <div class="mod-pedal-output-image"></div>
        </div>
        {{/effect.ports.cv.output}}
    </div>
</div>
