{% extends "templates/web.html" %}
{% block navbar %}
{% if show_language_picker %}
    {{ super() }}
{% endif %}
{% endblock %}
{% macro email_login_body() -%}
{% if not disable_user_pass_login or (ldap_settings and ldap_settings.enabled) %}
<div class="page-card-body">
	<div class="login-error-banner">
		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
			<use href="#es-line-alert-triangle"></use>
		</svg>
		<span></span>
	</div>
	<div class="form-group">
		<label class="form-label" for="login_email">{{ login_label or _("Email")}}</label>
		<div class="email-field">
			<input type="text" id="login_email" class="form-control"
				placeholder="{% if login_name_placeholder %}{{ login_name_placeholder  }}{% else %}{{ _('jane@example.com') }}{% endif %}"
				required autofocus autocomplete="username">

			<svg class="field-icon email-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
				xmlns="http://www.w3.org/2000/svg">
				<use class="es-lock" href="#es-line-email"></use>
			</svg>
		</div>
		<p class="field-error"></p>
	</div>

	<div class="form-group">
		<label class="form-label" for="login_password">{{ _("Password") }}</label>
		<div class="password-field">
			<input type="password" id="login_password" class="form-control" placeholder="•••••"
				autocomplete="current-password" required>

			<svg class="field-icon password-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
				xmlns="http://www.w3.org/2000/svg">
					<use class="es-lock" href="#es-line-lock"></use>
			</svg>
			<svg toggle="#login_password" class="toggle-password" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
					<use href="#es-line-preview"></use>
				</svg>
		</div>
		<p class="field-error"></p>
		{% if not disable_user_pass_login %}
		<p class="forgot-password-message">
			<a href="#forgot">{{ _("Forgot password?") }}</a>
		</p>
		{% endif %}
	</div>
</div>
{% endif %}
<div class="page-card-actions">
	{% if not disable_user_pass_login %}
	<button class="btn btn-sm btn-default btn-block btn-login" type="submit">
		{{ _("Continue") }}</button>
	{% endif %}
	{% if ldap_settings and ldap_settings.enabled %}
	<button class="btn btn-sm {{ "btn-primary" if disable_user_pass_login else "btn-default" }} btn-block btn-login btn-ldap-login">
		{{ _("Login with LDAP") }}</button>
	{% endif %}
	{% if login_with_email_link %}
	<a href="#login-with-email-link"
		class="btn btn-block btn-default btn-sm btn-login-option btn-login-with-email-link">
		{{ _("Login with Email Link") }}</a>
	{% endif %}
	{% if social_login %}
	<div class="social-logins text-center">
		<div class="social-login-buttons">
			{% for provider in provider_logins %}
			<div class="login-button-wrapper">
				<a href="{{ provider.auth_url }}"
					class="btn btn-block btn-default btn-sm btn-login-option btn-{{ provider.name }}">
					{% if provider.icon %}
						{{ provider.icon }}
					{% endif %}
					{{ _("Login with {0}").format(provider.provider_name) }}</a>
			</div>
			{% endfor %}
		</div>
	</div>
	{% endif %}
</div>
{% endmacro %}

{% block head_include %}
{{ include_style('login.bundle.css') }}
{% endblock %}

{% macro logo_section(title=null, subtitle=null) %}
<div class="page-card-head">
	<img class="app-logo" src="{{ logo }}">
	<div class="page-card-head-text">
		{% if title %}
		<h4>{{ _(title) }}</h4>
		{% else %}
		<h4>{{ _('Sign In') }}</h4>
		{% endif %}
		{% if subtitle %}
		<p class="page-card-subtitle">{{ _(subtitle) }}</p>
		{% endif %}
	</div>
</div>
{% endmacro %}

{% block page_content %}

