<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}CSV Upload{% endblock %}</title>
<link href="{% static "css/styles.min.css" %}" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<header class="fixed top-0 left-0 w-full bg-blue-900 p-4 z-10">
<div class="container mx-auto flex items-center justify-between">
<!-- GÉANT Logo -->
<div class="flex items-center">
<img src="{% static "images/geant_logo.svg" %}" alt="GÉANT Logo" class="h-12">
</div>
<div class="flex-grow text-center">
<a href="{% url "index" %}" class="text-white text-2xl font-bold tracking-wide">Sage Validation</a> <!-- Made title clickable -->
</div>
<div class="flex items-center"> <!-- Login link -->
{% if user.is_authenticated %}
<p class="text-white">Welcome, {{ user.username }}!</p>
<form action="{% url 'logout' %}" method="post" class="inline-block ml-4">
{% csrf_token %}
<button type="submit"
class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 focus:outline-none focus:ring focus:ring-red-400">
Logout
</button>
</form>
{% else %}
<a href="{% url "social:begin" "google-oauth2" %}" class="text-white hover:text-gray-300">Login</a>
{% endif %}
<button id="mobile-menu-button" class="md:hidden text-white focus:outline-none ml-4">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</header>
<main class="flex-grow mt-24 p-10">
{% block content %}
{% endblock %}
</main>
<!-- Mobile Menu -->
<div id="mobile-menu" class="md:hidden bg-blue-900 text-white absolute w-full hidden">
<nav class="flex flex-col space-y-2 p-4">
<a href="{% url 'index' %}" class="hover:text-gray-300">Home</a>
<a href="{% url 'upload-file' %}" class="hover:text-gray-300">Upload File</a>
<a href="/login" class="hover:text-gray-300">Login</a>
</nav>
</div>
<!-- Footer -->
<footer class="bg-blue-900 text-white py-6 mt-auto">
<div class="container mx-auto text-center">
<p class="text-sm">© 2024 Sage Validation. All rights reserved.</p>
<div class="mt-2">
<a href="#" class="hover:text-gray-300">Privacy Policy</a>
<span class="mx-2">|</span>
<a href="#" class="hover:text-gray-300">Terms of Service</a>
<span class="mx-2">|</span>
<a href="#" class="hover:text-gray-300">Contact Us</a>
</div>
</div>
</footer>
<script>
// Toggle mobile menu
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>
</body>
</html>