<!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="Logout">
    <meta name="author" content="">

    <title>Logged Out - Collage-Gadh</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;
      }
    </style>

  </head>

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

    <div class="max-w-md w-full text-center">
      <!-- Success Card -->
      <div class="bg-white rounded-lg shadow-2xl p-8">
        <!-- Success Icon -->
        <div class="mb-6">
          <i class="fas fa-check-circle text-green-500" style="font-size: 64px;"></i>
        </div>
        
        <!-- Message -->
        <h2 class="text-3xl font-bold text-gray-900 mb-3">Logged Out</h2>
        <p class="text-gray-600 mb-8">You have been successfully logged out from Collage-Gadh. Thank you for using our system!</p>
        
        <!-- Login Link -->
        <a href="/accounts/login" class="inline-block bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold py-3 px-8 rounded-lg hover:shadow-lg transition transform hover:scale-105">
          <i class="fas fa-sign-in-alt mr-2"></i>Back to Login
        </a>
        
        <!-- Footer -->
        <div class="mt-8 text-sm text-gray-500">
          <p>Collage-Gadh System v1.0</p>
        </div>
      </div>
    </div>

  </body>

</html>