<!-- {{ for_test }} -->
<div>
	<noscript>
		<div class="text-center my-5">
			<h4>{{ _("Javascript is disabled on your browser") }}</h4>
			<p class="text-muted">
				{{ _("You need to enable JavaScript for your app to work.") }}<br>{{ _("To enable it follow the instructions in the following link: {0}").format("<a href='https://enable-javascript.com/'>enable-javascript.com</a></p>") }}
		</div>
	</noscript>
	<section class='for-login'>
		<div class="login-content page-card">
			{{ logo_section(_('Sign In'), _('Welcome! Please sign in to continue.')) }}
			<form class="form-signin form-login" role="form" novalidate>
				{{ email_login_body() }}
			</form>
			{%- if not disable_signup and not disable_user_pass_login -%}
			<div class="text-center sign-up-message">
				{{ _("Don't have an account?") }}
				<a href="#signup">{{ _("Sign up") }}</a>
			</div>
			{%- endif -%}
		</div>
	</section>

	{%- if social_login -%}
	<section class='for-email-login'>
		<div class="login-content page-card">
			{{ logo_section(_('Sign In'), _('Welcome! Please sign in to continue.')) }}
			<form class="form-signin form-login" role="form" novalidate>
			{{ email_login_body() }}
			</form>
			{%- if not disable_signup and not disable_user_pass_login -%}
			<div class="text-center sign-up-message">
				{{ _("Don't have an account?") }}
				<a href="#signup">{{ _("Sign up") }}</a>
			</div>
			{%- endif -%}
		</div>
	</section>
	{%- endif -%}
	<section class='for-signup {{ "signup-disabled" if disable_signup else "" }}'>
		<div class="login-content page-card">
			{{ logo_section(_('Sign Up'), _("Let's setup your account.")) }}
			{%- if not disable_signup -%}
			{{ signup_form_template }}
			{%- else -%}
			<div class="signup-disabled-message">
				<span class='indicator gray'>{{_("Signup Disabled")}}</span>
				<p class="text-muted text-normal sign-up-message mt-1 mb-8">{{_("Signups have been disabled for this website.")}}</p>
				<div><a href='/' class='btn btn-primary btn-md'>{{ _("Home") }}</a></div>
			</div>
			{%- endif -%}
		</div>
	</section>

	<section class='for-forgot'>
		<div class="login-content page-card">
			{{ logo_section(_('Forgot Password?'), _("Please enter your email, we'll send you password reset link")) }}
			<form class="form-signin form-forgot hide" role="form" novalidate>
				<div class="page-card-body">
					<div class="form-group">
						<label class="form-label" for="forgot_email">{{ _("Email") }}</label>
						<div class="email-field">
							<input type="email" id="forgot_email" class="form-control"
								placeholder="{{ _('jane@example.com') }}" required autofocus autocomplete="username">
							<svg class="field-icon email-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
								xmlns="http://www.w3.org/2000/svg">
								<use class="es-lock" href="#es-line-email"></use>
							</svg>
						</div>
						<p class="field-error"></p>
					</div>
				</div>
				<div class="page-card-actions">
					<button class="btn btn-sm btn-primary btn-block btn-signup btn-forgot"
						type="submit" disabled>{{ _("Send Link") }}</button>
				</div>
			</form>
			<div class="text-center sign-up-message">
				<a href="#login">{{ _("Back to sign in") }}</a>
			</div>
		</div>
	</section>

	<section class='for-login-with-email-link'>
		<div class="login-content page-card">
			{{ logo_section(_('Sign In'), _('Welcome! Please sign in to continue.')) }}
			<form class="form-signin form-login-with-email-link hide" role="form" novalidate>
				<div class="page-card-body">
					<div class="login-success-banner">
						<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
							<use href="#es-line-alert-circle"></use>
						</svg>
						<span>{{ _("Please check your email.") }}</span>
					</div>
					<div class="form-group">
						<label class="form-label" for="login_with_email_link_email">{{ _("Email") }}</label>
						<div class="email-field">
							<input type="email" id="login_with_email_link_email" class="form-control"
								placeholder="{{ _('jane@example.com') }}" required autofocus autocomplete="username">
							<svg class="field-icon email-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
								xmlns="http://www.w3.org/2000/svg">
								<use class="es-lock" href="#es-line-email"></use>
							</svg>
						</div>
						<p class="field-error"></p>
					</div>
				</div>
				<div class="page-card-actions">
					<p class="resend-link">
						{{ _("Didn't receive the link?") }} <a href="#" class="btn-resend-link">{{ _("Resend") }}</a>
					</p>
					<button class="btn btn-sm btn-primary btn-block btn-login btn-login-with-email-link"
						type="submit">{{ _("Send login link") }}</button>
					<a href="#login" class="btn btn-sm btn-default btn-block btn-login-option">
						{{ _("Login with password") }}</a>
				</div>
			</form>
			{%- if not disable_signup -%}
			<div class="text-center sign-up-message">
				{{ _("Don't have an account?") }}
				<a href="#signup">{{ _("Sign up") }}</a>
			</div>
			{%- endif -%}
		</div>
	</section>
</div>
{% endblock %}

{% block script %}
<script>{% include "templates/includes/login/login.js" %}</script>
{% endblock %}

{% block sidebar %}{% endblock %}