﻿<card-links>
  <div class="row">
    <div class={colClass} each={cards}>
      <div class={'card ' + cardClass + (br ? ' break' : '')}>
        <div class="card-image">
          <a href={href}><img src={'img/'+src} alt={text}></a>
        </div>
        <div class="card-content">
          <a href={href} class="card-title">{text}</a>
        </div>
      </div>
    </div>
  </div>
  <style scoped>
    @media print {
      :scope .row .card.break {
        page-break-inside:avoid !important;
      }
      
    }
  </style>
  
  this.cards = opts.cards;
  this.cardClass = opts.cardClass || 'small';
  this.colClass = opts.colClass || 'col s12 m4 l3';
  var self = this;
  this.on('mount', function(){
    self.cards.forEach(function(e, i ){
      e.br = (i && ((i+1) % 6 === 1));
    });
    self.update();
  });
</card-links>