{include "admin/layout.html"}

{block "content"}
<h1>Spell Learning: {class.Name}</h1>

<div style="margin-bottom: 1rem;">
	<a href="/admin/classes/{class.ID}" class="btn">← Back to Class</a>
</div>

<!-- Current Spell Unlocks -->
<h2>Current Spell Unlocks</h2>
{if #currentUnlocks > 0}
<table>
	<thead>
		<tr>
			<th>Level</th>
			<th>Spell</th>
			<th>Type</th>
			<th>MP</th>
			<th>Power</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody>
		{for unlock in currentUnlocks}
		<tr>
			<td>{unlock.Level}</td>
			<td>{unlock.SpellName}</td>
			<td>{unlock.SpellType}</td>
			<td>{unlock.SpellMP}</td>
			<td>{unlock.SpellPower}</td>
			<td>
				<form method="post" style="display: inline;">
					{csrf}
					<input type="hidden" name="action" value="remove">
					<input type="hidden" name="spell_id" value="{unlock.SpellID}">
					<input type="hidden" name="level" value="{unlock.Level}">
					<button type="submit" class="btn btn-small btn-danger" onclick="return confirm('Remove this spell unlock?')">Remove</button>
				</form>
			</td>
		</tr>
		{/for}
	</tbody>
</table>
{else}
<p>No spells currently unlocked for this class.</p>
{/if}

<!-- Add New Spell Unlock -->
<h2>Add Spell Unlock</h2>
<form method="post" class="standard">
	{csrf}
	<input type="hidden" name="action" value="add">

	<div>
		<label for="spell-search">Search for Spell:</label>
		<input type="text" id="spell-search" placeholder="Type spell name..." autocomplete="off">
		<div id="spell-results" style="border: 1px solid #ccc; background: white; max-height: 200px; overflow-y: auto; display: none; position: relative; z-index: 1000;"></div>
	</div>

	<div>
		<label for="selected-spell">Selected Spell:</label>
		<div id="selected-spell" style="padding: 0.5rem; border: 1px solid #ccc; background: #f9f9f9; min-height: 2rem;">
			<em>No spell selected</em>
		</div>
		<input type="hidden" name="spell_id" id="spell-id" required>
	</div>

	<div>
		<label for="level">Learn at Level:</label>
		<input type="number" name="level" id="level" min="1" max="50" value="1" required>
		<small>Level at which this spell becomes available</small>
	</div>

	<div>
		<button type="submit" class="btn btn-primary">Add Spell Unlock</button>
	</div>
</form>

<script src="/assets/scripts/spell-search.js"></script>
{/block}