{{define "invite"}}
{{template "header" .}}
<style>
.half {
	margin-right: 0.5em;
}
.half + .half {
	margin-left: 0.5em;
	margin-right: 0;
}
label {
	font-weight: bold;
}
select {
	font-size: 1em;
	width: 100%;
	padding: 0.5rem;
	display: block;
	border-radius: 0.25rem;
	margin: 0.5rem 0;
}
input, table.classy {
	width: 100%;
}
table.classy.export a {
	text-transform: initial;
}
table td {
	font-size: 0.86em;
}
</style>

<div class="snug content-container">
	<h1>Invite people</h1>
	<p>Invite others to join <em>{{.SiteName}}</em> by generating and sharing invite links below.</p>

	<form style="margin: 2em 0" action="/api/me/invites" method="post">
		<div class="row">
			<div class="half">
				<label for="uses">Maximum number of uses:</label>
				<select id="uses" name="uses">
					<option value="0">No limit</option>
					<option value="1">1 use</option>
					<option value="5">5 uses</option>
					<option value="10">10 uses</option>
					<option value="25">25 uses</option>
					<option value="50">50 uses</option>
					<option value="100">100 uses</option>
				</select>
			</div>
			<div class="half">
				<label for="expires">Expire after:</label>
				<select id="expires" name="expires">
					<option value="0">Never</option>
					<option value="30">30 minutes</option>
					<option value="60">1 hour</option>
					<option value="360">6 hours</option>
					<option value="720">12 hours</option>
					<option value="1440">1 day</option>
					<option value="4320">3 days</option>
					<option value="10080">1 week</option>
				</select>
			</div>
		</div>
		<div class="row">
			<input type="submit" value="Generate" />
		</div>
	</form>

	<table class="classy export">
		<tr>
			<th>Link</th>
			<th>Uses</th>
			<th>Expires</th>
		</tr>
		{{range .Invites}}
		<tr>
			<td><a href="{{$.Host}}/invite/{{.ID}}">{{$.Host}}/invite/{{.ID}}</a></td>
			<td>{{.Uses}}{{if gt .MaxUses.Int64 0}} / {{.MaxUses.Int64}}{{end}}</td>
			<td>{{ if .Expires }}{{if .Expired}}Expired{{else}}{{.ExpiresFriendly}}{{end}}{{ else }}&infin;{{ end }}</td>
		</tr>
		{{else}}
		<tr>
			<td colspan="3">No invites generated yet.</td>
		</tr>
		{{end}}
	</table>

</div>

{{template "footer" .}}
{{end}}
