{% extends "layout.html" %}
{% block content %}
<section class="authentication-section">
	{% if reset_mode %}
	<div class="content-card">
		<h2 class="section-title"><i data-lucide="key-round"></i> Passwort zurücksetzen</h2>
		<form action="{{ url_for('handle_password_reset') }}" method="POST" class="input-form">
			<input type="hidden" name="token" value="{{ token }}">
			<div class="form-group">
				<label for="password_string" class="input-label">Neues Passwort</label>
				<input type="password" id="password_string" name="password_string" class="text-input" required>
			</div>
			<div class="form-group">
				<label for="password_string_confirmation" class="input-label">Passwort bestätigen</label>
				<input type="password" id="password_string_confirmation" name="password_string_confirmation" class="text-input" required>
			</div>
			<button type="submit" class="action-button primary-button"><i data-lucide="save"></i> Speichern</button>
		</form>
	</div>
	{% elif register_mode %}
	<div class="content-card">
		<h2 class="section-title"><i data-lucide="user-plus"></i> Registrieren</h2>
		<form action="{{ url_for('handle_registration') }}" method="POST" class="input-form">
			<div class="form-group">
				<label for="display_name" class="input-label">Name</label>
				<input type="text" id="display_name" name="display_name" class="text-input" required>
			</div>
			<div class="form-group">
				<label for="password_string" class="input-label">Passwort</label>
				<input type="password" id="password_string" name="password_string" class="text-input" required>
			</div>
			<div class="form-group">
				<label for="password_string_confirmation" class="input-label">Passwort bestätigen</label>
				<input type="password" id="password_string_confirmation" name="password_string_confirmation" class="text-input" required>
			</div>
			<button type="submit" class="action-button primary-button"><i data-lucide="check-circle"></i> Konto erstellen</button>
		</form>
	</div>
	<div class="content-card" style="text-align: center;">
		<a href="{{ url_for('handle_login') }}" class="action-button secondary-button"><i data-lucide="arrow-left"></i> Zur Anmeldung</a>
	</div>
	{% elif registration_success %}
	<div class="content-card notice-card success-card" style="text-align: center;">
		<h2 class="section-title" style="justify-content: center;"><i data-lucide="party-popper"></i> Erfolgreich</h2>
		<h2 style="color: var(--fallback-danger); color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));">Wichtig!</h2>
		<p>Deine ID:</p>
		<h1 class="monospace-identifier" style="font-size: calc(3rem * var(--dimension-multiplier)); letter-spacing: calc(0.25rem * var(--dimension-multiplier)); color: var(--fallback-primary); color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary)); margin: var(--spacing-medium) 0;">{{ new_identifier }}</h1>
		<button type="button" id="copy-identifier-button" class="action-button secondary-button" data-identifier="{{ new_identifier }}"><i data-lucide="copy"></i> ID kopieren</button>
		<p style="margin-top: var(--spacing-medium);">Gut aufbewahren!</p>
		<div style="margin-top: var(--spacing-large);">
			<a href="{{ url_for('handle_login', prefill_identifier=new_identifier) }}" class="action-button primary-button"><i data-lucide="log-in"></i> Anmelden</a>
		</div>
	</div>
	{% else %}
	<div class="content-card">
		<h2 class="section-title"><i data-lucide="lock"></i> Login</h2>
		<form action="{{ url_for('handle_login') }}" method="POST" class="input-form">
			<div class="form-group">
				<label for="player_identifier" class="input-label">ID</label>
				<input type="text" id="player_identifier" name="player_identifier" class="text-input" value="{{ request.args.get('prefill_identifier', '') }}" style="text-transform: uppercase;" maxlength="{{ identifier_length }}" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '').toUpperCase().slice(0, {{ identifier_length }});" pattern="[A-Za-z]{{ '{' }}{{ identifier_length }}{{ '}' }}" required>
			</div>
			<div class="form-group">
				<label for="password_string" class="input-label">Passwort</label>
				<input type="password" id="password_string" name="password_string" class="text-input" required>
			</div>
			<button type="submit" class="action-button primary-button"><i data-lucide="log-in"></i> Anmelden</button>
		</form>
	</div>
	<div class="content-card" style="text-align: center; display: flex; flex-direction: column; gap: var(--spacing-medium);">
		<a href="{{ url_for('handle_registration') }}" class="action-button secondary-button"><i data-lucide="user-plus"></i> Registrieren</a>
		<button type="button" id="trigger-help-modal" class="action-button secondary-button"><i data-lucide="life-buoy"></i> Probleme beim Login?</button>
	</div>

	<div id="help-modal" class="modal-overlay">
		<div class="modal-dialog">
			<h2 class="modal-title"><i data-lucide="help-circle"></i> Hilfe</h2>
			<p class="modal-description">Wende dich an die Spielleitung, falls du deine ID oder dein Passwort vergessen hast.</p>
			<div class="modal-actions">
				<button type="button" id="close-help-modal" class="action-button primary-button"><i data-lucide="check"></i> Okay</button>
			</div>
		</div>
	</div>
	{% endif %}
</section>
{% endblock %}