<div class="row">
    <section id="mix">
        <ul id="mix-list-container-ul" class="mix-listing audio-listing"></ul>
    </section>
</div>
<div class="row well-sm">
    <section id="mix-comment">
        <div class="input-group" id="comment-input">
            <span class="input-group-btn">
                <button class="btn btn-sm btn-default"
                        id="btn-add-comment"
                        type="button">
                    <i class="fa fa-comment bigger-110"></i>
                    Add comment!
                </button>
            </span>
            <input class="form-control" type="text" id="comment-text" name="comment-text">
        </div>
    </section>
</div>
<div class="row">
    <section id="mix-detail-section">
        <ul id="mix-tab" class="nav nav-tabs" data-tabs="tabs">
            <li class="active" id="tab-description">
                <a data-bypass="true" href="#description" data-toggle="tab">
                    <i class="orange fa fa-terminal bigger-120"></i>
                    Description
                </a>
            </li>
            <li id="tab-comments">
                <a data-bypass="true" href="#comments" data-toggle="tab">
                    <i class="orange fa fa-comments bigger-120"></i>
                        Comments
                    <span class="badge badge-danger"><%= comments.length %></span>
                </a>
            </li>
        </ul>

        <div id="mix-tabContent" class="tab-content">
            <div class="tab-pane active in fade" id="description">
                <pre id="mix-description"><%= description %></pre>
            </div>
            <div class="tab-pane fade" id="comments">
            </div>
        </div>
    </section>
</div>
