Upload 31 files

app/crud/__init__.py

@@ -0,0 +1,18 @@
+"""
+CRUD operations for the Item model.
+This module imports and exposes all CRUD operations from their respective modules.
+"""
+
+# Import operations
+from app.crud.create import create_item
+from app.crud.read import get_item, get_items
+from app.crud.update import update_item
+from app.crud.delete import delete_item
+
+# Re-export all operations
+__all__ = [
+    "create_item",  # Create operations
+    "get_item", "get_items",  # Read operations
+    "update_item",  # Update operations
+    "delete_item",  # Delete operations
+]

app/crud/create.py

@@ -0,0 +1,29 @@
+from sqlalchemy.orm import Session
+from app.models.item import Item
+from app.schemas.item import ItemCreate
+
+def create_item(db: Session, item: ItemCreate):
+    db_item = Item(title=item.title,description=item.description,completed=item.completed)
+    db.add(db_item)
+    db.commit()
+    db.refresh(db_item)
+    return db_item
+    """
+    Create a new item in the database.
+    
+    Args:
+        db (Session): Database session
+        item (ItemCreate): Item data to create
+        
+    Returns:
+        Item: The created item
+    """
+    # TODO: Implement the create_item function
+    # The function should:
+    # 1. Create a new Item object with the data from item
+    # 2. Add the item to the database session
+    # 3. Commit the transaction
+    # 4. Refresh the item to get the generated ID
+    # 5. Return the created item
+    
+   

app/crud/delete.py

@@ -0,0 +1,48 @@
+from sqlalchemy.orm import Session
+from typing import Optional
+from app.models.item import Item
+
+
+def delete_item(db: Session, item_id: int) -> bool:
+    """
+    Delete an item from the database.
+    
+    Args:
+        db (Session): Database session
+        item_id (int): ID of the item to delete
+        
+    Returns:
+        bool: True if the item was deleted, False if the item was not found
+    """
+ 
+    item = db.query(Item).filter(Item.id == item_id).first()
+    
+   
+    if not item:
+        return False
+
+   
+    db.delete(item)
+
+ 
+    db.commit()
+
+  
+    return True 
+  
+    
+    
+    
+    
+    
+    # TODO: Implement the delete_item function
+    # The function should:
+    # 1. Get the item with the given item_id from the database
+    # 2. If the item doesn't exist, return False
+    # 3. Delete the item from the database
+    # 4. Commit the changes
+    # 5. Return True to indicate successful deletion
+    
+    # Delete the code below and implement your solution
+    
+  

app/crud/read.py

@@ -0,0 +1,46 @@
+from sqlalchemy.orm import Session
+from typing import List, Optional
+from app.models.item import Item
+
+def get_item(db: Session, item_id: int) -> Optional[Item]:
+    return db.query(Item).filter(Item.id == item_id).first()
+
+def get_items(db: Session, skip: int = 0, limit: int = 100) -> List[Item]:
+    item_list = db.query(Item).offset(skip).limit(limit).all()
+    return item_list
+
+from typing import List
+from fastapi import Header, HTTPException
+from sqlalchemy.orm import Session
+
+API_KEY = "1234"
+
+
+def get_items(
+    db: Session,
+    skip: int = 0,
+    limit: int = 100,
+    api_key: str = Header(..., alias="api_key")
+) -> List[Item]:
+    """
+    Get multiple items with pagination.
+
+    Args:
+        db (Session): Database session
+        skip (int): Number of records to skip (for pagination)
+        limit (int): Maximum number of records to return
+        api_key (str): Required API key from request header
+
+    Returns:
+        List[Item]: List of found items
+    """
+
+    # Validate API key
+    if api_key != API_KEY:
+        raise HTTPException(
+            status_code=401,
+            detail="Invalid API key"
+        )
+
+    # Query all items with pagination
+    return db.query(Item).offset(skip).limit(limit).all()

app/crud/update.py

