<!-- Add Track Dialog -->
<div class="dialog" layout="dialog" layout-id="add-track" style="max-width:750px;">
    <div class="content-head">
        <%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :class => 'content-icon' } %>
        <h1>add a track</h1>
    </div>
    <div class="dialog-inner">
        <div>
            Use arrow buttons to assign audio inputs to this new track, and choose what instrument you are playing on this track. Please note that you may only use one audio device for all audio inputs and outputs. If you don't see an audio device you think should be listed <a href="#">view this help topic to understand why</a>.
        </div>

        <div class="clearall"></div>

        <div class="left w100 mt10">
            <div class="left w30">
                <div class="left">Unused Inputs:</div>
                <div class="clearall"></div>
                <div class="left w100">
                    <select id="add-track2-unused" class="w100" multiple="multiple" size="6"></select>
                </div>
            </div>
            <div class="left mt35">
                <div class="left w5 ml10 mr10">
                    <div>
                        <img id="img-add-track2-input-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24" />
                    </div>
                    <div class="mt10">
                        <img id="img-add-track2-input-remove" style="cursor:pointer;" src="/assets/content/arrow_left_24.png" width="24" height="24" />
                    </div>
                </div>
            </div>
            <div class="left w60">
                <div class="left w45">
                    <div class="left w100">
                        <div class="left">Track 2 Input:</div>
                        <div class="clearall"></div>
                        <div class="left w100">
                            <select id="add-track2-input" class="w100" multiple="multiple" size="6"></select>
                        </div>
                    </div>
                </div>
                <div class="left w45 ml20">
                    <div class="left">Track 2 Instrument:</div>
                    <div class="clearall"></div>
                    <div class="left w100">
                        <select id="add-track2-instrument" class="w100" multiple="multiple" size="6"></select>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearall"></div>
        <div class="mt10" style="padding-left:2px;">
            <div class="left">
                <a layout-link="add-new-audio-gear" id="btn-add-new-audio-gear" class="button-grey" style="margin-left:0px;">ADD NEW AUDIO GEAR</a>
            </div>
            <div class="right mr40">
                <a layout-action="close" class="button-grey">CANCEL</a>&nbsp;
                <a id="btn-add-track" class="button-orange">ADD TRACK</a>
            </div>
        </div>
        <div class="clearall"></div>
   </div>
</div>