{% extends 'base_narrow.html' %}

{% block body %}
{% if not initiation %}
<form action="{{ url_for("session.deviceauth") }}">
{% elif not confirmation %}
<form action="{{ url_for("session.deviceauth_submit") }}" method="POST">
{% else %}
<form action="{{ url_for("session.deviceauth_finish") }}" method="POST">
{% endif %}
	<div class="col-12">
		<h2 class="text-center">{{_('Authorize Device Login')}}</h2>
	</div>
	<div class="form-group col-12">
		<p>{{_('Log into a service on another device without entering your password.')}}</p>
	</div>
	<div class="form-group col-12">
		<label for="initiation-code">{{_('Initiation Code')}}</label>
		{% if not initiation %}
			<input type="text" class="form-control" id="initiation-code" name="initiation-code" value="{{ initiation_code or '' }}" required="required" tabindex = "1" autofocus>
		{% else %}
			<input type="text" class="form-control" id="initiation-code" name="initiation-code" value="{{ initiation.code }}" readonly>
		{% endif %}
	</div>
	{% if confirmation %}
		<div class="form-group col-12">
			<label for="confirmation-code">{{_('Confirmation Code')}}</label>
			<input type="text" class="form-control" id="confirmation-code" name="confirmation-code" value="{{ confirmation.code }}" readonly>
		</div>
	{% endif %}
	{% if not initiation %}
		<div class="form-group col-12">
			<p>{{_('Start logging into a service on the other device and chose "Device Login" on the login page. Enter the displayed initiation code in the box above.')}}</p>
		</div>
		<div class="form-group col-12">
			<button type="submit" class="btn btn-primary btn-block" tabindex = "2">{{_('Continue')}}</button>
		</div>
		<div class="form-group col-12">
			<a href="{{ url_for('index') }}" class="btn btn-secondary btn-block" tabindex="0">{{_('Cancel')}}</a>
		</div>
	{% elif not confirmation %}
		<div class="form-group col-12">
			<p>{{_('Authorize the login for service <b>%(service_name)s</b>?', service_name=initiation.description|e)|safe}}</p>
		</div>
		<div class="form-group col-12">
			<button type="submit" class="btn btn-primary btn-block" tabindex = "2">{{_('Authorize Login')}}</button>
		</div>
		<div class="form-group col-12">
			<a href="{{ url_for('index') }}" class="btn btn-secondary btn-block" tabindex="0">{{_('Cancel')}}</a>
		</div>
	{% else %}
		<div class="form-group col-12">
			<p>{{_('Enter the confirmation code on the other device and complete the login. Click <em>Finish</em> afterwards.')|safe}}</p>
		</div>
		<div class="form-group col-12">
			<button type="submit" class="btn btn-primary btn-block" tabindex = "2">{{_('Finish')}}</button>
		</div>
	{% endif %}
</form>
{% endblock %}