@@ -0,0 +1,48 @@
+from sqlalchemy.orm import Session
+from typing import Dict, Any, Optional
+from app.models.item import Item
+from app.schemas.item import ItemCreate
+
+def update_item(db: Session, item_id: int, item: ItemCreate) -> Optional[Item]:
+    update_data = item.dict(exclude_unset=True)
+    result = db.query(Item).filter(Item.id == item_id).update(update_data)
+
+    
+    if result == 0:
+      return None
+    
+
+
+    db.commit()
+    updated_item = db.query(Item).filter(Item.id == item_id).first()
+    db.refresh(updated_item)
+    return updated_item
+
+
+
+
+
+    """
+    Update an existing item in the database.
+    
+    Args:
+        db (Session): Database session
+        item_id (int): ID of the item to update
+        item (ItemCreate): New item data
+
+    Returns:
+        Optional[Item]: The updated item or None if not found
+    """
+
+    
+    # TODO: Implement the update_item function
+    # The function should:
+    # 1. Get the item with the given item_id from the database
+    # 2. If the item doesn't exist, return None
+    # 3. Update the item's attributes with the new values
+    # 4. Commit the changes to the database
+    # 5. Refresh the item from the database
+    # 6. Return the updated item
+    
+    # Delete the code below and implement your solution
+   

app/database.py

@@ -0,0 +1,24 @@
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+SQLALCHEMY_DATABASE_URL = "sqlite:///./database/items.db"
+
+# Create SQLite engine
+engine = create_engine(
+    SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}
+)
+
+# Create SessionLocal class
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+# Create Base class
+Base = declarative_base()
+
+# Dependency
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

app/main.py

@@ -0,0 +1,98 @@
+
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+import os
+
+from app.database import engine
+from app.models.item import Item
+import app.routes.item as item_routes
+
+# Create tables in the database
+from app.database import Base
+Base.metadata.create_all(bind=engine)
+
+# Initialize FastAPI app
+app = FastAPI(title="FastAPI CRUD App")
+
+# Mount static files
+app.mount("/static", StaticFiles(directory="app/static"), name="static")
+
+# Set up templates
+templates = Jinja2Templates(directory="app/templates")
+
+# Include routers
+app.include_router(item_routes.router)
+
+# Root endpoint
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+# Run with: uvicorn app.main:app --reload
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
+
+"""
+# IGNORE THE FOLLOWING SECTION
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+import os
+import sys
+import importlib
+
+from app.database import engine
+from app.models.item import Item
+
+# Create tables in the database
+from app.database import Base
+Base.metadata.create_all(bind=engine)
+
+# Initialize FastAPI app
+app = FastAPI(title="FastAPI CRUD App")
+
+# Mount static files
+app.mount("/static", StaticFiles(directory="app/static"), name="static")
+
+# Set up templates
+templates = Jinja2Templates(directory="app/templates")
+
+# TEMP: Use the solutions for testing
+# Import CRUD operations from solutions directory
+sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+from solutions.crud.create import create_item
+from solutions.crud.read import get_item, get_items
+from solutions.crud.update import update_item
+from solutions.crud.delete import delete_item
+
+# Create a temporary crud module that uses solutions
+class TempCrud:
+    create_item = create_item
+    get_item = get_item
+    get_items = get_items
+    update_item = update_item
+    delete_item = delete_item
+
+# Import the router
+import app.routes.item as item_routes
+
+# Replace the crud import in the routes with our temporary one
+item_routes.crud = TempCrud
+
+# Include routers
+app.include_router(item_routes.router)
+
+# Root endpoint
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+# Run with: uvicorn app.main:app --reload
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
+    """

app/models/item.py

@@ -0,0 +1,10 @@
+from sqlalchemy import Column, Integer, String, Boolean
+from app.database import Base
+
+class Item(Base):
+    __tablename__ = "items"
+
+    id = Column(Integer, primary_key=True, index=True)
+    title = Column(String, index=True)
+    description = Column(String)
+    completed = Column(Boolean, default=False)

app/routes/item.py

