<script>
	import Panel from './Panel.svelte';
	import Modfiles from './Modfiles.svelte';
	import { sort, sortMode, sortingModes, groups, groupsEnabled } from './modfiles';
	
	const groupIcons = ['unarchive', 'link'];
</script>

<style>
	.columns {
		display: flex;
		justify-content: center;
		gap: 30px;
  	flex-flow: row wrap;
		align-items: flex-start;
	}
	.nowrap {
		display: inline-block;
	}

	@media screen and (max-width: 953px) {
		:global(.panel) {
			position: inherit !important;
		}
		.columns {
			justify-content: center;
		}
		.columns:nth-child(3) {
			order: 1;
		}
	}

	.columns:nth-child(1) {
		order: 0;
	}
	.columns:nth-child(2) {
		order: 2;
	}
	.columns:nth-child(3) {
		order: 3;
	}

	.options {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	.options button {
		border: 2px solid var(--fg);
		box-shadow: 2px 2px 0 #000, 4px 4px 0 var(--bg);
		border-radius: 0px;
		padding: 4px;

    background: linear-gradient(180deg, black 0%, var(--fg, white) 0% 100%);
    background-repeat: no-repeat;
    background-position: 0px -40px;

		transition: 0.2s background-position, 0.2s color;

		cursor: pointer;
	}
	.options button.selected {
		color: #000;
    background-position: 0px 0px;
	}
	
	.options button i {
		display: inline-block;
		line-height: 1;
		vertical-align: middle;
	}
</style>

<div class="columns">
	<Panel type="hi!" --fg="#3FA58C" --bg="#3a7a6a" --fg2="#89e8d0" --position="sticky">
		this is my cozy little space for modfiles! you'll be able to find <span class="nowrap"><b><i class="material-icons">unarchive</i> pack downloads</b></span>, <span class="nowrap"><b><i class="material-icons">music_note</i> song links</b></span>, <span class="nowrap"><b><i class="material-icons">video_library</i> video lineouts</b></span> and most importantly <span class="nowrap"><b><i class="material-icons">file_download</i> downloads</b></span> for my files here.<br><br>

		here's a few useful links:<br>

		<ul>
			<li><a target="_blank" rel="noopener noreferrer" href="https://noti.tg/">NotITG's homepage</a></li>
			<li><a target="_blank" rel="noopener noreferrer" href="https://oat.zone/">my homepage</a></li>
			<li><a target="_blank" rel="noopener noreferrer" href="https://noti.tg/discord">NotITG Discord</a></li>
			<li><a target="_blank" rel="noopener noreferrer" href="https://git.oat.zone/oat/oat-zone-modfiles">page source code</a></li>
		</ul>
	</Panel>
	<Panel type="modfiles" --fg="#DD5B5A" --bg="#7e3a3a" --width="450px">
		<Modfiles --fg="#DD5B5A" --bg="#7e3a3a"/>
	</Panel>
	<Panel type="sorting" --fg="#B6C436" --bg="#747c26" --position="sticky">
		<b>Sort:</b><br>
		<div class="options">
			{#each sortingModes as mode}<button class:selected={mode === $sortMode} on:click={() => {sort(mode)}}>{mode}</button>{/each}
		</div>
		<b>Include:</b><br>
		<div class="options">
			{#each groups as mode, i}<button class:selected={$groupsEnabled[i]} on:click={() => {$groupsEnabled[i] = !$groupsEnabled[i]}}>{#if groupIcons[i]}<i class="material-icons">{groupIcons[i]}</i> {/if}{mode}</button>{/each}
		</div>
	</Panel>
</div>
