{% import "macros/branding.html" as branding %}

{% extends "auth/base.html" %}

{% block body %}
  <main>
    <div class="relative flex">
      <div class="w-full">
        <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 py-2 px-4 sm:px-6 lg:px-8">
              {% if tenant.logo_url %}
                <img src="{{ tenant.logo_url }}" alt="{{ tenant.name }}" class="max-h-full max-w-[100px]" />
              {% else %}
                <span class="text-3xl text-accent font-bold">{{ tenant.name }}</span>
              {% endif %}
            </div>
          </div>

          <div class="w-full max-w-sm mx-auto px-4 py-8">
            <h1 class="text-3xl text-accent 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 xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    <div>{{error}}</div>
                  </div>
                </div>
              </div>
            {% endif %}
            {% if success is defined %}
              <div class="my-4 px-4 py-2 rounded-sm text-sm bg-emerald-100 border border-emerald-200 text-emerald-600">
                <div class="flex w-full justify-between items-start">
                  <div class="flex">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                    </svg>
                    <div>{{success}}</div>
                  </div>
                </div>
              </div>
            {% endif %}
            {% if not fatal_error %}
              {% block auth_form %}
              {% endblock %}
            {% endif %}
            <div class="pt-5 mt-6 border-t border-light">
              {{ branding.branding() }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
{% endblock %}
