<script type="text/javascript">
    $(document).ready(function () {
        $('#confirm_delete').bind('show', function () {
            $("#mix_title").html(document.title);
        });
        $('.btn_confirm_delete').bind('click', function () {
            //get attributes of link
            var title = $(this).data('title');
            var description = $(this).data('description');
            var url = $(this).data('href');

            $('#__delete').data('href', url);
            $('#mix_title').html(title);
            $('#mix-description').html(description);
            $('#confirm_delete').modal('show');

        });
    });
    function closeDialog() {
        $('#confirm_delete').modal('hide');
    }

    function okClicked() {
        var url = $('#__delete').data('href');
        $.post(url, function (data) {
            alert(data);
            location.reload();
        });
        closeDialog();
    }

</script>
<div class="modal hide fade" id="confirm_delete">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Delete this mix</h3>
    </div>
    <div class="modal-body">
        <p id="mix_title"></p>

        <p id="mix-description"></p>
    </div>
    <div class="modal-footer">
        <a href="#" onclick="closeDialog()" class="btn">Are you mad? 'Tis quality like.</a>
        <a href="#" id="__delete" onclick="okClicked ();" class="btn btn-primary">Sure - go for it</a>
    </div>
</div>

<div class="btn-toolbar" style="margin-bottom: 9px">
    <div class="btn-group">
        <a href="#" id="{{ model.id }}" class="btn btn-mini mix-play-btn"
                data-url="{{MEDIA_URL}}{{ model.local_file }}"
                data-title="{{ model.title }}">
            <i class="icon-play icon-black"></i> Play
        </a>
        {% if model.user.user == user %}
        <a class="btn btn-mini" href="#"><i class="icon-music"></i></a>
        <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="{% url mix_edit model.id %}"><i class="icon-edit"></i> Edit</a></li>
            <li>
                <a
                        class="btn_confirm_delete"
                        data-toggle="modal"
                        data-title="{{ model.title }}"
                        data-description="{{ model.description }}"
                        data-href="{% url mix_delete model.id %}">
                    <i class="icon-trash"></i> Delete
                </a>
            </li>
        </ul>
        {% endif %}
    </div>
</div>
