<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List with Search</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- Header Section -->
        <header>
            <h1><i class="fas fa-check-circle"></i> To-Do List</h1>
            
            <!-- Theme Toggle Button -->
            <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle Theme">
                <span id="sun-icon" class="icon" aria-hidden="true">&#9728;</span>
                <span id="moon-icon" class="icon" aria-hidden="true">&#9789;</span>
            </button>
        </header>

        <!-- Search Section -->
        <div class="search-section">
            <input type="text" id="searchInput" placeholder="Search tasks..." oninput="searchTasks()">
            <button id="searchBtn" class="btn"><i class="fas fa-search"></i></button>
        </div>

        <!-- Input Section -->
        <div class="input-section">
            <input type="text" id="taskInput" placeholder="Enter your task here...">
            <div class="buttons-right">
                <button id="addTaskBtn" class="btn"><i class="fas fa-plus"></i> Add</button>
                <button id="backupBtn" class="btn"><i class="fas fa-cloud-upload-alt"></i> Backup</button>
            </div>
        </div>

        <!-- Task List -->
        <section class="task-list">
            <ul id="taskList" aria-live="polite"></ul>
        </section>

        <!-- Clear All Button -->
        <button id="clearAllBtn" class="btn clear-btn" aria-label="Clear All Tasks"><i class="fas fa-trash-alt"></i> Clear All Tasks</button>

        <!-- Footer Section -->
        <footer>
            <p><strong><em>@Developed By M.Uzair</em></strong></p>
        </footer>
    </div>

    <!-- Password Popup -->
    <div class="popup" id="passwordPopup">
        <div class="popup-content">
            <h2><i class="fas fa-lock"></i> Enter Password</h2>
            <label for="passwordInput" class="visually-hidden">Enter Password</label>
            <input type="password" id="passwordInput" placeholder="Enter Password" aria-label="Enter Password">
            <button id="confirmPasswordBtn" class="btn" aria-label="Confirm Password"><i class="fas fa-check"></i> Confirm</button>
            <button id="cancelPasswordBtn" class="btn" aria-label="Cancel Password Entry"><i class="fas fa-times"></i> Cancel</button>
            <p id="errorMessage" class="error-message" aria-live="assertive"></p>
        </div>
    </div>

    <!-- Edit Popup -->
    <div class="popup" id="editPopup">
        <div class="popup-content">
            <h2><i class="fas fa-edit"></i> Edit Task</h2>
            <label for="editInput" class="visually-hidden">Edit Task</label>
            <input type="text" id="editInput" placeholder="Edit Task" aria-label="Edit Task">
            <button id="confirmEditBtn" class="btn" aria-label="Save Edit"><i class="fas fa-save"></i> Save</button>
            <button id="cancelEditBtn" class="btn" aria-label="Cancel Edit"><i class="fas fa-times"></i> Cancel</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
