{% load static %}

<!doctype html>
<html lang="en" data-theme="envipath">
  <head>
    <meta charset="UTF-8" />
    <title>{% block title %}enviPath{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="shortcut icon"
      type="image/png"
      href="{% static 'images/favicon.ico' %}"
    />

    <!-- Tailwind CSS Output -->
    <link
      href="{% static 'css/output.css' %}"
      rel="stylesheet"
      type="text/css"
    />

    {% if CAP_ENABLED %}
      <script src="https://cdn.jsdelivr.net/npm/@cap.js/widget@0.1.41/cap.min.js"></script>
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@cap.js/widget@0.1.41/src/cap.min.css"
      />
    {% endif %}

    {% block extra_styles %}
    {% endblock %}
  </head>
  <body class="bg-base-100">
    <div class="flex h-screen">
      <!-- Left side - Hero Image -->
      <div
        class="hidden items-center justify-center bg-cover bg-center bg-no-repeat p-12 lg:flex lg:w-1/2"
        style="background-image: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 30%, transparent) 0%, color-mix(in oklab, var(--color-primary-600) 40%, transparent) 100%), url('{% static "/images/hero.png" %}');"
      >
        <div class="space-y-6 text-left text-white">
          <svg class="h-16 w-auto fill-white" viewBox="0 0 104 26" role="img">
            <use href="{% static "/images/logo-name.svg" %}#ep-logo-name" />
          </svg>
          <p class="mx-auto max-w-md text-lg">
            Predict and explore microbial biotransformation pathways for
            environmental contaminants
          </p>
        </div>
      </div>

      <!-- Right side - Content -->
      <div
        class="flex w-full flex-col items-center justify-center overflow-y-auto p-8 lg:w-1/2"
      >
        <div class="flex w-full max-w-md flex-1 flex-col justify-center">
          <!-- Logo for mobile -->
          <div class="mb-8 text-center lg:hidden">
            <svg
              class="mx-auto h-12 w-auto fill-current"
              viewBox="0 0 104 26"
              role="img"
            >
              <use href="{% static "/images/logo-name.svg" %}#ep-logo-name" />
            </svg>
          </div>

          <!-- Messages -->
          {% if message %}
            <div class="alert alert-error mb-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 shrink-0 stroke-current"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <span>{{ message }}</span>
            </div>
          {% elif success_message %}
            <div class="alert alert-success mb-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 shrink-0 stroke-current"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <span>{{ success_message }}</span>
            </div>
          {% endif %}

          {% block content %}
          {% endblock %}
        </div>

        <!-- Footer with legal links - positioned at bottom of right column -->
        <div class="mt-auto w-full pt-4">
          <div
            class="text-base-content/50 flex items-center justify-center space-x-6 text-sm"
          >
            <a href="/terms" class="link link-hover">Terms of Use</a>
            <span class="text-base-content/30">•</span>
            <a href="/privacy" class="link link-hover">Privacy Policy</a>
            <span class="text-base-content/30">•</span>
            <a href="/cookie-policy" class="link link-hover">Cookie Policy</a>
          </div>
        </div>
      </div>
    </div>

    {% block extra_scripts %}{% endblock %}
  </body>
</html>
