{% extends "static/login_base.html" %}

{% block title %}enviPath - Sign In{% endblock %}

{% block extra_styles %}
  /* Tab styling */ .tab-content { display: none; } .tab-content.active {
  display: block; } input[type="radio"].tab-radio { display: none; } .tab-label
  { cursor: pointer; padding: 0.75rem 1.5rem; border-bottom: 2px solid
  transparent; transition: all 0.3s ease; } .tab-label:hover { background-color:
  rgba(0, 0, 0, 0.05); } input[type="radio"].tab-radio:checked + .tab-label {
  border-bottom-color: #3b82f6; font-weight: 600; }
{% endblock %}

{% block content %}
  <!-- Tab Navigation -->
  <div class="border-base-300 mb-6 border-b">
    <div class="flex justify-start">
      <input
        type="radio"
        name="auth-tab"
        id="tab-signin"
        class="tab-radio"
        checked
      />
      <label for="tab-signin" class="tab-label">Sign In</label>

      <input type="radio" name="auth-tab" id="tab-signup" class="tab-radio" />
      <label for="tab-signup" class="tab-label">Register</label>
    </div>
  </div>

  <!-- Sign In Tab -->
  <div id="content-signin" class="tab-content active">
    <form method="post" action="{% url 'login' %}" class="space-y-4">
      {% csrf_token %}
      <input type="hidden" name="login" value="true" />

      <div class="form-control">
        <label class="label" for="username">
          <span class="label-text">Username</span>
        </label>
        <input
          type="text"
          id="username"
          name="username"
          placeholder="username"
          class="input input-bordered w-full"
          required
          autocomplete="username"
        />
      </div>

      <div class="form-control">
        <label class="label" for="passwordinput">
          <span class="label-text">Password</span>
        </label>
        <input
          type="password"
          id="passwordinput"
          name="password"
          placeholder="••••••••"
          class="input input-bordered w-full"
          required
          autocomplete="current-password"
        />
      </div>

      <div class="text-right">
        <a href="{% url 'password_reset' %}" class="link link-primary text-sm"
          >Forgot password?</a
        >
      </div>

      <input type="hidden" name="next" value="{{ next }}" />

      <button type="submit" name="signin" class="btn btn-primary w-full">
        Sign In
      </button>
    </form>
  </div>

  <!-- Register Tab -->
  <div id="content-signup" class="tab-content">
    <div class="alert alert-info mb-4 text-sm">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        class="h-6 w-6 shrink-0 stroke-current"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ></path>
      </svg>
      <div>
        <div class="font-bold">Password Requirements</div>
        <div class="mt-1 text-xs">
          • 8 to 30 characters<br />
          • Upper and lower case letters<br />
          • Digits and special characters (_, -, +)
        </div>
      </div>
    </div>

    <form method="post" action="{% url 'login' %}" class="space-y-4">
      {% csrf_token %}
      <input type="hidden" name="register" value="true" />

      <div class="form-control">
        <label class="label" for="userid">
          <span class="label-text">Username</span>
        </label>
        <input
          type="text"
          id="userid"
          name="username"
          placeholder="username"
          class="input input-bordered w-full"
          required
          autocomplete="username"
        />
      </div>

      <div class="form-control">
        <label class="label" for="email">
          <span class="label-text">Email</span>
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="user@envipath.org"
          class="input input-bordered w-full"
          required
          autocomplete="email"
        />
      </div>

      <div class="form-control">
        <label class="label" for="password">
          <span class="label-text">Password</span>
        </label>
        <input
          type="password"
          id="password"
          name="password"
          placeholder="••••••••"
          class="input input-bordered w-full"
          required
          autocomplete="new-password"
        />
      </div>

      <div class="form-control">
        <label class="label" for="rpassword">
          <span class="label-text">Repeat Password</span>
        </label>
        <input
          type="password"
          id="rpassword"
          name="rpassword"
          placeholder="••••••••"
          class="input input-bordered w-full"
          required
          autocomplete="new-password"
        />
      </div>

      <input type="hidden" name="next" value="{{ next }}" />

      <button type="submit" name="confirmsignup" class="btn btn-success w-full">
        Sign Up
      </button>
    </form>

    <!-- Why Register Section -->
    <div class="bg-base-200 mt-6 rounded-lg p-4">
      <h3 class="mb-2 font-semibold">Why register?</h3>
      <p class="mb-2 text-sm">
        enviPath is free for academic research and educational purposes.
        However, we require registration to ensure the security of the platform
        and to prevent abuse.
      </p>
      <p class="mt-3 text-sm">
        Questions? Check our
        <a
          href="https://wiki.envipath.org/"
          target="_blank"
          class="link link-primary"
          >documentation</a
        >
        or the
        <a
          href="https://community.envipath.org/"
          target="_blank"
          class="link link-primary"
          >community forums</a
        >.
      </p>
    </div>
  </div>
{% endblock %}

{% block extra_scripts %}
  <script>
    // Tab switching functionality
    document.querySelectorAll('input[name="auth-tab"]').forEach((radio) => {
      radio.addEventListener("change", function () {
        // Hide all content
        document.querySelectorAll(".tab-content").forEach((content) => {
          content.classList.remove("active");
        });

        // Show selected content
        const contentId = "content-" + this.id.replace("tab-", "");
        document.getElementById(contentId).classList.add("active");
      });
    });

    // Check for hash in URL to auto-select tab
    window.addEventListener("DOMContentLoaded", function () {
      const hash = window.location.hash.substring(1); // Remove the # symbol
      if (hash === "signup" || hash === "signin") {
        const tabRadio = document.getElementById("tab-" + hash);
        if (tabRadio) {
          tabRadio.checked = true;
          // Trigger change event to show correct content
          tabRadio.dispatchEvent(new Event("change"));
        }
      }
    });
  </script>
{% endblock %}