{% extends "withoutnav_template.html" %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}

{% block per_page_title %}
  {% if again %}
    You need to sign in again
  {% else %}
    Sign in
  {% endif %}
{% endblock %}

{% block maincolumn_content %}

<div class="grid-row margin-bottom-4">
  <div class="tablet:grid-col-5">
    {% if again %}
      <h1 class="font-body-2xl margin-bottom-3">You need to sign in again</h1>
      {% if other_device %}
        <p>
          We signed you out because you logged in to Notify on another device.
        </p>
      {% else %}
        <p>
          We signed you out because you have not used Notify for a while.
        </p>
      {% endif %}
      <a class="usa-link usa-button" href="{{ initial_signin_url }}">Sign in with Login.gov</a>
    {% else %}
      <h1 class="font-body-2xl margin-bottom-3">Sign in</h1>
      <p>Access your Notify.gov account by signing in with Login.gov:</p>
      <a class="usa-link usa-button" href="{{ initial_signin_url }}">Sign in with Login.gov</a>
    {% endif %}
  </div>
    <div class="tablet:grid-col-6 tablet:grid-offset-1 margin-top-2 padding-y-2 padding-x-4 bg-base-lightest">
      <h2 class="font-body-lg">Effective April 16, 2024 Notify.gov requires you sign-in through Login.gov</h2>
      <p>Why are we doing this?</p>
      <ul class="usa-list">
        <li><strong>Enhanced security:</strong> Login.gov is really secure and trustworthy</li>
        <li><strong>One single source for signing in:</strong> You can use Login.gov for other services within the federal government</li>
        <li><strong>2FA flexibility:</strong> Login.gov supports multiple methods for users to verify their identity.</li>
      </ul>
      <p>What do I need to do?</p>
      <ul class="usa-list">
        <li>If you have a Login.gov account, start using it to sign in to Notify today.</li>
        <li>If you don’t have a Login.gov account, you must create one to continue to access Notify.</li>
      </ul>
      <div class="border-bottom border-base-lighter margin-y-4"></div>
      <a class="usa-link usa-button usa-button--outline margin-bottom-3" href="{{ initial_signin_url }}">Create Login.gov account</a>
    </div>
  </div>

{% endblock %}