{% extends "base.jinja2" %}

{% block title %}Account - DarkflameServer{% endblock %}

{% block css %}{% endblock %}

{% block content %}
	<div class="account-view-container">
		<div class="container-fluid">
			<a href="/accounts" class="back-link">← Back to Accounts</a>

			<div class="card">
				<div class="card-header">
					<h2>Account #{{ account.id }} - {{ account.name }}</h2>
					<p class="text-muted">View account details and manage settings</p>
				</div>
				<div class="card-body">
					<div class="detail-grid">
						<div class="detail-item">
							<div class="detail-label">Account ID</div>
							<div class="detail-value">{{ account.id }}</div>
						</div>

						<div class="detail-item">
							<div class="detail-label">Username</div>
							<div class="detail-value">{{ account.name }}</div>
						</div>

						<div class="detail-item">
							<div class="detail-label">Created</div>
							<div class="detail-value">{{ account.created_at }}</div>
						</div>

						<div class="detail-item">
							<div class="detail-label">GM Level</div>
							<div class="detail-value">
								{% if account.gm_level > 0 %}
									<span class="badge badge-gm">GM {{ account.gm_level }}</span>
								{% else %}
									<span class="badge badge-inactive">User</span>
								{% endif %}
							</div>
						</div>

						<div class="detail-item">
							<div class="detail-label">Ban Status</div>
							<div class="detail-value">
								{% if account.banned %}
									<span class="badge badge-banned">BANNED</span>
								{% else %}
									<span class="badge badge-active">Active</span>
								{% endif %}
							</div>
						</div>

						<div class="detail-item">
							<div class="detail-label">Lock Status</div>
							<div class="detail-value">
								{% if account.locked %}
									<span class="badge badge-locked">LOCKED</span>
								{% else %}
									<span class="badge badge-active">Unlocked</span>
								{% endif %}
							</div>
						</div>

						<div class="detail-item">
							<div class="detail-label">Mute Expires</div>
							<div class="detail-value">
								{% if account.mute_expire > 0 %}
									<span>{{ account.mute_expire }}</span>
								{% else %}
									<span class="text-muted">Not muted</span>
								{% endif %}
							</div>
						</div>
					</div>

					<div class="button-group">
						<button class="btn btn-primary" onclick="EditAccount()">Edit Account</button>
						{% if not account.banned %}
							<button class="btn btn-danger" onclick="BanAccount()">Ban Account</button>
						{% else %}
							<button class="btn btn-secondary" onclick="UnbanAccount()">Unban Account</button>
						{% endif %}
						{% if not account.locked %}
							<button class="btn btn-danger" onclick="LockAccount()">Lock Account</button>
						{% else %}
							<button class="btn btn-secondary" onclick="UnlockAccount()">Unlock Account</button>
						{% endif %}
					</div>
				</div>
			</div>

			<!-- TODO: Add modals for edit, ban, lock operations -->
			<!-- TODO: Add character list for this account -->
			<!-- TODO: Add login history -->
		</div>
	</div>
{% endblock %}

{% block scripts %}
	<script>
		function EditAccount() {
			alert("Edit functionality coming soon");
			// TODO: Open edit modal
		}

		function BanAccount() {
			if (confirm("Are you sure you want to ban this account?")) {
				alert("Ban functionality coming soon");
				// TODO: Call ban API endpoint
			}
		}

		function UnbanAccount() {
			if (confirm("Are you sure you want to unban this account?")) {
				alert("Unban functionality coming soon");
				// TODO: Call unban API endpoint
			}
		}

		function LockAccount() {
			if (confirm("Are you sure you want to lock this account?")) {
				alert("Lock functionality coming soon");
				// TODO: Call lock API endpoint
			}
		}

		function UnlockAccount() {
			if (confirm("Are you sure you want to unlock this account?")) {
				alert("Unlock functionality coming soon");
				// TODO: Call unlock API endpoint
			}
		}
	</script>
{% endblock %}