{% extends "base.html" %}

{% block main %}
  <main class="bg-white">
    <div class="relative flex">
      <div class="w-full md:w-1/2">
        <div class="min-h-screen h-full flex flex flex-col after:flex-1">
          <div class="flex-1">
            <div class="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
              <span class="text-3xl text-gray-800 font-bold">{{ tenant.name }}</span>
            </div>
          </div>

          <div class="w-full max-w-sm mx-auto px-4 py-8">
            <h1 class="text-3xl text-gray-800 font-bold mb-6">{% block title %}{% endblock %}</h1>
            {% if error is defined %}
              <div class="my-4 px-4 py-2 rounded-sm text-sm bg-red-100 border border-red-200 text-red-600">
                <div class="flex w-full justify-between items-start">
                  <div class="flex">
                    <svg class="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
                      <path
                        d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
                    </svg>
                    <div>{{error}}</div>
                  </div>
                </div>
              </div>
            {% endif %}
            {% if not fatal_error %}
              {% block auth_form %}
                {% block csrf %}
                  <input type="hidden" name="csrftoken" value="{{ request.scope.csrftoken }}" />
                {% endblock %}
              {% endblock %}
            {% endif %}
            <div class="pt-5 mt-6 border-t border-gray-200">
              <div class="text-xs flex justify-center items-center">
                <span class="mr-1">{% trans %}Powered by{% endtrans %}</span>
                <img src="{{ url_for('static', path='fief-logo.svg') }}" alt="Fief" layout="fixed" height="20" width="30" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">

      </div>

    </div>
  </main>
{% endblock %}