{% extends 'academy/base.html' %}
{% block title %}Student Login – Creative Academy{% endblock %}

{% block extra_css %}
<style>
  .login-wrap {
    min-height: calc(100vh - 70px);
    display: flex; align-items: center; justify-content: center;
    padding: 4rem 2rem;
    background: radial-gradient(ellipse at 50% 40%, rgba(201,168,76,0.07) 0%, transparent 60%);
  }
  .login-card {
    width: 100%; max-width: 440px;
    background: var(--charcoal);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 3rem;
    position: relative; overflow: hidden;
  }
  .login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--gold), var(--gold-light));
  }
  .login-card h2 { font-size: 1.8rem; margin-bottom: 0.5rem; }
  .login-card p { color: var(--gray-light); font-size: 0.9rem; margin-bottom: 2rem; }
  .form-group { margin-bottom: 1.4rem; }
  .form-group label {
    display: block; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 0.45rem;
  }
  .form-group input {
    width: 100%; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius);
    padding: 0.8rem 1rem; color: var(--white);
    font-family: 'DM Sans', sans-serif; font-size: 0.95rem;
    outline: none; transition: border-color 0.2s;
  }
  .form-group input:focus { border-color: var(--gold); }
  .errorlist { list-style: none; }
  .errorlist li { color: #f5857a; font-size: 0.82rem; margin-top: 0.3rem; }
  .form-error {
    color: #f5857a; font-size: 0.85rem;
    background: rgba(192,57,43,0.1); border: 1px solid rgba(192,57,43,0.3);
    padding: 0.7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
  }
  .login-btn { width: 100%; padding: 0.9rem; font-size: 0.95rem; margin-top: 0.5rem; }
  .login-note { text-align: center; font-size: 0.82rem; color: var(--gray); margin-top: 1.25rem; }
</style>
{% endblock %}

{% block content %}
<div class="login-wrap">
  <div class="login-card">
    <h2>Student Login</h2>
    <p>Access your dashboard, assignments and progress.</p>
    <form method="post">
      {% csrf_token %}
      {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}<div class="form-error">{{ error }}</div>{% endfor %}
      {% endif %}
      <div class="form-group">
        <label>Email Address</label>
        {{ form.email }}
        {{ form.email.errors }}
      </div>
      <div class="form-group">
        <label>Password</label>
        {{ form.password }}
        {{ form.password.errors }}
      </div>
      <button type="submit" class="btn btn-gold login-btn">Login to Dashboard →</button>
    </form>
    <p class="login-note">Not registered yet? <a href="/register/">Register here</a></p>
  </div>
</div>
{% endblock %}