% if (my $invalid = stash('invalid')) {
	%= include '_invalid_input', invalid => $invalid
% }

<h1>Web Hooks</h1>

% if (stash('new_hook') and $hook->{enabled}) {
	<div class="row">
		<div class="col s12">
			% if ($hook->{errored}) {
				<div class="card caution-color">
					<div class="card-content white-text">
						<span class="card-title">Web-Hook fehlerhaft</span>
						<p><%= $hook->{output} %></p>
					</div>
				</div>
			% }
			% else {
				<div class="card success-color">
					<div class="card-content white-text">
						<span class="card-title">Web-Hook erfolgreich getestet</span>
						<p><%= $hook->{output} %></p>
					</div>
				</div>
			% }
		</div>
	</div>
% }

<div class="row">
	<div class="col s12">
		<p>
			Die im Web Hook konfigurierte URL wird bei Änderungen des aktuellen
			Reisestatus (z.B. Checkin oder Ankunft am Ziel) aufgerufen.  Falls ein
			Token eingetragen ist, wird er als Bearer Token verwendet.
		</p>
	</div>
	%= form_for '/account/hooks' => (method => 'POST') => begin
		%= csrf_field
		<div class="col s12 center-align">
			<label>
				%= check_box enabled => 1
				<span>Aktiv</span>
			</label>
		</div>
		<div class="input-field col s12">
			<i class="material-icons prefix">link</i>
			%= text_field 'url', id => 'url', class => 'validate', pattern => 'https?://.+', maxlength => 1000
			<label for="url">URL</label>
		</div>
		<div class="input-field col s12">
			<i class="material-icons prefix">lock</i>
			%= text_field 'token', id => 'token', class => 'validate', maxlength => 250
			<label for="token">Token</label>
		</div>
		<div class="col s12 center-align">
			<button class="btn waves-effect waves-light" type="submit" name="action" value="save">
				Speichern
				<i class="material-icons right">send</i>
			</button>
		</div>
	%= end
	<div class="col s12" style="margin-top: 1em; margin-bottom: 2em;">
		% if ($hook->{latest_run}->epoch) {
			Zuletzt ausgeführt <%= $hook->{latest_run}->strftime('am %d.%m.%Y um %H:%M:%S') %><br/>
			% if ($hook->{errored}) {
				<i class="material-icons left">error</i>
				Status: <%= $hook->{output} %>
			% }
			% else {
				<i class="material-icons left">check</i>
				Server-Antwort: <%= $hook->{output} %>
			% }
		% }
		% else {
			Noch nicht ausgeführt.
		% }
	</div>
	<div class="col s12">
		<p>Events werden als JSON POST mit folgender Payload übertragen.</p>
		<p style="font-family: Monospace;">
			{<br/>
			"reason" : "Grund für den Webhook-Aufruf",<br/>
			"status" : { <a href="/api">Aktueller Nutzerstatus</a> }<br/>
			}<br/>
		</p>
		<p>
			Gültige Werte für reason sind derzeit:
			<ul>
				<li><b>ping</b> (nach jeder gespeicherten Änderung in diesem Formular)</li>
				<li><b>checkin</b> (in einen Zug eingecheckt – Zielstation ist noch nicht bekannt)</li>
				<li><b>update</b> (eingecheckt und Ziel gewählt oder geändert)</li>
				<li><b>checkout</b> (aus einem Zug ausgecheckt)</li>
				<li><b>undo</b> (checkin oder checkout wurde rückgängig gemacht)</li>
			</ul>
			Falls der Zug das Ziel bei der Zielwahl schon erreicht hat, wird ohne
			<b>update</b> direkt ein <b>checkout</b> abgeschickt.
		</p>
	</div>
</div>