<div class="cardinal-fx mod-pedal">
    <div class="cardinal-fx border"></div>
    <div mod-role="drag-handle" class="mod-drag-handle"></div>
    <div class="cardinal-fx-top clearfix">
        <div class="cardinal-fx-top-left">
            <div class="spacer"></div>
            <div class="distrho-logo"></div>
            <div class="cardinal-text">DISTRHO Cardinal -&nbsp;FX&nbsp;-</div>
            <div class="spacer"></div>
        </div>
        <div class="cardinal-fx-top-right">
            <div class="mod-control-group cardinal-patch-comment">
                <div class="mod-string-content" mod-role="input-parameter" mod-parameter-uri="https://distrho.kx.studio/plugins/cardinal#fx#comment" mod-widget="string">
                    <textarea autocomplete=off spellcheck=false class="mod-string-value" mod-role="input-parameter-value" mod-parameter-uri="https://distrho.kx.studio/plugins/cardinal#fx#comment"></textarea>
                </div>
            </div>
            <div class="cardinal-patch-screeenshot">
                <div class="screenshot">
                </div>
            </div>
        </div>
    </div>
    <div class="cardinal-fx-bottom clearfix">
        <div class="mod-control-group cardinal-fx-knob-page-selector">
            <span class="page-1 selected">1 - 8</span>
            <span class="page-2">9 - 16</span>
            <span class="page-3">17 - 24</span>
            <div class="mod-switch">
                <div class="mod-control-group mod-switch-image mod-port transport" mod-role="bypass" mod-widget="film"></div>
            </div>
        </div>
        <div class="mod-control-group cardinal-fx-knobs cardinal-fx-knob-page-1 clearfix">
            <div class="mod-knob">
                <span class="title">PARAM 1</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_1" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 2</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_2" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 3</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_3" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 4</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_4" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 5</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_5" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 6</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_6" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 7</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_7" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 8</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_8" mod-widget="film"></div>
            </div>
        </div>
        <div class="mod-control-group cardinal-fx-knobs cardinal-fx-knob-page-2 clearfix">
            <div class="mod-knob">
                <span class="title">PARAM 9</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_9" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 10</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_10" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 11</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_11" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 12</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_12" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 13</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_13" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 14</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_14" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 15</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_15" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 16</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_16" mod-widget="film"></div>
            </div>
        </div>
        <div class="mod-control-group cardinal-fx-knobs cardinal-fx-knob-page-3 clearfix">
            <div class="mod-knob">
                <span class="title">PARAM 17</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_17" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 18</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_18" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 19</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_19" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 20</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_20" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 21</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_21" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 22</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_22" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 23</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_23" mod-widget="film"></div>
            </div>
            <div class="mod-knob">
                <span class="title">PARAM 24</span>
                <div class="mod-control-group mod-knob-image mod-port" mod-role="input-control-port" mod-port-symbol="param_24" mod-widget="film"></div>
            </div>
        </div>
    </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>
