{% extends "./base.html" %}

{% block comicpage %}active{% endblock %}
{% block background %}./img/bg_com.png{% endblock %}
{% block color %}blue{% endblock %}
{% block title %}Comics{% endblock %}
{% block type %}manga{% endblock %}
{% block desc %}
Browse some classic DIY 4komas. <br/>Maybe finish reading that series you didn't entirely receive through WFC back then?
<br/><br/>
Thanks to our cutting-edge technology, you can read those comics straight from your browser.
<br/><br/>

<div id="game-search">
	
	<div style="height: 50px; width: 300px;" class="chip">
	      <div class="input-field" style="margin-top:-5px; margin-left: -10px;">
	          <i style="margin-top: 5px;" class="material-icons prefix">account_circle</i>
	          <input id="maker_name" type="text" value="{{creatorSearch}}">
			  <input id="cartridge_id" type="hidden" value="{{cartridgeIdSearch}}">
			  <input id="creator_id" type="hidden" value="{{creatorIdSearch}}">
	          <label class="" for="maker_name" style="margin-top:-5px">Creator Name</label>
	        </div>
	</div>

	<div style="height: 50px; width: 300px" class="chip">
        <div class="input-field" style="margin-top:-5px; margin-left: -10px;">
            <i style="margin-top: 5px;" class="material-icons prefix">local_library</i>
            <input id="item_name" type="text" value="{{nameSearch}}">
            <label class="" for="item_name" style="margin-top:-5px">Comic Name</label>
          </div>
	</div>

	<div style="height: 50px; width: 150px" class="chip">
        <div class="input-field white-text" style="margin-top: -10px; padding-top:5px">
			<select id="sort_by" onchange="loadItems(1)">
				<option value="name" selected>Name</option>
				<option value="date">Most Recent</option>
			</select>
			<label style="margin-top: -2px;">Sort By</label>
		</div>
	</div>
	
    <br/>  <br/>   
  	<a class="waves-effect waves-light btn" style="width:160px" onclick="loadItems(1)">
  		<i class="material-icons left">search</i>Search
  	</a>
  	<a class="waves-effect waves-light btn" style="width:160px" onclick="clearSearch()">
  		<i class="material-icons left">clear</i>Clear
  	</a>

</div>
<br/>
<div id="pagination-top" class="pagination-wrapper chip">
  <ul class="pagination"></ul>
</div>

{% endblock %}


{% block content %}

	{% include "./mangaDetail.html" %}
	
{% endblock %}

{% block footdata %}

<div id="pagination-bottom" class="pagination-wrapper chip">
  <ul class="pagination"></ul>
</div>


{% endblock %}