@@ -0,0 +1,50 @@
+from fastapi import APIRouter, Depends, HTTPException, status
+from sqlalchemy.orm import Session
+from typing import List
+
+from app.database import get_db
+from app.schemas.item import Item, ItemCreate
+import app.crud as crud
+
+router = APIRouter(
+    prefix="/api/items",
+    tags=["items"],
+)
+
+# CREATE operation
+@router.post("/", response_model=Item, status_code=status.HTTP_201_CREATED)
+def create_item(item: ItemCreate, db: Session = Depends(get_db)):
+    """Create a new item"""
+    return crud.create_item(db=db, item=item)
+
+from fastapi import Header
+@router.get("/", response_model=List[Item])
+def read_items(skip: int = 0, limit: int = 100, db: Session = Depends(get_db), api_key: str = Header(..., alias="api_key")):
+    """Get all items with pagination"""
+    return crud.get_items(db=db, skip=skip, limit=limit, api_key=api_key)
+
+@router.get("/{item_id}", response_model=Item)
+def read_item(item_id: int, db: Session = Depends(get_db)):
+    """Get a specific item by ID"""
+    db_item = crud.get_item(db=db, item_id=item_id)
+    if db_item is None:
+        raise HTTPException(status_code=404, detail="Item not found")
+    return db_item
+
+# UPDATE operation
+@router.put("/{item_id}", response_model=Item)
+def update_item(item_id: int, item: ItemCreate, db: Session = Depends(get_db)):
+    """Update an existing item"""
+    db_item = crud.update_item(db=db, item_id=item_id, item=item)
+    if db_item is None:
+        raise HTTPException(status_code=404, detail="Item not found")
+    return db_item
+
+# DELETE operation
+@router.delete("/{item_id}", status_code=status.HTTP_204_NO_CONTENT)
+def delete_item(item_id: int, db: Session = Depends(get_db)):
+    """Delete a specific item"""
+    success = crud.delete_item(db=db, item_id=item_id)
+    if not success:
+        raise HTTPException(status_code=404, detail="Item not found")
+    return None

app/schemas/item.py

@@ -0,0 +1,16 @@
+from pydantic import BaseModel
+from typing import Optional
+
+class ItemBase(BaseModel):
+    title: str
+    description: Optional[str] = None
+    completed: bool = False
+
+class ItemCreate(ItemBase):
+    pass
+
+class Item(ItemBase):
+    id: int
+
+    class Config:
+        from_attributes = True 

app/static/css/styles.css

