<post>
<li class="blog__item col-33 min" if="{type=='a'}">
    <a href="{opt.link}">
        <div class="img-wrap">
            <img src="{opt.image}" alt="">
        </div>
        <div class="blog__item-descr">
            <p class="blog-item-title">{opt.title}</p>
            
            <div class="blog__info-block">
                <p class="blog-item-text"><i class="fa fa-calendar"></i> {opt.date}</p>
                <p class="blog-look"><i class="fa fa-eye"></i>{opt.views}</p>
            </div>
        </div>
    </a>
</li>

<li class="blog__item col-66" if="{type=='b'}">
    
    <a href="{opt.link}">
        <div class="img-wrap">
            <img src="{opt.image}" alt="">
        </div>
        <div class="blog__item-descr">
            <p class="blog-item-title">{opt.title}</p>
            <p class="blog-subtitle">{opt.short}</p>
            <div class="blog__info-block">
                <p class="blog-item-text"><i class="fa fa-calendar"></i> {opt.date}</p>
                <p class="blog-look"><i class="fa fa-eye"></i>{opt.views}</p>
            </div>
        </div>
    </a>
</li>

<li class="blog__item col-33" if="{type=='c'}">
    
    <ul class="tile__list">
        <li class="tile__item" each="{items}">
        
            <div class="img-wrap">
                <img src="{image}" alt="">
            </div>
            <div class="tile-content-block">
                <div class="tile-wrap">
                    <p class="tile-item-text"><i class="fa fa-calendar"></i>{date}</p>
                    <a href="{link}" class="tile-title">{title}</a>
                </div>
                <p class="tile-look"><i class="fa fa-eye"></i>{views}</p>
            </div>
            
        </li>
   
    </ul>
</li>
<script type="text/javascript">
        this.type="";
    this.on('mount',function(){
       // console.log('mount',this.opts);
        this.type=this.opts.types[this.opts.type];
        if(this.type=='c'){
            var l=posts.length-1;
            this.items=[];
            this.items.push(posts[this.opts.index]);
            if(this.opts.index==l){
                this.update();
                return;
                
            }
            this.opts.index++;
            this.items.push(posts[this.opts.index]);
            if(this.opts.index==l){
                this.update();
                return;
            }
            this.opts.index++;
            this.items.push(posts[this.opts.index]);
        }else{
            this.opt=posts[this.opts.index];
        }
         this.update();
        
    });

    this.on('updated',function(){
        console.log('updated',this.opts.index);
        $(this.root.innerHTML).appendTo('#blog-ul');
        var type=this.opts.type+1;
        var index=this.opts.index+1;
        var max=posts.length;
       
        if(type==this.opts.types.length)
            type=0;
        if(index>=max) return;
        riot.mount('post',{index:index,type:type,types:this.opts.types});
    });
</script>
</post>
