<?php
$this->css($this->assetModule('admin/admin.css'));
$this->jQuery();
$this->backbone();
?>
<div class="page-header">
    <h2><?php echo $title; ?></h2>
</div>
<ul class="nav nav-pills bg-light mb-3 p-3">
    <li class="nav-item">
        <a class="nav-link <?php if ('_front' == $side) {  echo 'active'; } ?>" href="<?php echo $this->url('', ['action' => 'index', 'side' => '_front']); ?>">
            <?php echo _a('Front'); ?>
        </a>
    </li>
    <li class="nav-item ">
        <a class="nav-link <?php if ('_admin' == $side) { echo 'active'; } ?>" href="<?php echo $this->url('', ['action' => 'index', 'side' => '_admin']); ?>">
            <?php echo _a('Admin'); ?>
        </a>
    </li>
</ul>
<div id="js-page">
    <h1 class="mb-3 mt-3">
        <?php echo _a('Theme in use'); ?>
    </h1>

    <div class="card mb-3 bg-light">
        <div class="row no-gutters">
            <div class="col-md-4">
                <img src="<?php echo $theme['screenshot']; ?>"
                     alt="<?php echo isset($theme['title']) ? _escape($theme['title']) : ''; ?>"
                     class="card-img"/>
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title"><?php echo _escape($theme['title']); ?></h5>
                    <div class="card-text">
                        <h5><?php echo $theme['version']; ?></h5>
                        <p style="margin-bottom:15px;">
                            <?php echo _escape($theme['description']); ?>
                        </p>
                        <a class="btn btn-success" href="<?php echo $this->url('', ['action' => 'customize', 'name' => $theme['name']]); ?>">
                            <?php _e('Customize'); ?>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <h3 class="mb-3 mt-3">
        <?php echo _a('Themes available to use'); ?>
    </h3>
    <div class="theme-list row clearfix"></div>
</div>
<script type="text/template" id="temp-theme">
    <div class="card">
        <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="card-title"><%- title %></h5>
            <div class="card-text clearfix theme-actions">
                <span class="float-right btn btn-secondary theme-apply"><?php echo _a('Apply'); ?></span>
                <span class="no-select btn btn-link theme-detail"><?php echo _a('Detail'); ?></span>
            </div>
            <dl class="card-text hide">
                <dt><?php echo _a('Version'); ?></dt>
                <dd><%= version %></dd>
                <dt><?php echo _a('Description'); ?></dt>
                <dd><%= description %></dd>
            </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 col-12',
        template: _.template($('#temp-theme').html()),
        events: {
            'click .theme-apply': 'apply',
            'click .theme-detail': 'toggleDetail'
        },
        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
            return this.el;
        },
        apply: function () {
            var url = '<?php echo $this->url('', ['action' => 'apply', 'side' => $side, 'theme' => '__NAME__']); ?>';
            $.getJSON(url.replace('__NAME__', this.model.get('name'))).done(function (result) {
                if (result.status == 1) {
                    location.href = location.href;
                }
            });
        },
        toggleDetail: function () {
            this.$('dl').toggleClass('hide');
        }
    });
    var ThemeListView = Backbone.View.extend({
        el: $('#js-page'),
        events: {
            'click .apply-all': 'applyAll'
        },
        initialize: function () {
            this.render();
        },
        render: function () {
            var el = this.$('.theme-list'),
                m = themeCollection.models;
            for (var i = 0, l = m.length; i < l; i++) {
                el.append(new ThemeItemView({
                    model: m[i]
                }).render());
            }
        },
        applyAll: function (e) {
            var tar = $(e.target);
            $.getJSON(tar.attr('data-link')).done(function (result) {
                alert(result.message);
            });
        }
    });
    new ThemeListView;
</script>