{% for item in items %}
	
  {% if singleitem != true %}
    <div class="col s12 m6 l4">
  {% else %}
      This is a WarioWare: DIY Comic! <br/>
      Click on the comic's large icon on the right to read it in your browser!<br/>
    <div class="col s12 m12 l12"></div>
  {% endif %}

          <div class="card {{ item.colorCart }} darken-2">
            <div class="game-header {{ item.colorLogo }} accent-4">
                <div class="chip game-title" id="{{ item.hash }}-name">
                  {{ item.name }}
                </div>
                <div class="game-metadata black-text">
                  Released {{ item.timestamp }}<br/>
                  MIO-ID: M-{{ item.mioID }}
                </div>
              </div>

            <div class="card-content black-text">

                  <div class="game-data">

                    <div style="width:125px; float:left">

                      {% if item.specialBrand != null %}
                      <div class="brand {{ item.specialBrand }}-brand white-text"></div> 
                      {% else %}
                        <div class="brand manga-brand white-text">
                        {{ item.brand }} <br/>Publishing
                        </div>
                      {% endif %}

                      <div class="game-creator black white-text">
                        Creator
                        <div class="white black-text" style="border-radius:0px 0px 10px 10px; font-size:15px; cursor: pointer" onclick="searchForUser('{{ item.cartridgeId }}', '{{ item.creatorId }}')">
                          {{ item.creator }}
                          </div>
                      </div>

                  </div>

					<a class="btn manga-preview z-depth-1 tooltipped waves-effect {{ item.colorLogo }}" data-tooltip="Read this" onclick="drawManga('{{ item.pages[0] }}','{{ item.pages[1] }}','{{ item.pages[2] }}','{{ item.pages[3] }}')" >
					 	<img src="./img/icons/comic/comic_{{ item.logo }}.png" /> 
					</a>

                  </div>

              <span class="game-text card-title white-text" style=""><br/>{{ item.mioDesc1 }} <br/>{{ item.mioDesc2 }}</span>          
            </div>

            <div class="card-action center">
              <a class="btn waves-effect tooltipped" data-position="top" data-tooltip="Download" href="./download?type=manga&id={{ item.hash }}" style="width:31%" >
                <i class="material-icons">file_download</i>
              </a>
              <a class="btn waves-effect tooltipped" data-position="top" data-tooltip="Get sharing link" onclick="copyShareLink('comics','{{ item.hash }}')" style=" width:31%">
                <i class="material-icons">share</i>
              </a>
              <a class="btn waves-effect tooltipped" data-position="top" data-tooltip="Add to cart" onclick="addToCart('manga','{{ item.hash }}')" style="width:31%">
                <i class="material-icons">shopping_cart</i>
              </a>
            </div>

          </div>

        </div>
        
   {% else %}
   
No more comics. <br/>
Sad.
       
{% endfor %}
	
<span id="total_items" style="display:none">{{ totalitems }}</span>

<img class="materialboxed" height="513">

<canvas id="canvas_manga" width="193" height="513" style="background-color:black; display:none"></canvas>