<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Collage-Gadh Login">
    <meta name="author" content="Collage-Gadh">

    <title>Collage-Gadh - Login</title>

    {% load static %}

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
      body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
      }
      
      .login-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      }
      
      .form-input {
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        padding: 12px 16px;
        font-size: 16px;
        transition: all 0.3s ease;
      }
      
      .form-input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
      }
      
      .login-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 8px;
        padding: 12px 24px;
        color: white;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
      }
      
      .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
      }
      
      .logo {
        text-align: center;
        margin-bottom: 32px;
      }
      
      .logo i {
        font-size: 48px;
        color: #667eea;
        margin-bottom: 16px;
      }
      
      .logo h1 {
        color: #1e293b;
        font-size: 32px;
        font-weight: 700;
        margin: 0;
      }
      
      .error-msg {
        background: #fee2e2;
        color: #991b1b;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 16px;
        border-left: 4px solid #dc2626;
      }
    </style>

  </head>

  <body class="flex items-center justify-center">

    <div class="w-full max-w-md">
      <div class="login-card p-8">
        <!-- Logo -->
        <div class="logo">
          <i class="fas fa-graduation-cap"></i>
          <h1>Collage-Gadh</h1>
          <p class="text-gray-600 mt-2">Student Management System</p>
        </div>

        <!-- Form -->
        <form method="post" class="space-y-6">
          {% csrf_token %}
          
          {% if form.non_field_errors %}
            <div class="error-msg">
              <i class="fas fa-exclamation-circle mr-2"></i>
              {% for error in form.non_field_errors %}
                {{ error }}
              {% endfor %}
            </div>
          {% endif %}

          <!-- Username Field -->
          <div>
            <label for="id_username" class="block text-sm font-medium text-gray-700 mb-2">
              <i class="fas fa-user mr-2"></i>Username
            </label>
            <input 
              type="text" 
              name="username" 
              id="id_username"
              class="w-full form-input" 
              placeholder="Enter your username"
              required
            >
            {% if form.username.errors %}
              <p class="text-red-500 text-sm mt-1">{{ form.username.errors }}</p>
            {% endif %}
          </div>

          <!-- Password Field -->
          <div>
            <label for="id_password" class="block text-sm font-medium text-gray-700 mb-2">
              <i class="fas fa-lock mr-2"></i>Password
            </label>
            <input 
              type="password" 
              name="password" 
              id="id_password"
              class="w-full form-input" 
              placeholder="Enter your password"
              required
            >
            {% if form.password.errors %}
              <p class="text-red-500 text-sm mt-1">{{ form.password.errors }}</p>
            {% endif %}
          </div>

          <!-- Login Button -->
          <button type="submit" class="w-full login-btn">
            <i class="fas fa-sign-in-alt mr-2"></i>Login
          </button>
        </form>

        <!-- Footer -->
        <div class="text-center mt-8 text-sm text-gray-600">
          <p>Collage-Gadh System v1.0</p>
          <p class="mt-2">© 2026 All Rights Reserved</p>
        </div>
      </div>
    </div>

  </body>

</html>
