<?php
$this->jQuery();
$this->Backbone();
?>
<div class="row" id="js-theme">
    <div class="js-alert"></div>
</div>
<script id="temp-theme" type="text/template">
    <div class=" card bg-light mb-3">
        <img src="<%=screenshot %>" alt="<%= _.escape(title) %>" title="<?php echo _a('Click To preview'); ?>" class="card-img-top" style="height: 25vw" />
        <div class="card-body">
            <h5 class="clearfix card-title">
                <span class="float-right label"><%= type %></span>
                <%- title %>
            </h5>
            <div class="clearfix card-text">
                <span class="float-right btn btn-primary theme-install"><?php echo _a('Install'); ?></span>
                <span class="btn btn-link theme-detail"><?php echo _a('Detail'); ?></span>
                <span class="text-muted">|</span>
                <span class="btn btn-link theme-Check"><?php echo _a('Check'); ?></span>
            </div>
            <dl class="hide card-text">
                <dt><?php echo _a('Version'); ?></dt>
                <dd><%= version %></dd>
                <dt><?php echo _a('Type'); ?></dt>
                <dd><%= type %></dd>
                <dt><?php echo _a('Description'); ?></dt>
                <dd><%= description %></dd>
            </dl>
        </div>
    </div>
</script>
<script type="text/template" id="alert-template">
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <%= msg %>
    </div>
</script>
<script>
    (function ($) {
        var themeCollection = new Backbone.Collection(<?php echo json_encode(array_values($themes)) ?>);
        var ThemeItemView = Backbone.View.extend({
            className: 'col-lg-3 col-md-3',
            template: _.template($('#temp-theme').html()),
            events: {
                'click .theme-check': 'check',
                'click .theme-install': 'install',
                'click .theme-detail': 'toggleDetail'
            },
            initialize: function () {
                this.model.on('destroy', this.remove, this);
                this.model.id = 'name';
            },
            render: function () {
                this.$el.html(this.template(this.model.toJSON()));
                return this.el;
            },
            check: function () {

            },
            install: function () {
                var self = this;
                var url = '<?php echo $this->url('', ['action' => 'install', 'name' => '__NAME__']); ?>';
                $.getJSON(url.replace('__NAME__', this.model.get('name'))).done(function (res) {
                    if (res.status) {
                        self.remove();
                    } else {
                        themeList.$('.js-alert').html(_.template($('#alert-template').html(), {msg: res.message}));
                    }
                });
            },
            toggleDetail: function () {
                this.$('dl').toggleClass('hide');
            }
        });
        var ThemeListView = Backbone.View.extend({
            el: $('#js-theme'),
            initialize: function () {
                this.render();
            },
            render: function (msg) {
                var el = this.$el,
                    m = themeCollection.models;
                for (var i = 0, l = m.length; i < l; i++) {
                    el.append(new ThemeItemView({
                        model: m[i]
                    }).render());
                }
            }
        });
        var themeList = new ThemeListView;
    })(jQuery)
</script>