{{#each comics}}
<div class="reading-left r-l-i{{index}}" onclick="{{#unless folder}}reading.goToImage({{index}}){{else}}reading.goToFolder({{index}}){{/unless}}">
	<div class="reading-number">{{index}}</div>
	{{#if folder}}
	<i class="material-icon">folder</i>
	{{else}}
	<div class="reading-images">
		<img class="sha-image-{{sha}}{{#if thumbnail}} show{{/if}}" src="{{chain 'escapeBackSlash' 'escapeQuotesSimples' thumbnail}}" onload="this.classList.add('show')">
	</div>
	{{/if}}
</div>
{{/each}}
<div class="reading-page-range">
	<div class="simple-slider">
		<div class="simple-slider-text"><div class="range-percent"><i class="material-icon slider-reset" onclick="reading.goBackPageRangeHistory(this)">undo</i><span onclick="reading.goPageDialog()">0%</span></div><div onclick="reading.goPageDialog()"><span>1</span> / {{comics.length}}</div></div>
		<div class="range show-point-on-hover">
			<div class="range-position">
				<span class="range-line" style="width: 0%"></span>
				<span class="range-steps"></span>
				<div>
					<div class="range-point" position="100" style="left: 0%;"><div class="elevation-1"></div></div>
				</div>
			</div>
			<input type="range" max="{{comics.length}}" min="1" value="1" onrange="reading.pageRange(\{{value}}, \{{toEnd}})">
		</div>
	</div>
</div>