<form class="{{classes}} lib-wrapper" autocomplete="off">
	<nav class="sheet-tabs tabs">
		<a class='item' data-tab='Priorities'>Priorities</a>
		<a class='item' data-tab='Conflicts'>Conflicts</a>
		<a class='item' data-tab='Wrappers'>Active Wrappers</a>
		<a class='item' data-tab='About'>About</a>
	</nav>

	<section class='tab' data-tab='Priorities'>
		<h1>Priorities</h1>
		{{#if about.collect_stats}}
		{{^}}
			<p style="margin:auto; width:100%; text-align: center; padding-bottom: 5px"><b>Note: Statistics collection is disabled, not able to show unprioritized packages.</b></p>
		{{/if}}
		<div class="package-priority-group">
			<div class="form-group" style="width: 90%; float:left">
				<label for="packages-prioritized">Prioritized Packages
					<p class="notes">These packages will be prioritized compared to any package not in this list.<br>Higher positions in the list result in a higher priority.</p>
				</label>
				<select name="packages-prioritized" class="packages-prioritized" size="8">
					{{#if packages.prioritized}}
					{{#each packages.prioritized}}
						<option value="{{this.key}}">{{this.title}} ({{this.id}})</option>
					{{/each}}
					{{/if}}
				</select>
			</div>
			<div class="vertical-arrow-btn-group" style="width: 5%; padding-top: 45px;">
				<button type="button" class="change-priority" data-which="packages-prioritized" data-direction="up">&uarr;</button>
				<button type="button" class="change-priority" data-which="packages-prioritized" data-direction="down">&darr;</button>
			</div>
			<div class="arrow-btn-group" style="width: 10%">
				<button type="button" style="width:50%" class="change-category" data-from="packages-normal" data-to="packages-prioritized">&uarr;</button>
				<button type="button" style="width:50%" class="change-category" data-from="packages-prioritized" data-to="packages-normal">&darr;</button>
			</div>
		</div>
		<div class="package-priority-group">
			<div class="form-group" style="width: 90%">
				<label for="packages-normal">Unprioritized Packages
					<p class="notes">These packages will be neither prioritized nor deprioritized.<br>Priorities among these packages are decided on a first-come-first-served basis.<br>New packages will default to this list.</p>
				</label>
				<select name="packages-normal" class="packages-normal" size="8">
					{{#if packages.normal}}
					{{#each packages.normal}}
						<option value="{{this.key}}">{{this.title}} ({{this.id}})</option>
					{{/each}}
					{{/if}}
				</select>
			</div>
			<div class="arrow-btn-group" style="width: 10%">
				<button type="button" style="width:50%" class="change-category" data-from="packages-deprioritized" data-to="packages-normal">&uarr;</button>
				<button type="button" style="width:50%" class="change-category" data-from="packages-normal" data-to="packages-deprioritized">&darr;</button>
			</div>
		</div>
		<div class="package-priority-group">
			<div class="form-group" style="width: 90%; float:left">
				<label for="packages-deprioritized">Deprioritized Packages
					<p class="notes">These packages will be deprioritized compared to any package not in this list.<br>Higher positions in the list result in a higher priority.<br><b>Note that packages that do not use libWrapper are deprioritized even compared to these.</b></p>
				</label>
				<select name="packages-deprioritized" class="packages-deprioritized" size="8">
					{{#if packages.deprioritized}}
					{{#each packages.deprioritized}}
						<option value="{{this.key}}">{{this.title}} ({{this.id}})</option>
					{{/each}}
					{{/if}}
				</select>
			</div>
			<div class="vertical-arrow-btn-group" style="width: 5%; padding-top: 45px;">
				<button type="button" class="change-priority" data-which="packages-deprioritized" data-direction="up">&uarr;</button>
				<button type="button" class="change-priority" data-which="packages-deprioritized" data-direction="down">&darr;</button>
			</div>
		</div>
		<div style="margin: auto; width: 50%; padding-top: 60px">
			<button type="button" class='submit' style="width:30%">Save</button>
			<button type="button" class="reload" style="width:30%">Reload</button>
			<button type="button" class="reset" style="width:30%">Reset</button>
		</div>
	</section>

	<section class='tab' data-tab='Conflicts'>
		<h1>Conflicts</h1>
		{{#if about.collect_stats}}
			{{#if conflicts}}
				{{#each conflicts}}
				<ul id="{{this.package_id}}_{{this.other_id}}" class="has-nested">
					<li>
						<span class="caret has-nested">
							{{this.package_id}} vs. {{this.other_id}} ({{#if this.count}}x{{this.count}}{{/if}}{{#if this.count}}{{#if this.ignored}}; {{/if}}{{/if}}{{#if this.ignored}}ignored x{{this.ignored}}{{/if}})
						</span>
						<ul class="nested">
						{{#each this.targets}}
							<li>
								{{this.target}} ({{#if this.count}}x{{this.count}}{{/if}}{{#if this.count}}{{#if this.ignored}}; {{/if}}{{/if}}{{#if this.ignored}}ignored x{{this.ignored}}{{/if}})
							</li>
						{{/each}}
						</ul>
					</li>
				</ul>
				{{/each}}
			{{^}}
				<p>No conflicts have been detected.</p>
			{{/if}}
		{{^}}
			<p>Statistics collection is disabled.</p>
		{{/if}}

		<div style="margin: auto; width: 60%; padding-top: 60px; text-align: center">
			<button type="button" class="reload" style="width: 40%">Reload</button>
			<span style="position: relative; top: 5px; padding-left: 20px" class="lw-show-ignored-conflicts">
				<input type="checkbox" id="lw-ignored-conflicts-checkbox" name="lw-show-ignored-conflicts-checkbox" {{#if show_ignored_conflicts}}checked{{/if}}>
				<label for="lw-ignored-conflicts-checkbox" style="position: relative; top: -5px"> Show ignored conflicts</label>
			</span>
		</div>
	</section>

	<section class='tab' data-tab='Wrappers'>
		<h1>Active Wrappers</h1>
		{{#if wrappers}}
			{{#each wrappers}}
			<ul id="{{this.name}}" class="has-nested">
				<li><span class="caret has-nested">{{this.name}} (x{{this.packages.length}})</span>
					<ul class="nested">
					{{#each this.packages}}
						<li>{{this.name}} ({{this.type}}{{this.perf_mode}})</li>
					{{/each}}
					</ul>
				</li>
			</ul>
			{{/each}}
		{{^}}
			<p>No wrappers are active right now.</p>
		{{/if}}

		<div style="margin: auto; width: 15%; padding-top: 60px">
			<button type="button" class="reload" style="width:100%">Reload</button>
		</div>
	</section>

	<section class='tab' data-tab='About'>
		<h1>About libWrapper</h1>
		<p style="text-align: center"><b>{{about.name}} {{about.version}} by Rui Pinheiro.</b></p>

		<p>'libWrapper' is a library which provides package developers with a simple way to modify core Foundry VTT code, while reducing the likelihood of conflict with other packages.</p>
		<p>You can find more information about this module in the <a href="https://foundryvtt.com/packages/lib-wrapper">Foundry VTT package repository</a>, as well as the project's <a href="https://github.com/ruipin/fvtt-lib-wrapper/">Github page</a>.</p>

		<p><b>If you encounter any issues</b>, the easiest way to find support is to ask the community. The largest community-provided support channels are:</p>
		<ul>
			<li><a href="https://discord.gg/foundryvtt">FoundryVTT Discord</a>'s #modules-troubleshooting channel.</li>
			<li><a href="https://www.reddit.com/r/FoundryVTT">FoundryVTT Reddit</a></li>
		</ul>
		<p>If you encounter an <b>internal libWrapper error</b>, or are a <b>package developer</b>, you may also submit a support request in the <a href="https://github.com/ruipin/fvtt-lib-wrapper/issues">libWrapper Github Issue Tracker</a>.</p>
	</section>
</form>