<style>
    .b-tabs {
        margin-top: 17px;
        margin-bottom: 15px;
    }
    .tab {
        padding: 12px 12px 5px 12px;
        border: solid #CCC;
        border-width: 1px 1px 0 1px;
        margin-right: 3px;
        text-decoration: none;
        color: black;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        box-shadow: 2px -2px 4px rgba(0,0,0,0.5);
    }
    .active-tab {
        font-weight: bold;
        border: solid #666;
        border-width: 1px 1px 0 1px;
    }
    .b-tabs li {
        display: inline;
    }
</style>

<script>
$(document).ready(function(){

    var instances_tab = $('#instances'),
        comments_tab = $('#comments'),

        instances_list = $('#instances-list'),
        comments_list = $('#comments-list');

    var toggleActive = function (tab) {
        instances_tab.removeClass('active-tab');
        comments_tab.removeClass('active-tab');
        tab.addClass('active-tab');
    };

    comments_list.hide();

    comments_tab.click(function () {
        var $this = $(this);

        if (!comments_tab.attr('data-filled')) {
            $.ajax({url:comments_tab.attr('data-href'),
                    success: function (html) {
                        comments_list.html(html);
                        comments_list.show();
                        instances_list.hide();
                        comments_tab.attr('data-filled', 1);

                        toggleActive($this);

                    }
                   });
        } else {
            comments_list.show();
            instances_list.hide();

            toggleActive($this);

        };
    });

    instances_tab.click(function () {
        comments_list.hide();
        instances_list.show();

        toggleActive(instances_tab);

    });


    // подписка/отписка
    var form = $('.to-queue').find('form');
    var link = $('.to-queue').find('.queue-btn');
    link.click(function(){
        form.submit();
    });

});
</script>

<ul class="b-tabs">
    <a class="tab active-tab" id="instances" href="#">
        <li>Экземпляры</li>
    </a>

    <a id="comments" class="tab" href="#"
       data-href="{% url at-reviews book.id %}">
        <li>Отзывы</li>
    </a>

    {% if data.comments.add_url %}
    <li class="tab">
        <a href="{{ data.comments.add_url }}" target="_blank">Добавить отзыв</a>
    </li>
    {% endif %}

    <li class="to-queue" style="margin-left: 20px">
        <div style="display: inline-block">
        {% if add_to_queue == 'subscribe' %}
        <lego:b-button url="#" lego:height="26" lego:background="26-1981d6"
                       class="queue-btn"
                       title="Когда книга появится на email придет сообщение"
                       >
            Подписаться
        </lego:b-button>
        <form method="POST" action="{% url to_queue %}">
            <input type="hidden" name="book_id" value="{{ book.id }}" />
        </form>
        {% elif add_to_queue == 'unsubscribe' %}
        <lego:b-button url="#" lego:height="26" lego:background="26-1981d6"
                       class="queue-btn"
                       title="Когда книга появится на email придет сообщение"
                       >
            Отписаться
        </lego:b-button>

        <form method="POST" action="{% url del_from_queue %}">
            <input type="hidden" name="book_id" value="{{ book.id }}" />
        </form>
        {% endif %}
        </div>
    </li>

</ul>
