{extend name="$_admin_base_layout" /}

{block name="content"}
<div class="container-fluid data-stat">
    <div class="row">
        {volist name="template" id="template"}
            <div class="span3 col-md-3">
                <div class="widget-box">
                    <div class="widget-title" style="padding-right: 10px;">
                        <h5 title="" class="tip-top">{$template['info']}</h5>
                        <input {if $template['name']==$tp['name']}checked{/if} data-id="{$template['name']}" type="checkbox" class="al-toggle-button pull-right" />
                        
                        <div style="clear: both;"></div>
                    </div>
                    <div class="box-body">
                        <p style="text-align: center;">
                            <img style="width: 90%;" ondragstart="return false;" src="{$template['img']}" />
                        </p>
                    </div>
                </div>
            </div>
        {/volist}
    </div>
</div>
<style type="text/css">
.col-md-3{
    width: 23%;
    margin-right: 1%;
    margin-left: 1%;
}
.span3{
    background: #fff;
    border: 1px #ddd solid;
    border-radius: 15px;
}    
.tip-top{ float: left; }
h5{
    height: 30px;
    line-height: 40px;
}
.widget-title{
    height: 40px;
    line-height: 30px;
}
.al-toggle-button{
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 52px!important;
    height: 28px!important;
    background: #dfdfdf;
    border-radius: 16px;
    border: 1px solid #dfdfdf;
    outline: 0;
    box-sizing: border-box;
}
.al-toggle-button:checked{
    border-color: #1F98CA;
    background-color: #1F98CA;
}
.al-toggle-button:before, .al-toggle-button:after{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    border-radius: 15px;
    transition: transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
}
.al-toggle-button:before{
    width: 50px;
    background-color: #fdfdfd;
}
.al-toggle-button:after{
    width: 26px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.al-toggle-button:checked:before{
    transform: scale(0);
    -webkit-transform: scale(0);
}
.al-toggle-button:checked:after{
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
}

</style>



{// 额外HTML代码 }
{$extra_html|default=''}
{/block}

{block name="style"}
    {volist name="css_list" id="vo"}
    <link rel="stylesheet" href="__MODULE_CSS__/{$vo}.css">
    {/volist}

    {// 额外CSS代码 }
    {$extra_css|default=''}
{/block}

{block name="script"}

    {volist name="js_list" id="vo"}
    <script src="__MODULE_JS__/{$vo}.js"></script>
    {/volist}

    {// 额外JS代码 }
    {$extra_js|default=''}

    <script>
        $(".al-toggle-button").change(function (d) {
            var that = this;
            var isChecked = $(this).prop("checked");
            $(".al-toggle-button").each(function (index, item) {
                if (item != that) {
                    $(item).prop("checked", false);
                }
            });
            if (!isChecked) {
                $(this).prop("checked", true);
                return false;
            }
            var dataId = $(this).attr('data-id');
                $.post("{:url('cdms/wechat/skin')}", { "name": dataId }, function (d) {
            });
        });
    </script>

{/block}