{{if .}}
<ul class="app-list">
{{range .}}
	{{$app := .}}
	<li class="app-item">
		<div class="app-info">
			<div class="app-name"><strong>{{.AppName}}</strong></div>
			{{if .Channels}}
			<div class="app-subscriptions">
				{{range .Channels}}
					{{$channel := .}}
					{{if .Toggleable}}
						{{if .Active}}
							<button type="button" class="channel-badge channel-{{.Channel}} badge-active" 
							hx-delete="/apps/{{$app.AppName}}/subscriptions/{{(index .Subscriptions 0).ID}}" 
								hx-target="#apps-list" 
							hx-swap="innerHTML">
								{{.Label}}
								<span class="tooltip">Channel ID: {{(index .Subscriptions 0).ID}}</span>
							</button>
						{{else}}
							<button type="button" class="channel-badge channel-{{.Channel}} badge-inactive" 
							hx-post="/apps/{{$app.AppName}}/subscriptions" 
								hx-target="#apps-list" 
								hx-swap="innerHTML" 
								hx-vals='{"channel":"{{.Channel}}"}'>
								+ {{.Label}}
								<span class="tooltip">Click to enable</span>
							</button>
						{{end}}
					{{else}}
						{{range .Subscriptions}}
						<span class="channel-badge channel-{{$channel.Channel}} badge-subscribed">
							{{$channel.Label}}
							<span class="tooltip">Channel ID: {{.ID}}</span>
							<button type="button" class="btn-delete-sub" 
							hx-delete="/apps/{{$app.AppName}}/subscriptions/{{.ID}}" 
								hx-target="#apps-list" 
								hx-swap="innerHTML" 
								hx-confirm="Delete this channel?"
								aria-label="Remove {{$channel.Channel}} channel">×</button>
						</span>
						{{end}}
					{{end}}
				{{end}}
			</div>
			{{else}}
			<div class="app-no-subscriptions">
				<span class="channel-badge channel-not-configured">No integrations linked</span>
			</div>
			{{end}}
		</div>
		<div class="app-actions">
			<button type="button" class="btn-delete" hx-delete="/apps/{{.AppName}}" hx-target="#apps-list" hx-swap="innerHTML" hx-confirm="Delete {{.AppName}} and all subscriptions?">Delete</button>
		</div>
	</li>
{{end}}
</ul>
{{else}}
<p>No apps registered yet. See <a href="https://github.com/lone-cloud/prism?tab=readme-ov-file#real-world-examples" target="_blank" rel="noopener noreferrer">real-world examples</a> to get started.</p>
{{end}}
