{% extends "base.html" %}
{% load user_groups widget_tweaks %}
{% block content %}

<div class="d-flex justify-content-center align-items-center" style="min-height: 80vh;">
  <div class="container" style="max-width: 460px;">
    <div class="text-center mb-4">
      <div class="ip2-pill mb-2">
        <i class="bi bi-shield-check"></i>
        Secure access
      </div>
      <h1 class="h3 mb-1">Sign in to IP2Market</h1>
      <p class="text-muted mb-0" style="font-size: 0.9rem;">
        DOST-aligned, IPOPHL-ready commercialization support for university IP.
      </p>
    </div>

    <div class="card border-0 shadow-sm" style="border-radius: 1.5rem;">
      <div class="card-body p-4 p-md-4" style="background: linear-gradient(145deg, #ffffff 0%, #f4fbf7 60%, #e7f3ff 100%);">
        <form method="post" novalidate>
          {% csrf_token %}

          {% if form.non_field_errors %}
            <div class="alert alert-danger py-2">
              {{ form.non_field_errors }}
            </div>
          {% endif %}

          <div class="mb-3">
            <label class="form-label" for="id_username">Username</label>
            <input
             type="text"
             name="username"
             id="id_username"
             class="form-control"
             required
             autocomplete="username"
            >
          </div>

          <div class="mb-3">
            <label class="form-label" for="id_password">Password</label>
            <input
             type="password"
             name="password"
             id="id_password"
             class="form-control"
             required
            autocomplete="current-password"
            >
          </div>

          <button type="submit" class="btn ip2-btn-primary w-100 mb-2">
            <i class="bi bi-box-arrow-in-right me-1"></i> Log in
          </button>

          <div class="d-flex justify-content-between align-items-center mt-1">
            <a href="{% url 'password_reset' %}" class="small ip2-link-muted">
              Forgot your password?
            </a>
            <a href="{% url 'register' %}" class="btn btn-primary">Register</a>
            <!-- Optional:
            <span class="small text-muted">Need an account? Contact your TTO.</span>
            -->
          </div>
        </form>
      </div>
    </div>

    <div class="text-center mt-3">
      <span class="text-muted small">
        Supported by <strong>DOST</strong> &amp; <strong>IPOPHL</strong>-aligned innovation policies.
      </span>
    </div>
  </div>
</div>

{% endblock %}