{% extends "templates/web.html" %}

{% block title %} {{ _("Third Party Apps") }} {% endblock %}

{% block navbar %}{% endblock %}
{% block footer %}{% endblock %}


{% block style %}{% endblock %}

{% block page_content %}
<div class="portal-container">
	<div class="portal-section head">
		<div class="title">{{ _("Third Party Apps") }}</div>
	</div>
	<div class="third-party-wrapper portal-items">
		{% if app %}
		<h4>{{ app.app_name }}</h4>
		<div class="web-list-item portal-section">
			<div class="row">
				<div class="col-xs-12">
					<div class="well">
						<div class="text-muted">{{ _("This will log out {0} from all other devices").format(app.app_name) }}</div>
						<div class="padding"></div>
						<div class="text-right">
							<button class="btn btn-default" onclick="location.href = '/third_party_apps';">Cancel</button>
							<button class="btn btn-danger btn-delete-app" data-client_id="{{ app.client_id }}">Revoke</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		{% elif apps|length > 0 %}
		<h4>{{ _("Active Sessions") }}</h4>
			{% for app in apps %}
			<div class="web-list-item portal-section">
				<div class="row">
					<div class="col-xs-6">
						{{ app.app_name }}
					</div>
					<div class="col-xs-4 text-right text-muted">
						<small class="text-right">
							{{ _("logged in") }}&nbsp;{{ frappe.utils.pretty_date(app.creation) }}
						</small>
					</div>
					<div class="col-xs-2 text-right small text-muted">
						<a class="btn btn-sm btn-link" href="/third_party_apps?app={{ app.name }}">{{ _("Revoke") }}</a>
					</div>
				</div>
			</div>
			{% endfor %}
		{% else %}
		<div class="empty-apps-state">
			<img src="/assets/frappe/images/ui-states/empty-app-state.svg"/>
			<div class="font-weight-bold mt-4">
				{{ _("No Active Sessions")}}
			</div>
			<div class="text-muted mt-2">
				{{ _("Looks like you haven’t added any third party apps.")}}
			</div>
		</div>
		{% endif %}
	</div>
</div>
<script>
{% include "templates/includes/integrations/third_party_apps.js" %}
</script>
<style>
body {
	background-color: var(--subtle-fg);
	font-size: var(--text-base);
}

.third-party-wrapper {
	background-color: var(--fg-color);
	padding: var(--padding-md);
}

.empty-apps-state {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	max-width: 100vw;
	padding: 0;
	margin: 0;
}

</style>
{% endblock %}