{% INCLUDE 'overall_header.html' %}

<div class="slotmachine-page">
	<div class="slotmachine-layout">
		<div class="slotmachine-main panel">
			<div class="inner">
				<div class="slotmachine-hero">
					<h2 class="slotmachine-title">{{ lang('SLOTMACHINE_TITLE') }}</h2>
					<p class="slotmachine-subtitle">{{ lang('SLOTMACHINE_SUBTITLE') }}</p>
				</div>

				<div
					class="slotmachine-cabinet"
					id="slotmachine"
					data-spin-url="{{ U_SLOTMACHINE_SPIN }}"
					data-claim-url="{{ U_SLOTMACHINE_CLAIM }}"
					data-collect-url="{{ U_SLOTMACHINE_COLLECT }}"
					data-convert-url="{{ U_SLOTMACHINE_CONVERT }}"
					data-buy-url="{{ U_SLOTMACHINE_BUY_CREDITS }}"
					data-sound-enabled="{% if SLOTMACHINE_ENABLE_SOUND %}1{% else %}0{% endif %}"
					data-label-sound-on="{{ lang('SLOTMACHINE_SOUND_ON')|e('html_attr') }}"
					data-label-sound-off="{{ lang('SLOTMACHINE_SOUND_OFF')|e('html_attr') }}"
					data-message-spinning="{{ lang('SLOTMACHINE_SPINNING')|e('html_attr') }}"
					data-message-error="{{ lang('SLOTMACHINE_GENERIC_ERROR')|e('html_attr') }}"
					data-message-no-data="{{ lang('SLOTMACHINE_NO_DATA_YET')|e('html_attr') }}"
					data-max-lines="{{ SLOTMACHINE_MAX_LINES }}"
					data-cost-per-line="{{ SLOTMACHINE_COST_PER_SPIN_RAW }}"
				>
					<div class="slotmachine-stage">
						<div class="slotmachine-machine-core">
							<div class="slotmachine-topbar">
								<div class="slotmachine-topbar-label">{{ lang('SLOTMACHINE_LIGHTS') }}</div>
								<div class="slotmachine-cost">{{ lang('SLOTMACHINE_COST_PER_SPIN') }}: <strong id="slotmachine-cost-total">{{ SLOTMACHINE_COST_PER_SPIN }}</strong></div>
							</div>

							<div class="slotmachine-reels slotmachine-reels-grid" aria-live="polite">
								{% for row in 0..2 %}
									{% for col in 1..5 %}
									<div class="slotmachine-reel slotmachine-grid-cell" id="reel-{{ row }}-{{ col }}"><span class="slotmachine-symbol slotmachine-symbol-seven" aria-label="{{ lang('SLOTMACHINE_SYMBOL_SEVEN_NAME') }}">7</span></div>
									{% endfor %}
								{% endfor %}
							</div>

							<div class="slotmachine-hud slotmachine-hud-clean">
								<div class="slotmachine-hud-box slotmachine-hud-box-compact">
									<span>{{ lang('SLOTMACHINE_CREDITS') }}</span>
									<strong id="slotmachine-credits">{{ SLOTMACHINE_CREDITS }}</strong>
								</div>
								<div class="slotmachine-hud-box slotmachine-hud-box-compact slotmachine-pending-card">
									<span>{{ lang('SLOTMACHINE_PENDING_WIN') }}</span>
									<strong id="slotmachine-pending-win">{{ SLOTMACHINE_PENDING_WIN }}</strong>
								</div>
								<div class="slotmachine-hud-box slotmachine-hud-box-compact">
									<span>{{ SLOTMACHINE_PERIOD_LABEL }}</span>
									<strong id="slotmachine-score">{{ SLOTMACHINE_PERIOD_SCORE }}</strong>
								</div>
								{% if S_SLOTMACHINE_UP_BUY_ENABLED or S_SLOTMACHINE_UP_COLLECT_ENABLED %}
								<div class="slotmachine-hud-box slotmachine-upbox slotmachine-upbox-compact slotmachine-up-balance-card">
									<span>{{ SLOTMACHINE_UP_POINTS_NAME }}</span>
									<strong id="slotmachine-up-balance">{{ SLOTMACHINE_UP_BALANCE }}</strong>
								</div>
								{% if S_SLOTMACHINE_UP_BUY_ENABLED %}
								<div class="slotmachine-hud-box slotmachine-upbox slotmachine-upbox-compact slotmachine-up-rate-card">
									<span>{{ lang('SLOTMACHINE_UP_BUY_LABEL', SLOTMACHINE_UP_POINTS_NAME) }}</span>
									<strong>{{ SLOTMACHINE_UP_BUY_POINTS }} = {{ SLOTMACHINE_UP_BUY_CREDITS }}</strong>
								</div>
								{% endif %}

								<button class="slotmachine-button slotmachine-button-collect slotmachine-top-action" id="slotmachine-collect-button" type="button"{% if not SLOTMACHINE_HAS_PENDING_WIN %} disabled="disabled"{% endif %}>{{ lang('SLOTMACHINE_COLLECT_BUTTON') }}</button>
								{% if S_SLOTMACHINE_UP_COLLECT_ENABLED %}
								<button class="slotmachine-button slotmachine-button-convert slotmachine-top-action" id="slotmachine-convert-button" type="button"{% if not SLOTMACHINE_HAS_PENDING_WIN %} disabled="disabled"{% endif %}>{{ lang('SLOTMACHINE_UP_CONVERT_BUTTON', SLOTMACHINE_UP_POINTS_NAME) }}</button>
								{% endif %}
								{% endif %}
							</div>
						</div>

						<button class="slotmachine-handle" id="slotmachine-handle" type="button" aria-label="{{ lang('SLOTMACHINE_PULL_HANDLE') }}">
							<span class="slotmachine-handle-knob"></span>
							<span class="slotmachine-handle-stick"></span>
						</button>
					</div>


					<div class="slotmachine-lines-bottom">
						<div class="slotmachine-lines-card slotmachine-lines-card-bottom">
							<label for="slotmachine-lines">{{ lang('SLOTMACHINE_LINES') }}</label>
							<div class="slotmachine-lines-stepper">
								<button class="slotmachine-lines-minus" id="slotmachine-lines-minus" type="button" aria-label="-">−</button>
								<input type="number" id="slotmachine-lines" value="1" min="1" max="{{ SLOTMACHINE_MAX_LINES }}" autocomplete="off">
								<button class="slotmachine-lines-plus" id="slotmachine-lines-plus" type="button" aria-label="+">+</button>
							</div>
							<button class="slotmachine-button slotmachine-button-maxlines" id="slotmachine-max-lines-button" type="button">{{ lang('SLOTMACHINE_MAX_LINES_BUTTON') }}</button>
							<span class="slotmachine-lines-info">{{ lang('SLOTMACHINE_MAX_LINES_INFO', SLOTMACHINE_MAX_LINES) }}</span>
						</div>
					</div>

					<div class="slotmachine-controls slotmachine-controls-clean">
						<button class="slotmachine-button slotmachine-button-spin" id="slotmachine-spin-button" type="button">{{ lang('SLOTMACHINE_SPIN') }}</button>
						<button class="slotmachine-button slotmachine-button-claim" id="slotmachine-claim-button" type="button"{% if not SLOTMACHINE_CAN_CLAIM %} disabled="disabled"{% endif %}>{{ lang('SLOTMACHINE_TODAY_REFILL') }}</button>
						{% if S_SLOTMACHINE_UP_BUY_ENABLED %}
						<button class="slotmachine-button slotmachine-button-buy" id="slotmachine-buy-button" type="button">{{ lang('SLOTMACHINE_UP_BUY_BUTTON', SLOTMACHINE_UP_BUY_CREDITS) }}</button>
						{% endif %}
						<button class="slotmachine-button slotmachine-button-mute" id="slotmachine-mute-button" type="button">{{ lang('SLOTMACHINE_ENABLE_SOUND') }}</button>
					</div>

					<div class="slotmachine-message" id="slotmachine-message" aria-live="polite"></div>
				</div>
			</div>
		</div>

		<aside class="slotmachine-sidebar">
			<div class="panel slotmachine-sidebar-panel">
				<div class="inner">
					<div class="slotmachine-sidebar-head">{{ lang('SLOTMACHINE_SIDEBAR_TITLE') }}</div>

					<div class="slotmachine-usercard">
						<div class="slotmachine-avatar">{{ SLOTMACHINE_AVATAR }}</div>
						<div class="slotmachine-usermeta">
							<h3>{{ lang('SLOTMACHINE_PLAYER_PANEL') }}</h3>
							<div class="slotmachine-username">{{ SLOTMACHINE_USERNAME_FULL }}</div>
							<div class="slotmachine-spin-count">{{ lang('SLOTMACHINE_SPINS') }}: <span>{{ SLOTMACHINE_SPINS }}</span></div>
							{% if S_SLOTMACHINE_GUEST %}<div class="slotmachine-guest-note">{{ lang('SLOTMACHINE_GUEST_PROGRESS_NOT_SAVED') }}</div>{% endif %}
						</div>
					</div>

					<div class="slotmachine-sidebar-divider"></div>

					<div class="slotmachine-board">
						<h3>{{ lang('SLOTMACHINE_LEADERBOARD_CURRENT_PERIOD', SLOTMACHINE_PERIOD_LABEL) }}</h3>
						<div class="slotmachine-leaderboard" id="slotmachine-leaderboard">
							<!-- BEGIN leaderboard -->
							<div class="slotmachine-row{% if leaderboard.RANK == 1 %} slotmachine-row-top slotmachine-row-first{% elseif leaderboard.RANK == 2 %} slotmachine-row-top slotmachine-row-second{% elseif leaderboard.RANK == 3 %} slotmachine-row-top slotmachine-row-third{% endif %}">
								<div class="slotmachine-row-rank">{{ leaderboard.RANK }}</div>
								<div class="slotmachine-row-user">
									{% if leaderboard.AVATAR %}<span class="slotmachine-row-avatar">{{ leaderboard.AVATAR }}</span>{% endif %}
									<span class="slotmachine-row-name">{{ leaderboard.USERNAME_FULL }}</span>
								</div>
								<div class="slotmachine-row-score">{{ leaderboard.SCORE }}</div>
							</div>
							<!-- BEGINELSE -->
							<p class="slotmachine-empty">{{ lang('SLOTMACHINE_NO_DATA_YET') }}</p>
							<!-- END leaderboard -->
						</div>
					</div>
				</div>
			</div>
		</aside>
	</div>
	<div class="panel slotmachine-paytable-panel">
		<div class="inner">
			<div class="slotmachine-paytable slotmachine-paytable-fullwidth">
				<div class="slotmachine-paytable-title">{{ lang('SLOTMACHINE_PAYTABLE_TITLE') }}</div>
				<div class="slotmachine-paytable-tablewrap">
					<table class="slotmachine-paytable-table">
						<thead>
							<tr>
								<th class="slotmachine-paytable-col-symbol">{{ lang('SLOTMACHINE_SYMBOL_COLUMN') }}</th>
								<th>{{ lang('SLOTMACHINE_NAME_EXPLAIN_COLUMN') }}</th>
								<th class="slotmachine-paytable-col-payout">3x</th>
								<th class="slotmachine-paytable-col-payout">4x</th>
								<th class="slotmachine-paytable-col-payout">5x</th>
							</tr>
						</thead>
						<tbody>
							<tr class="slotmachine-paytable-featured">
								<td class="slotmachine-paytable-symbolcell"><span class="slotmachine-symbol slotmachine-symbol-joker" aria-hidden="true">🃏</span></td>
								<td>
									<strong>{{ lang('SLOTMACHINE_SYMBOL_JOKER_NAME') }}</strong>
									<span>{{ lang('SLOTMACHINE_SYMBOL_JOKER_HELP') }}</span>
								</td>
								<td>6x</td>
								<td>16x</td>
								<td>40x</td>
							</tr>
							<tr class="slotmachine-paytable-featured">
								<td class="slotmachine-paytable-symbolcell"><span class="slotmachine-symbol slotmachine-symbol-seven" aria-hidden="true">7</span></td>
								<td>
									<strong>{{ lang('SLOTMACHINE_SYMBOL_SEVEN_NAME') }}</strong>
									<span>{{ lang('SLOTMACHINE_SYMBOL_SEVEN_HELP') }}</span>
								</td>
								<td>5x</td>
								<td>12x</td>
								<td>50x</td>
							</tr>
							<tr>
								<td class="slotmachine-paytable-symbolcell"><span class="slotmachine-symbol slotmachine-symbol-bar" aria-hidden="true"><span>B</span><span>A</span><span>R</span></span></td>
								<td>
									<strong>{{ lang('SLOTMACHINE_SYMBOL_BAR_NAME') }}</strong>
									<span>{{ lang('SLOTMACHINE_SYMBOL_BAR_HELP') }}</span>
								</td>
								<td>-</td>
								<td>8x</td>
								<td>30x</td>
							</tr>
							<tr>
								<td class="slotmachine-paytable-symbolcell"><span class="slotmachine-symbol slotmachine-symbol-bell" aria-hidden="true">🔔</span></td>
								<td>
									<strong>{{ lang('SLOTMACHINE_SYMBOL_BELL_NAME') }}</strong>
									<span>{{ lang('SLOTMACHINE_SYMBOL_BELL_HELP') }}</span>
								</td>
								<td>4x</td>
								<td>-</td>
								<td>-</td>
							</tr>
							<tr>
								<td class="slotmachine-paytable-symbolcell"><span class="slotmachine-symbol slotmachine-symbol-grape" aria-hidden="true">🍇</span></td>
								<td>
									<strong>{{ lang('SLOTMACHINE_SYMBOL_GRAPE_NAME') }}</strong>
									<span>{{ lang('SLOTMACHINE_SYMBOL_GRAPE_HELP') }}</span>
								</td>
								<td>3x</td>
								<td>6x</td>
								<td>20x</td>
							</tr>
							<tr>
								<td class="slotmachine-paytable-symbolcell"><span class="slotmachine-symbol slotmachine-symbol-lemon" aria-hidden="true">🍋</span></td>
								<td>
									<strong>{{ lang('SLOTMACHINE_SYMBOL_LEMON_NAME') }}</strong>
									<span>{{ lang('SLOTMACHINE_SYMBOL_LEMON_HELP') }}</span>
								</td>
								<td>3x</td>
								<td>6x</td>
								<td>20x</td>
							</tr>
							<tr>
								<td class="slotmachine-paytable-symbolcell"><span class="slotmachine-symbol slotmachine-symbol-watermelon" aria-hidden="true">🍉</span></td>
								<td>
									<strong>{{ lang('SLOTMACHINE_SYMBOL_WATERMELON_NAME') }}</strong>
									<span>{{ lang('SLOTMACHINE_SYMBOL_WATERMELON_HELP') }}</span>
								</td>
								<td>3x</td>
								<td>6x</td>
								<td>20x</td>
							</tr>
							<tr>
								<td class="slotmachine-paytable-symbolcell"><span class="slotmachine-symbol slotmachine-symbol-clover" aria-hidden="true">🍀</span></td>
								<td>
									<strong>{{ lang('SLOTMACHINE_SYMBOL_CLOVER_NAME') }}</strong>
									<span>{{ lang('SLOTMACHINE_SYMBOL_CLOVER_HELP') }}</span>
								</td>
								<td>3x</td>
								<td>6x</td>
								<td>20x</td>
							</tr>
							<tr class="slotmachine-paytable-mixrow">
								<td class="slotmachine-paytable-symbolcell"><span class="slotmachine-payrow-mix">7 + BAR</span></td>
								<td>
									<strong>{{ lang('SLOTMACHINE_SYMBOL_MIX_NAME') }}</strong>
									<span>{{ lang('SLOTMACHINE_SYMBOL_MIX_HELP') }}</span>
								</td>
								<td colspan="3" class="slotmachine-paytable-mixpayout">{{ lang('SLOTMACHINE_SYMBOL_MIX_PAYOUTS') }}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

{% INCLUDEJS '@spiderpiggy_slotmachine/slotmachine.js' %}
{% INCLUDECSS '@spiderpiggy_slotmachine/slotmachine.css' %}
{% INCLUDE 'overall_footer.html' %}