<?php
$this->jQuery();
$this->Backbone();
$this->js($this->assetModule('script/system-msg.js'));
?>
<h1 class="mb-3 mt-3">
    <?php echo _escape($title); ?>
</h1>
<div class="row" id="js-theme"></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 theme-actions card-text" style="margin-left: -5px;">
                <% if(name!="default") { %>
                <span class="float-right btn btn-secondary theme-uninstall"><?php echo _a('Uninstall'); ?></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>
                <span class="text-muted">|</span>
                <span class="btn btn-link theme-update"><?php echo _a('Update'); ?></span>
            </div>
            <dl class="hide card-text">
                <dt><?php echo _a('Version'); ?>
                <dd><%= version %>
                <dt><?php echo _a('Type'); ?>
                <dd><%= type %>
                <dt><?php echo _a('Description'); ?>
                <dd><%= description %>
            <dl>
        </div>
    </div>
</script>
<script>
    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-update': 'update',
            'click .theme-uninstall': 'uninstall',
            'click .theme-detail': 'toggleDetail'
        },
        initialize: function () {
            this.model.on('destroy', this.remove, this);
            this.model.on('change', this.render, this);
        },
        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
            return this.el;
        },
        check: function () {

        },
        update: function () {
            var url = '<?php echo $this->url('', ['action' => 'update', 'name' => '__NAME__']); ?>';
            this.model.fetch({
                url: url.replace('__NAME__', this.model.get('name')),
                success: function () {
                    systemMessage.succ('<?php echo _a('Theme Updated successfully.')?>');
                },
                error: function () {
                    systemMessage.fail();
                }
            });
        },
        uninstall: function () {
            if (confirm('<?php echo _a('Are you sure to uninstall this theme ? ') ?>')) {
                var url = '<?php echo $this->url('', ['action' => 'uninstall', 'name' => '__NAME__']); ?>';
                this.model.destroy({
                    url: url.replace('__NAME__', this.model.get('name'))
                });
            }
        },
        toggleDetail: function () {
            this.$('dl').toggleClass('hide');
        }
    });
    var ThemeListView = Backbone.View.extend({
        el: $('#js-theme'),
        initialize: function () {
            this.render();
        },
        render: function () {
            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());
            }
        }
    });
    new ThemeListView;
</script>