{% extends 'base.html.twig' %}

{% block stylesheets %}
    {% stylesheets '@bootstrap_css' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {% javascripts
        '@jquery_js'
        '@underscore_js'
        '@backbone_js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

{% extends 'base.html.twig' %}

{% block stylesheets %}
    {% stylesheets '@bootstrap_css' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {% javascripts
        '@jquery_js'
        '@underscore_js'
        '@backbone_js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

    <script type="text/javascript">
        var DeckModel = Backbone.Model.extend({
            defaults: {
                name: '',
                slug: ''
            }
        });

        var DeckCollection = Backbone.Collection.extend({
            model: DeckModel,
            url: '/api/decks'
        });

        var DeckListView = Backbone.View.extend({
            template: _.template($('#deck-list').html()),
            render: function() {
                var data = {
                    decks: this.collection
                };
                this.$el.html(this.template(), data);

                return this;
            }
        });

        var deckList = new DeckListView({
            el: '#content',
            collection: decks
        });
        var decks = new DeckCollection();
        decks.fetch({
            success: function() {
                deckList.render();
            }
        });
    </script>
{% endblock %}

{% block body %}
    <div id="content" class="container">
    </div>
    <script type="text/template" id="deck-list">
        <div class="row">
            <h1>Choose your deck</h1>
            <table class="table">
                <tbody>
                    <% decks.forEach(function (deck) { %>
                        <tr>
                            <td>
                                <a href="#" class="btn btn-default btn-xs" aria-label="Front to back">
                                    <span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span>
                                </a>
                                <a href="#"class="btn btn-default btn-xs" aria-label="Back to front">
                                    <span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>
                                </a>

                                <%= deck.get('name') %>
                            </td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </div>
    </script>
{% endblock %}

Implement basic deck list loading.
Implement basic deck list loading.
