{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Operator Dashboard | Container Depot</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
        }
        .sidebar {
            background: linear-gradient(180deg, #0f4c81 0%, #1a6baf 100%);
            transition: all 0.3s;
        }
        .content-area {
            transition: all 0.3s;
        }
        .nav-item {
            transition: all 0.2s;
        }
        .nav-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        .nav-item.active {
            background-color: rgba(255, 255, 255, 0.2);
            border-left: 4px solid white;
        }
        .card {
            transition: all 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .tab {
            transition: all 0.2s;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .form-section {
            animation: slideIn 0.5s ease-in-out;
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="flex h-screen overflow-hidden">
    <!-- Sidebar -->
    {% include 'client-sidebar.html' %}
    <!-- Main Content -->
    <main class="content-area flex-1 overflow-y-auto">
        <!-- Top Navigation -->
        <header class="bg-white shadow-sm">
            <div class="flex items-center justify-between px-6 py-4">
                <div class="flex items-center">
                    <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="text-gray-500 hover:text-gray-700">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                        </svg>
                    </button>
                    <button class="text-gray-500 hover:text-gray-700">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </button>
                </div>
            </div>
        </header>

        <!-- Dashboard Content -->
        <div class="p-6">
            {% block content %}
{#            {% include 'client-dashboard-content.html' %}#}
{#            {% include 'client-preinfo-content.html' %}#}
{#            {% include 'client-orders-content.html' %}#}
            {% endblock content %}
        </div>
    </main>

{#    <script>#}
{#        // Tab Navigation#}
{#        const dashboardContent = document.getElementById('dashboardContent');#}
{#        const preinfoContent = document.getElementById('preinfoContent');#}
{#        const ordersContent = document.getElementById('ordersContent');#}
{#        #}
{#        const preinfoNav = document.getElementById('preinfoNav');#}
{#        const ordersNav = document.getElementById('ordersNav');#}
{#        #}
{#        preinfoNav.addEventListener('click', function(e) {#}
{#            e.preventDefault();#}
{#            #}
{#            // Update content visibility#}
{#            dashboardContent.classList.remove('active');#}
{#            preinfoContent.classList.add('active');#}
{#            ordersContent.classList.remove('active');#}
{#            #}
{#            // Update navigation styling#}
{#            document.querySelector('.nav-item.active').classList.remove('active');#}
{#            preinfoNav.classList.add('active');#}
{#            #}
{#            // Update header title#}
{#            document.querySelector('header h2').textContent = 'Container Preinfo';#}
{#        });#}
{#        #}
{#        ordersNav.addEventListener('click', function(e) {#}
{#            e.preventDefault();#}
{#            #}
{#            // Update content visibility#}
{#            dashboardContent.classList.remove('active');#}
{#            preinfoContent.classList.remove('active');#}
{#            ordersContent.classList.add('active');#}
{#            #}
{#            // Update navigation styling#}
{#            document.querySelector('.nav-item.active').classList.remove('active');#}
{#            ordersNav.classList.add('active');#}
{#            #}
{#            // Update header title#}
{#            document.querySelector('header h2').textContent = 'Expedition Orders';#}
{#        });#}
{#        #}
{#        // Damage checkbox toggle#}
{#        const damageCheck = document.getElementById('damageCheck');#}
{#        const damageDetails = document.getElementById('damageDetails');#}
{#        #}
{#        damageCheck.addEventListener('change', function() {#}
{#            if (this.checked) {#}
{#                damageDetails.classList.remove('hidden');#}
{#            } else {#}
{#                damageDetails.classList.add('hidden');#}
{#            }#}
{#        });#}
{#        #}
{#        // Order type toggle#}
{#        const specificContainer = document.getElementById('specificContainer');#}
{#        const anyContainer = document.getElementById('anyContainer');#}
{#        const specificContainerFields = document.getElementById('specificContainerFields');#}
{#        const anyContainerFields = document.getElementById('anyContainerFields');#}
{#        #}
{#        specificContainer.addEventListener('change', function() {#}
{#            if (this.checked) {#}
{#                specificContainerFields.classList.remove('hidden');#}
{#                anyContainerFields.classList.add('hidden');#}
{#            }#}
{#        });#}
{#        #}
{#        anyContainer.addEventListener('change', function() {#}
{#            if (this.checked) {#}
{#                specificContainerFields.classList.add('hidden');#}
{#                anyContainerFields.classList.remove('hidden');#}
{#            }#}
{#        });#}
{#        #}
{#        // Form submissions#}
{#        document.getElementById('preinfoForm').addEventListener('submit', function(e) {#}
{#            e.preventDefault();#}
{#            #}
{#            // In a real app, this would send data to the server#}
{#            alert('Preinfo submitted successfully!');#}
{#            this.reset();#}
{#        });#}
{#        #}
{#        document.getElementById('orderForm').addEventListener('submit', function(e) {#}
{#            e.preventDefault();#}
{#            #}
{#            // In a real app, this would send data to the server#}
{#            alert('Expedition order submitted successfully!');#}
{#            this.reset();#}
{#        });#}
{#        #}
{#        // Add more container button#}
{#        document.getElementById('addMoreContainer').addEventListener('click', function() {#}
{#            alert('In a real app, this would add fields for another container');#}
{#        });#}
{#    </script>#}
{#<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'947f86ac452d3130',t:'MTc0ODYyMTY4Mi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>#}
</body>
</html>
