<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../elements/elements.html">

<polymer-element name="fow-deck-detail-grid"
  attributes="deck rulers stones resonators additions regalias spells 
  cardsQty rulersQty stonesQty resonatorsQty additionsQty regaliasQty spellsQty
  rulersSide stonesSide resonatorsSide additionsSide regaliasSide spellsSide 
  cardsSideQty rulersSideQty stonesSideQty resonatorsSideQty additionsSideQty regaliasSideQty spellsSideQty">
  <template>
    <style>
      :host {
        display: block;
        width: 100%;
      }
      .titleType{
        width: 100%;
        max-width: 500px;
        text-align: left;
        margin-left: -4px;
        margin-top: 10px;
        color: #aaa;
      }
    </style>
    <div layout vertical center>
      <div class="titleType">
        {{rulersQty}} Ruler ({{rulers.length}})
      </div>   
      <div>
        <template repeat="{{deckCard in rulers}}">
          <fow-deck-detail-cell deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{stonesQty}} Magic Stones ({{stones.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in stones}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{resonatorsQty}} Resonators ({{resonators.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in resonators}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{additionsQty}} Additions ({{additions.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in additions}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{regaliasQty}} Regalias ({{regalias.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in regalias}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{spellsQty}} Spells ({{spells.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in spells}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>
      <!-- SIDE -->
      <div class="titleType">
        <h3>SIDE: ({{cardsSideQty}} cards, {{deck.side.length}} distinct)</h3>
      </div>
      <div class="titleType">
        {{rulersSideQty}} Rulers ({{rulersSide.length}})
      </div>
      <div>
        <template repeat="{{deckCard in rulersSide}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{stonesSideQty}} Magic Stones ({{stonesSide.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in stonesSide}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{resonatorsSideQty}} Resonators ({{resonatorsSide.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in resonatorsSide}}">
          <fow-deck-detail-cell
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{additionsSideQty}} Additions ({{additionsSide.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in additionsSide}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{regaliasSideQty}} Regalias ({{regaliasSide.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in regaliasSide}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div>

      <div class="titleType">
        {{spellsSideQty}} Spells ({{spellsSide.length}} distinct)
      </div>
      <div>
        <template repeat="{{deckCard in spellsSide}}">
          <fow-deck-detail-cell 
            deckCard="{{deckCard}}">
          </fow-deck-detail-cell>
        </template>
      </div> 
  </div>
  </template>
  <script>
    (function () {

      Polymer({
        // define element prototype here
      });

    })();
  </script>
</polymer-element>