<!-- Configure Track Dialog -->
<div class="dialog" layout="dialog" layout-id="configure-audio" style="max-width:750px;">
    <div class="content-head">
        <%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :class => 'content-icon' } %>
        <h1>configure tracks</h1>
    </div>
    <div class="dialog-inner">
        <div class="dialog-tabs">
            <a id="tab-configure-audio" class="selected">Music Audio</a> 
            <a id="tab-configure-voice">Voice Chat</a>    
        </div>
        <div><span id="instructions"></span></div>

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

        <!-- Music Audio Panel -->
        <div class="tab" tab-id="music-audio">

            <!-- 1st Row -->
            <div class="left w100 mt20">
                <div class="w100">
                    <div class="left w30">
                        <div class="left">Audio Device:</div>
                        <div class="clearall"></div>
                        <div class="left w100">
                            <select id="audio-drivers" class="audio-devices w100"></select>
                        </div>
                    </div>
                    <div class="right mr45" style="padding-top:20px;">
                        <a id="btn-driver-settings" class="button-grey ml45">DRIVER SETTINGS...</a>
                    </div>
                </div>
            </div>

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

            <!-- 2nd row -->
            <div class="left w100 mt10">
                <div class="left w30">
                    <div class="left">Unused Inputs:</div>
                    <div class="clearall"></div>
                    <div class="left w100" style="height:196px;">
                        <select id="audio-inputs-unused" class="w100" multiple="multiple" size="10" style="height:100%;"></select>
                    </div>
                </div>
                <div class="left">
                    <div id="track1-input-buttons" class="left w5 ml10 mr10 mt30">
                        <div>
                            <img id="img-track1-input-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24" />
                        </div>
                        <div class="mt10">
                            <img id="img-track1-input-remove" style="cursor:pointer;" src="/assets/content/arrow_left_24.png" width="24" height="24" />
                        </div>
                    </div>
                    <div class="clearall"></div>
                    <div id="track2-input-buttons" class="left w5 ml10 mr10 mt45">
                        <div>
                            <img id="img-track2-input-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24" />
                        </div>
                        <div class="mt10">
                            <img id="img-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 w100">
                        <div class="left w45">
                            <div class="left">Track 1 Input:</div>
                            <div class="clearall"></div>
                            <div class="left w100">
                                <select id="track1-input" class="w100" multiple="multiple" style="height:92px"></select>
                            </div>
                        </div>
                        <div class="left w45 ml20">
                            <div class="left">Track 1 Instrument:</div>
                            <div class="clearall"></div>
                            <div class="left w100">
                                <select id="track1-instrument" class="w100" multiple="multiple" style="height:92px"></select>
                            </div>
                        </div>

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

                        <div class="left mt5 w100">
                            <div class="left w45">
                                <div class="left">Track 2 Input:</div>
                                <div class="clearall"></div>
                                <div class="left w100">
                                    <select id="track2-input" class="w100" multiple="multiple" style="height:92px;"></select>
                                </div>
                            </div>
                            <div class="left w45 ml20">
                                <div class="left">Track 2 Instrument:</div>
                                <div class="clearall"></div>
                                <div class="left w100">
                                    <select id="track2-instrument" class="w100" multiple="multiple" style="height:92px;"></select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

            <!-- 3rd row -->
            <div class="left w100 mt10">
                <div class="left w30">
                    <div class="left">Unused Outputs:</div>
                    <div class="clearall"></div>
                    <div class="left w100">
                        <select id="audio-output-unused" class="w100" multiple="multiple" size="4"></select>
                    </div>
                </div>
                <div class="left ml10 mr10 mt25">
                    <div>
                        <img id="img-audio-output-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24" />
                    </div>
                    <div class="mt10">
                        <img id="img-audio-output-remove" style="cursor:pointer;" src="/assets/content/arrow_left_24.png" width="24" height="24" />
                    </div>
                </div>
                <div class="left w27">
                    <div class="left">Session Audio Output:</div>
                    <div class="clearall"></div>
                    <div class="left w100">
                        <select id="audio-output-selection" class="w100" multiple="multiple" size="4"></select>
                    </div>
                </div>
            </div>
            <div class="clearall"></div>
        </div> <!-- End Music Audio Tab -->

        <!-- Voice Chat Panel -->
        <div class="tab" tab-id="voice-chat" style="display:none;">
            <div class="left w50 mt10">
                <div class="left">Voice Chat Device:</div>
                <div class="clearall"></div>
                <div class="left w100">
                    <select id="voice-chat-type" class="w100">
                        <option value="0">Don't set up an input for voice chat</option>
                        <option value="1">Use an input from the list below for chat</option>
                    </select>
                </div>
            </div>
            <div class="clearall"></div>
            <div class ="left w50 mt10">
                <div class="left">Unused Inputs:</div>
                <div class="clearall"></div>
                <div class="left w100">
                    <select id="voice-inputs-unused" class="w100" multiple="multiple" size="8"></select>
                </div>
            </div>
            <div class="left mt55">
                <div class="left ml10 mr10">
                    <div>
                        <img id="img-voice-input-add" style="cursor:pointer;" src="/assets/content/arrow_right_24.png" width="24" height="24" />
                    </div>
                    <div class="mt10">
                        <img id="img-voice-input-remove" style="cursor:pointer;" src="/assets/content/arrow_left_24.png" width="24" height="24" />
                    </div>
                </div>
            </div>
            <div class="left mt10 w38">
                 <div class="left">Voice Chat Input:</div>
                 <div class="clearall"></div>
                 <div class="left w100">
                    <select id="voice-inputs-selection" class="w100" multiple="multiple" size="8"></select>
                </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 mr35">
                <a id="btn-cancel-settings" class="button-grey">CANCEL</a>&nbsp;
                <a id="btn-save-settings" class="button-orange">UPDATE SETTINGS</a>
            </div>
        </div>
        <div class="clearall"></div>
    </div>
</div>