{% extends "base.html" %}

{% block title %}
	{{ _("Authorize %(title)s", title=client.title) }}
{% endblock %}

{% block author_link %}
	<a href="{{ url_for('users.profile', username=client.owner.username) }}">{{ client.owner.username }}</a>
{% endblock %}

{% block content %}
	<form method="POST" action="" class="text-center">
		<article class="card d-inline-block text-start" style="min-width: 33%;">
			<div class="card-body">
				<h1 class="card-title">{{ self.title() }}</h1>
				<div class="row my-4 align-items-center">
					<div class="col-2">
						<img
							class="img-fluid user-photo img-thumbnail img-thumbnail-1"
							src="{{ client.owner.get_profile_pic_url() }}" />
					</div>
					<div class="col">
						<p class="my-0">
							{{ _("%(title)s by %(display_name)s", title=client.title, display_name=self.author_link()) }}
						</p>
						<p class="text-muted my-0">
							{{ _("wants to access your account") }}
						</p>
					</div>
				</div>
				{% if client.verified %}
					<div class="row my-4 align-items-center">
						<div class="col-2 text-center fs-3">
							<i class="fas text-info fa-check-circle fa-xl"></i>
						</div>
						<div class="col">
							<p class="my-0">
								{{ _("Verified Application") }}
							</p>
							<p class="text-muted my-0">
								{{  _("ContentDB trusts this application") }}
							</p>
						</div>
					</div>
				{% endif %}
				<div class="row my-4 align-items-center">
					<div class="col-2 text-center fs-3">
						<i class="fas fa-globe-europe"></i>
					</div>
					<div class="col">
						<p class="my-0">
							{{ _("Public data only") }}
						</p>
						<p class="text-muted my-0">
							{{  _("Read-only access to your public data") }}
						</p>
					</div>
				</div>
				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
				<div class="row">
					<div class="col">
						<button type="submit" name="action" value="cancel" href="#" class="btn btn-secondary d-block w-100">
							{{ _("Cancel") }}
						</button>
					</div>
					<div class="col">
						<button type="submit" name="action" value="authorize" href="#" class="btn btn-primary d-block w-100">
							{{ _("Authorize") }}
						</button>
					</div>
				</div>
			</div>
		</article>
	</form>
	{% if not client.approved %}
		<aside class="alert alert-danger mt-5 w-50 mx-auto">
			<h3 class="mt-0">{{ _("Application isn't approved yet") }}</h3>
			<p class="mb-0">
				{{ _("To allow users other than yourself to log in, you'll need to contact ContentDB staff and ask them to approve your app.") }}
			</p>
		</aside>
	{% endif %}
{% endblock %}