@@ -0,0 +1,97 @@
+/* Custom styles for the CRUD application */
+
+body {
+    background-color: #f8f9fa;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+header {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border: none;
+    transition: transform 0.3s;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+}
+
+.card-header {
+    font-weight: 600;
+}
+
+.btn-primary {
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+}
+
+.btn-primary:hover {
+    background-color: #0b5ed7;
+    border-color: #0a58ca;
+}
+
+.table th {
+    background-color: #f1f3f5;
+}
+
+.badge-status {
+    font-size: 0.8rem;
+    padding: 0.35em 0.65em;
+}
+
+.completed-true {
+    background-color: #198754;
+}
+
+.completed-false {
+    background-color: #dc3545;
+}
+
+.action-btn {
+    transition: all 0.2s;
+}
+
+.action-btn:hover {
+    transform: scale(1.2);
+}
+
+.edit-btn {
+    color: #0d6efd;
+}
+
+.delete-btn {
+    color: #dc3545;
+}
+
+#no-items-message {
+    padding: 2rem;
+    background-color: #f8f9fa;
+    border-radius: 0.5rem;
+}
+
+/* Toast customization */
+.toast-container {
+    z-index: 11;
+}
+
+.toast {
+    opacity: 1;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+/* Animation for new/updated items */
+@keyframes highlight {
+    0% {
+        background-color: #e3f2fd;
+    }
+    100% {
+        background-color: transparent;
+    }
+}
+
+.highlight-row {
+    animation: highlight 2s ease-in-out;
+}

app/static/js/script.js

@@ -0,0 +1,303 @@
+// DOM Elements
+const itemForm = document.getElementById('item-form');
+const formTitle = document.getElementById('form-title');
+const itemIdInput = document.getElementById('item-id');
+const titleInput = document.getElementById('title');
+const descriptionInput = document.getElementById('description');
+const completedCheckbox = document.getElementById('completed');
+const submitBtn = document.getElementById('submit-btn');
+const cancelBtn = document.getElementById('cancel-btn');
+const itemsTableBody = document.getElementById('items-table-body');
+const noItemsMessage = document.getElementById('no-items-message');
+const createFirstItemBtn = document.getElementById('create-first-item-btn');
+const loadingSpinner = document.getElementById('loading-spinner');
+const toastElement = document.getElementById('toast');
+const toastTitle = document.getElementById('toast-title');
+const toastMessage = document.getElementById('toast-message');
+const toastIcon = document.getElementById('toast-icon');
+
+// Create Bootstrap toast instance
+const toast = new bootstrap.Toast(toastElement, {
+    delay: 3000
+});
+
+// API Endpoints
+const API_URL = '/api/items';
+
+// App State
+let isEditing = false;
+let items = [];
+
+// Event Listeners
+document.addEventListener('DOMContentLoaded', fetchItems);
+itemForm.addEventListener('submit', handleFormSubmit);
+cancelBtn.addEventListener('click', resetForm);
+if (createFirstItemBtn) {
+    createFirstItemBtn.addEventListener('click', () => {
+        window.scrollTo({
+            top: itemForm.offsetTop - 100,
+            behavior: 'smooth'
+        });
+        titleInput.focus();
+    });
+}
+
+// Functions
+async function fetchItems() {
+    try {
+        showLoading(true);
+        const response = await fetch(API_URL);
+        const data = await response.json();
+        
+        // Keep a reference to all items
+        items = data;
+        
+        renderItems(items);
+        showLoading(false);
+    } catch (error) {
+        console.error('Error fetching items:', error);
+        showToast('Error', 'Failed to load items. Please try again.', 'error');
+        showLoading(false);
+    }
+}
+
+function renderItems(items) {
+    itemsTableBody.innerHTML = '';
+    
+    if (items.length === 0) {
+        noItemsMessage.style.display = 'block';
+        document.querySelector('.table-responsive').style.display = 'none';
+        return;
+    }
+    
+    noItemsMessage.style.display = 'none';
+    document.querySelector('.table-responsive').style.display = 'block';
+    
+    items.forEach(item => {
+        const row = document.createElement('tr');
+        row.id = `item-row-${item.id}`;
+        
+        row.innerHTML = `
+            <td>${item.id}</td>
+            <td class="fw-medium">${escapeHtml(item.title)}</td>
+            <td>${escapeHtml(item.description || '-')}</td>
+            <td>
+                <span class="badge completed-${item.completed}">
+                    ${item.completed ? 
+                      '<i class="bi bi-check-circle me-1"></i>Completed' : 
+                      '<i class="bi bi-clock me-1"></i>Pending'}
+                </span>
+            </td>
+            <td class="text-center">
+                <div class="d-flex justify-content-center">
+                    <button class="action-btn edit-btn" data-id="${item.id}" title="Edit Item">
+                        <i class="bi bi-pencil-square"></i>
+                    </button>
+                    <button class="action-btn delete-btn" data-id="${item.id}" title="Delete Item">
+                        <i class="bi bi-trash"></i>
+                    </button>
+                </div>
+            </td>
+        `;
+        
+        itemsTableBody.appendChild(row);
+        
+        // Add event listeners to buttons
+        const editBtn = row.querySelector('.edit-btn');
+        const deleteBtn = row.querySelector('.delete-btn');
+        
+        editBtn.addEventListener('click', () => editItem(item));
+        deleteBtn.addEventListener('click', () => deleteItem(item.id));
+    });
+}
+
+async function handleFormSubmit(event) {
+    event.preventDefault();
+    
+    const itemData = {
+        title: titleInput.value.trim(),
+        description: descriptionInput.value.trim(),
+        completed: completedCheckbox.checked
+    };
+    
+    if (!itemData.title) {
+        showToast('Validation Error', 'Title is required', 'error');
+        titleInput.focus();
+        return;
+    }
+    
+    try {
+        showLoading(true);
+        
+        if (isEditing) {
+            // Update existing item
+            const itemId = parseInt(itemIdInput.value);
+            await updateItem(itemId, itemData);
+            showToast('Success', 'Item updated successfully!', 'success');
+        } else {
+            // Create new item
+            await createItem(itemData);
+            showToast('Success', 'New item created successfully!', 'success');
+        }
+        
+        resetForm();
+        fetchItems();
+    } catch (error) {
+        console.error('Error saving item:', error);
+        showToast('Error', 'Failed to save item. Please try again.', 'error');
+        showLoading(false);
+    }
+}
+
+async function createItem(itemData) {
+    const response = await fetch(API_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(itemData)
+    });
+    
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || 'Failed to create item');
+    }
+    
+    return await response.json();
+}
+
+async function updateItem(itemId, itemData) {
+    const response = await fetch(`${API_URL}/${itemId}`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(itemData)
+    });
+    
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || 'Failed to update item');
+    }
+    
+    return await response.json();
+}
+
+async function deleteItem(itemId) {
+    // Create custom confirm dialog
+    if (!confirm('Are you sure you want to delete this item? This action cannot be undone.')) {
+        return;
+    }
+    
+    try {
+        showLoading(true);
+        
+        const response = await fetch(`${API_URL}/${itemId}`, {
+            method: 'DELETE'
+        });
+        
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to delete item');
+        }
+        
+        showToast('Success', 'Item deleted successfully!', 'success');
+        
+        // Remove item from local array
+        items = items.filter(item => item.id !== itemId);
+        
+        // Re-render items
+        renderItems(items);
+        showLoading(false);
+    } catch (error) {
+        console.error('Error deleting item:', error);
+        showToast('Error', 'Failed to delete item. Please try again.', 'error');
+        showLoading(false);
+    }
+}
+
+function editItem(item) {
+    // Set form to edit mode
+    isEditing = true;
+    formTitle.innerHTML = '<i class="bi bi-pencil-square me-2"></i>Edit Item';
+    submitBtn.innerHTML = '<i class="bi bi-save me-2"></i>Update';
+    cancelBtn.style.display = 'block';
+    
+    // Populate form with item data
+    itemIdInput.value = item.id;
+    titleInput.value = item.title;
+    descriptionInput.value = item.description || '';
+    completedCheckbox.checked = item.completed;
+    
+    // Scroll to form
+    window.scrollTo({
+        top: itemForm.offsetTop - 100,
+        behavior: 'smooth'
+    });
+    
+    // Add highlight class to row
+    const row = document.getElementById(`item-row-${item.id}`);
+    if (row) {
+        row.classList.add('highlight-row');
+        setTimeout(() => {
+            row.classList.remove('highlight-row');
+        }, 2000);
+    }
+    
+    // Focus on title input
+    titleInput.focus();
+}
+
+function resetForm() {
+    // Reset form state
+    isEditing = false;
+    formTitle.innerHTML = '<i class="bi bi-plus-circle me-2"></i>Add New Item';
+    submitBtn.innerHTML = '<i class="bi bi-save me-2"></i>Save';
+    cancelBtn.style.display = 'none';
+    
+    // Clear form inputs
+    itemForm.reset();
+    itemIdInput.value = '';
+}
+
+function showToast(title, message, type = 'info') {
+    toastTitle.textContent = title;
+    toastMessage.textContent = message;
+    
+    // Remove any existing classes
+    toastElement.classList.remove('bg-success', 'bg-danger', 'bg-info', 'bg-warning', 'text-white');
+    toastIcon.classList.remove('bi-check-circle-fill', 'bi-exclamation-triangle-fill', 'bi-info-circle-fill');
+    
+    // Add appropriate styling based on type
+    if (type === 'success') {
+        toastElement.classList.add('bg-success', 'text-white');
+        toastIcon.classList.add('bi-check-circle-fill');
+    } else if (type === 'error') {
+        toastElement.classList.add('bg-danger', 'text-white');
+        toastIcon.classList.add('bi-exclamation-triangle-fill');
+    } else {
+        toastElement.classList.add('bg-info', 'text-white');
+        toastIcon.classList.add('bi-info-circle-fill');
+    }
+    
+    toast.show();
+}
+
+function showLoading(isLoading) {
+    if (isLoading) {
+        loadingSpinner.style.display = 'inline-block';
+    } else {
+        loadingSpinner.style.display = 'none';
+    }
+}
+
+// Utility function to prevent XSS
+function escapeHtml(str) {
+    if (!str) return '';
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}

