{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin")}}
<div class="admin-setting-content">
	<h4 class="ui top attached header">
		Product Tiers
		<div class="ui right">
			<button class="ui primary tiny button" id="btn-new-tier">New Tier</button>
		</div>
	</h4>
	<div class="ui attached segment">
		{{if .Tiers}}
		<table class="ui very basic striped table">
			<thead>
				<tr>
					<th>Key</th>
					<th>Name</th>
					<th>Repos</th>
					<th>Max Domains</th>
					<th>Licenses</th>
					<th>Order</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				{{range .Tiers}}
				<tr>
					<td><code>{{.TierKey}}</code></td>
					<td>{{.TierName}}</td>
					<td>
						{{range .Repos}}
							<span class="ui label">{{.}}</span>
						{{end}}
					</td>
					<td>{{if eq .MaxDomains 0}}Unlimited{{else}}{{.MaxDomains}}{{end}}</td>
					<td>{{.LicenseCount}}</td>
					<td>{{.SortOrder}}</td>
					<td class="right aligned">
						<form method="post" action="{{AppSubUrl}}/-/admin/license-tiers/{{.ID}}/delete" style="display:inline">
							{{$.CsrfTokenHtml}}
							<input type="hidden" name="id" value="{{.ID}}">
							<button class="ui tiny red button{{if gt .LicenseCount 0}} disabled{{end}}" type="submit"
								{{if gt .LicenseCount 0}}title="Cannot delete tier with active licenses"{{end}}>
								Delete
							</button>
						</form>
					</td>
				</tr>
				{{end}}
			</tbody>
		</table>
		{{else}}
		<p>No product tiers defined. Create one to get started.</p>
		{{end}}
	</div>

	<!-- New Tier Form (hidden by default) -->
	<div id="new-tier-form" class="ui attached segment" style="display:none">
		<h5>Create New Tier</h5>
		<form method="post" action="{{AppSubUrl}}/-/admin/license-tiers" class="ui form">
			{{.CsrfTokenHtml}}
			<div class="two fields">
				<div class="field">
					<label>Tier Key</label>
					<input type="text" name="tier_key" placeholder="e.g. pos, suite, enterprise" required>
				</div>
				<div class="field">
					<label>Tier Name</label>
					<input type="text" name="tier_name" placeholder="e.g. MokoSuite POS" required>
				</div>
			</div>
			<div class="two fields">
				<div class="field">
					<label>Max Domains (0 = unlimited)</label>
					<input type="number" name="max_domains" value="3" min="0">
				</div>
				<div class="field">
					<label>Sort Order</label>
					<input type="number" name="sort_order" value="50" min="0">
				</div>
			</div>
			<div class="field">
				<label>Repos (comma-separated)</label>
				<input type="text" name="repos" placeholder="MokoSuite,MokoSuiteCRM,MokoSuiteERP">
				<p class="help">Enter repo names separated by commas</p>
			</div>
			<button class="ui primary button" type="submit">Create Tier</button>
			<button class="ui button" type="button" id="btn-cancel-tier">Cancel</button>
		</form>
	</div>
</div>

<script>
document.getElementById('btn-new-tier').addEventListener('click', function() {
	document.getElementById('new-tier-form').style.display = '';
	this.style.display = 'none';
});
document.getElementById('btn-cancel-tier').addEventListener('click', function() {
	document.getElementById('new-tier-form').style.display = 'none';
	document.getElementById('btn-new-tier').style.display = '';
});
</script>
{{template "admin/layout_footer" .}}
