<div class="mod-pedal x42-mdbg{{{cns}}}">
    <div mod-role="drag-handle" class="mod-drag-handle"></div>

    <div class="x42-brand"><h1 title="Brought to you by x42.">x42</h1></div>
    <div class="x42-plugin-name"><h1>MIDI Debug</h1></div>

    <div class="mod-control-group mod-enumerated-group bottom clearfix">
        {{#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}}
    </div>

		<div class="mod-control-group top clearfix">
			<div class="mod-knob" title="Byte 1">
				<span class="mod-knob-title">Status Byte</span>
				<div class="mod-knob-ff-image" mod-role="input-control-port" mod-port-symbol="b1"></div>
			</div>
		</div>
		<div class="mod-control-group top clearfix">
			<div class="mod-knob" title="Byte 2" mod-gui-role="byte2">
				<span class="mod-knob-title">Data 1</span>
				<div class="mod-knob-7f-image" mod-role="input-control-port" mod-port-symbol="b2"></div>
			</div>
			<div class="mod-knob" title="Byte 3" mod-gui-role="byte3">
				<span class="mod-knob-title">Data 2</span>
				<div class="mod-knob-7f-image" mod-role="input-control-port" mod-port-symbol="b3"></div>
			</div>
		</div>

		<div class="mod-control-group clearfix bottom-group">
        <div class="mod-knob" title="Send Midi Message">
            <div class="mod-pushbutton off" mod-widget="switch" mod-role="input-control-port" mod-port-symbol="trigger"></div>
            <span class="mod-knob-title">Send</span>
        </div>
    </div>

    <div class="mod-pedal-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}}
    </div>
    <div class="mod-pedal-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}}
    </div>
</div>