app/templates/index.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FastAPI CRUD App</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/styles.css') }}">
+</head>
+<body>
+    <header class="text-center py-4 mb-5">
+        <div class="container">
+            <h1 class="display-4 fw-bold">FastAPI CRUD Application</h1>
+            <p class="lead mb-0">Create, Read, Update, and Delete Items</p>
+        </div>
+    </header>
+
+    <main class="container mb-5">
+        <div class="row g-4">
+            <!-- Form section -->
+            <div class="col-lg-4 col-md-5">
+                <div class="card h-100">
+                    <div class="card-header d-flex align-items-center">
+                        <i class="bi bi-plus-circle me-2"></i>
+                        <h2 class="h5 mb-0" id="form-title">Add New Item</h2>
+                    </div>
+                    <div class="card-body">
+                        <form id="item-form">
+                            <input type="hidden" id="item-id">
+                            <div class="mb-4">
+                                <label for="title" class="form-label">Title</label>
+                                <input type="text" class="form-control" id="title" placeholder="Enter item title" required>
+                            </div>
+                            <div class="mb-4">
+                                <label for="description" class="form-label">Description</label>
+                                <textarea class="form-control" id="description" rows="4" placeholder="Enter item description"></textarea>
+                            </div>
+                            <div class="mb-4 form-check">
+                                <input type="checkbox" class="form-check-input" id="completed">
+                                <label class="form-check-label" for="completed">Mark as completed</label>
+                            </div>
+                            <div class="d-grid gap-2 d-md-flex justify-content-md-between">
+                                <button type="submit" class="btn btn-primary px-4" id="submit-btn">
+                                    <i class="bi bi-save me-2"></i>Save
+                                </button>
+                                <button type="button" class="btn btn-secondary px-4" id="cancel-btn" style="display: none;">
+                                    <i class="bi bi-x-circle me-2"></i>Cancel
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Items list section -->
+            <div class="col-lg-8 col-md-7">
+                <div class="card h-100">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <div class="d-flex align-items-center">
+                            <i class="bi bi-list-ul me-2"></i>
+                            <h2 class="h5 mb-0">Items List</h2>
+                        </div>
+                        <div class="spinner-border text-light spinner-border-sm" role="status" id="loading-spinner">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div class="table-responsive">
+                            <table class="table table-hover">
+                                <thead>
+                                    <tr>
+                                        <th scope="col" width="5%">ID</th>
+                                        <th scope="col" width="25%">Title</th>
+                                        <th scope="col" width="40%">Description</th>
+                                        <th scope="col" width="15%">Status</th>
+                                        <th scope="col" width="15%" class="text-center">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="items-table-body">
+                                    <!-- Items will be loaded here -->
+                                </tbody>
+                            </table>
+                        </div>
+                        <div id="no-items-message" style="display: none;">
+                            <i class="bi bi-inbox text-muted d-block text-center" style="font-size: 3rem;"></i>
+                            <p class="text-center mt-3">No items found. Create a new item to get started.</p>
+                            <div class="text-center">
+                                <button class="btn btn-primary" id="create-first-item-btn">
+                                    <i class="bi bi-plus-circle me-2"></i>Create First Item
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Toast notifications -->
+    <div class="toast-container position-fixed top-0 end-0 p-3">
+        <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header">
+                <i class="bi me-2" id="toast-icon"></i>
+                <strong class="me-auto" id="toast-title">Notification</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body" id="toast-message">
+                <!-- Toast message will be inserted here -->
+            </div>
+        </div>
+    </div>
+
+    <footer class="py-4">
+        <div class="container">
+            <p>FastAPI CRUD Application &copy; 2025 | Built with <i class="bi bi-heart-fill text-danger"></i> using FastAPI & SQLite</p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', path='/js/script.js') }}"></script>
+</body>
+</html>