Hammer2900 · June 29, 2025 15:05
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django 5.1 {% querystring %} Study Guide</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.2em;
        }
        
        .section {
            margin-bottom: 25px;
            border: 2px solid #ecf0f1;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .section:hover {
            border-color: #3498db;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.1);
        }
        
        .section-header {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            padding: 15px 20px;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            justify-content: between;
            align-items: center;
            transition: background 0.3s ease;
        }
        
        .section-header:hover {
            background: linear-gradient(135deg, #2980b9, #1f618d);
        }
        
        .toggle-icon {
            font-size: 1.2em;
            transition: transform 0.3s ease;
        }
        
        .section-content {
            padding: 20px;
            display: none;
            background: #f8f9fa;
        }
        
        .section-content.active {
            display: block;
            animation: slideDown 0.3s ease;
        }
        
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .code-block {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
        }
        
        .highlight {
            background: #f1c40f;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: bold;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        
        .comparison-table th,
        .comparison-table td {
            border: 1px solid #bdc3c7;
            padding: 12px;
            text-align: left;
        }
        
        .comparison-table th {
            background: #34495e;
            color: white;
        }
        
        .comparison-table tr:nth-child(even) {
            background: #ecf0f1;
        }
        
        .practice-question {
            background: #e8f5e8;
            border-left: 4px solid #27ae60;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
        }
        
        .key-point {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
        }
        
        .progress-bar {
            width: 100%;
            height: 10px;
            background: #ecf0f1;
            border-radius: 5px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #27ae60, #2ecc71);
            width: 0%;
            transition: width 0.5s ease;
        }
        
        button {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
        }
    </style>
 </head>
 <body>
    <div class="container">
        <h1>🚀 Django 5.1 {% querystring %} Study Guide</h1>
        
        <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
        </div>
        
        <div class="section">
            <div class="section-header" onclick="toggleSection(this)">
                <span>🎯 What is {% querystring %} and Why Does It Matter?</span>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="section-content">
                <p>Think of URL query strings as the "settings" part of a web address. When you see a URL like <code>example.com/products?category=electronics&sort=price&page=2</code>, everything after the <code>?</code> are query parameters that tell the server what specific data to show.</p>
                
                <div class="key-point">
                    <strong>🔑 Key Understanding:</strong> Before Django 5.1, manipulating these URL parameters in templates was like trying to edit a sentence while keeping track of every word manually. The new <code>{% querystring %}</code> tag acts like a smart editor that automatically handles the complexity for you.
                </div>
                
                <p>This template tag solves a fundamental problem in web development: how to easily modify URL parameters without breaking existing ones. It's particularly valuable for features like pagination, filtering, and sorting where you need to preserve the user's current context while adding new parameters.</p>
            </div>
        </div>
        
        <div class="section">
            <div class="section-header" onclick="toggleSection(this)">
                <span>⚡ How It Works: The Technical Foundation</span>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="section-content">
                <p>The <code>{% querystring %}</code> tag operates by examining the current request's query parameters and providing a clean interface to modify them. Here's how it processes your modifications:</p>
                
                <div class="code-block">
 # Current URL: /products?category=books&sort=title&page=1

 # Template usage:
 {% querystring page=2 %}
 # Result: ?category=books&sort=title&page=2

 {% querystring category="electronics" color="red" %}
 # Result: ?category=electronics&sort=title&page=1&color=red

 {% querystring page=None %}
 # Result: ?category=books&sort=title (page parameter removed)
                </div>
                
                <div class="key-point">
                    <strong>🧠 Mental Model:</strong> Think of it as a smart dictionary that knows which keys to add, update, or remove while preserving everything else. It's like having an assistant who remembers all your current settings while you focus on changing just what you need.
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-header" onclick="toggleSection(this)">
                <span>🔄 Before vs. After: The Transformation</span>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="section-content">
                <p>Let's examine how this feature transforms Django template development by comparing the old and new approaches:</p>
                
                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th>Aspect</th>
                            <th>Before Django 5.1</th>
                            <th>With {% querystring %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Complexity</strong></td>
                            <td>Required custom template tags or complex logic</td>
                            <td>Simple, one-line template tag</td>
                        </tr>
                        <tr>
                            <td><strong>Parameter Preservation</strong></td>
                            <td>Manual tracking of existing parameters</td>
                            <td>Automatic preservation of existing parameters</td>
                        </tr>
                        <tr>
                            <td><strong>Code Maintainability</strong></td>
                            <td>Custom solutions required maintenance</td>
                            <td>Built-in Django feature, no custom code needed</td>
                        </tr>
                        <tr>
                            <td><strong>Error Proneness</strong></td>
                            <td>Easy to accidentally lose parameters</td>
                            <td>Robust handling prevents parameter loss</td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="code-block">
 <!-- OLD WAY: Complex and error-prone -->
 &lt;a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page=2"&gt;
    Next Page
 &lt;/a&gt;

 <!-- NEW WAY: Clean and simple -->
 &lt;a href="{% querystring page=2 %}"&gt;
    Next Page
 &lt;/a&gt;
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-header" onclick="toggleSection(this)">
                <span>🛠️ Practical Applications and Use Cases</span>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="section-content">
                <p>Understanding where and how to apply <code>{% querystring %}</code> is crucial for effective Django development. Here are the most common and powerful use cases:</p>
                
                <h3>1. Pagination Systems</h3>
                <div class="code-block">
 &lt;!-- Previous page link --&gt;
 &lt;a href="{% querystring page=page_obj.previous_page_number %}"&gt;Previous&lt;/a&gt;

 &lt;!-- Next page link --&gt;
 &lt;a href="{% querystring page=page_obj.next_page_number %}"&gt;Next&lt;/a&gt;

 &lt;!-- Direct page links --&gt;
 {% for page_num in page_obj.paginator.page_range %}
    &lt;a href="{% querystring page=page_num %}"&gt;{{ page_num }}&lt;/a&gt;
 {% endfor %}
                </div>
                
                <h3>2. Dynamic Filtering</h3>
                <div class="code-block">
 &lt;!-- Category filters --&gt;
 &lt;a href="{% querystring category='electronics' %}"&gt;Electronics&lt;/a&gt;
 &lt;a href="{% querystring category='books' %}"&gt;Books&lt;/a&gt;
 &lt;a href="{% querystring category=None %}"&gt;All Categories&lt;/a&gt;

 &lt;!-- Price range filters --&gt;
 &lt;a href="{% querystring min_price=100 max_price=500 %}"&gt;$100-$500&lt;/a&gt;
                </div>
                
                <h3>3. Sorting Options</h3>
                <div class="code-block">
 &lt;!-- Sort by different criteria --&gt;
 &lt;a href="{% querystring sort='name' %}"&gt;Sort by Name&lt;/a&gt;
 &lt;a href="{% querystring sort='price' %}"&gt;Sort by Price&lt;/a&gt;
 &lt;a href="{% querystring sort='date' %}"&gt;Sort by Date&lt;/a&gt;

 &lt;!-- Toggle sort direction --&gt;
 &lt;a href="{% querystring order='asc' if request.GET.order == 'desc' else 'desc' %}"&gt;
    Toggle Sort Direction
 &lt;/a&gt;
                </div>
                
                <div class="practice-question">
                    <strong>🤔 Think About This:</strong> How would you create a search interface that preserves the user's current filters while updating the search term? What parameters would you need to manage?
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-header" onclick="toggleSection(this)">
                <span>⚙️ Setup Requirements and Configuration</span>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="section-content">
                <p>To use <code>{% querystring %}</code> effectively, you need to ensure your Django project is properly configured. Here's what you need to check:</p>
                
                <h3>1. Django Version Requirement</h3>
                <div class="code-block">
 # Check your Django version
 python -m django --version

 # Should be 5.1 or higher
 # If not, upgrade with:
 pip install Django>=5.1
                </div>
                
                <h3>2. Context Processor Configuration</h3>
                <p>The tag requires access to the request object in your templates. Ensure your <code>settings.py</code> includes the request context processor:</p>
                
                <div class="code-block">
 # settings.py
 TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',  # This is required!
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
 ]
                </div>
                
                <div class="key-point">
                    <strong>💡 Pro Tip:</strong> The request context processor is usually included by default in new Django projects, but it's worth verifying in existing projects, especially if you're upgrading from older versions.
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-header" onclick="toggleSection(this)">
                <span>🚀 Advanced Techniques and HTMX Integration</span>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="section-content">
                <p>The real power of <code>{% querystring %}</code> becomes apparent when building dynamic, interactive interfaces. Here's how to leverage it for advanced use cases:</p>
                
                <h3>HTMX Integration for Dynamic Content</h3>
                <div class="code-block">
 &lt;!-- Dynamic filtering with HTMX --&gt;
 &lt;div hx-get="{% querystring category='electronics' %}" 
     hx-target="#product-list" 
     hx-push-url="true"&gt;
    &lt;button&gt;Show Electronics&lt;/button&gt;
 &lt;/div&gt;

 &lt;!-- Auto-updating search with debouncing --&gt;
 &lt;input type="text" 
       hx-get="{% url 'search' %}"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#search-results"
       hx-vals='{"search": this.value}'&gt;
                </div>
                
                <h3>Complex Parameter Management</h3>
                <div class="code-block">
 &lt;!-- Multiple parameter updates --&gt;
 &lt;a href="{% querystring category='books' sort='title' page=1 %}"&gt;
    Books by Title (Reset to Page 1)
 &lt;/a&gt;

 &lt;!-- Conditional parameter setting --&gt;
 &lt;a href="{% querystring featured=True if not request.GET.featured else None %}"&gt;
    {% if request.GET.featured %}Hide Featured{% else %}Show Only Featured{% endif %}
 &lt;/a&gt;
                </div>
                
                <div class="practice-question">
                    <strong>🎯 Challenge:</strong> How would you create a filter interface that allows users to select multiple categories while preserving their current search term and sort order? Think about the URL structure and user experience.
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-header" onclick="toggleSection(this)">
                <span>📝 Practice Questions and Exercises</span>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="section-content">
                <div class="practice-question">
                    <strong>Question 1:</strong> You have a URL like <code>/products?category=electronics&sort=price&page=3</code>. Using <code>{% querystring %}</code>, how would you create a link that changes the category to "books" while keeping the sort and page parameters?
                </div>
                
                <div class="practice-question">
                    <strong>Question 2:</strong> How would you create a "Clear All Filters" link that removes specific parameters (category, price_min, price_max) while preserving others (sort, page)?
                </div>
                
                <div class="practice-question">
                    <strong>Question 3:</strong> Design a pagination interface for a search results page that needs to preserve the search query, selected filters, and sort order while changing only the page number.
                </div>
                
                <button onclick="showAnswers()">Show Practice Answers</button>
                
                <div id="answers" style="display: none; margin-top: 20px;">
                    <h3>Practice Answers:</h3>
                    
                    <div class="code-block">
 &lt;!-- Answer 1: Change category to books --&gt;
 &lt;a href="{% querystring category='books' %}"&gt;Books&lt;/a&gt;
 &lt;!-- This preserves sort=price and page=3 automatically --&gt;

 &lt;!-- Answer 2: Clear specific filters --&gt;
 &lt;a href="{% querystring category=None price_min=None price_max=None %}"&gt;
    Clear All Filters
 &lt;/a&gt;

 &lt;!-- Answer 3: Pagination with preservation --&gt;
 {% for page_num in page_obj.paginator.page_range %}
    &lt;a href="{% querystring page=page_num %}" 
       {% if page_num == page_obj.number %}class="active"{% endif %}&gt;
        {{ page_num }}
    &lt;/a&gt;
 {% endfor %}
 &lt;!-- All search, filter, and sort parameters are automatically preserved --&gt;
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-header" onclick="toggleSection(this)">
                <span>🎓 Key Takeaways and Best Practices</span>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="section-content">
                <p>As you master the <code>{% querystring %}</code> tag, keep these essential principles in mind:</p>
                
                <div class="key-point">
                    <strong>🔑 Core Concept:</strong> The tag is designed around the principle of "smart defaults" - it automatically does the right thing (preserving existing parameters) while giving you control over specific changes.
                </div>
                
                <h3>Best Practices for Implementation:</h3>
                <p><strong>Parameter Removal:</strong> Use <code>parameter=None</code> to remove parameters cleanly rather than trying to manipulate URLs manually.</p>
                
                <p><strong>Multiple Updates:</strong> When updating multiple parameters, do it in a single tag call rather than chaining multiple operations.</p>
                
                <p><strong>User Experience:</strong> Always consider what parameters should be preserved vs. reset. For example, when changing categories, you might want to reset the page to 1.</p>
                
                <p><strong>Testing:</strong> Test your URL manipulations with various combinations of existing parameters to ensure they behave correctly in all scenarios.</p>
                
                <div class="practice-question">
                    <strong>🚀 Next Steps:</strong> Try implementing a complete product filtering system in your next Django project. Start with basic category filtering, then add price ranges, sorting, and pagination. Notice how much cleaner your template code becomes!
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let sectionsOpened = 0;
        const totalSections = document.querySelectorAll('.section').length;
        
        function toggleSection(header) {
            const content = header.nextElementSibling;
            const icon = header.querySelector('.toggle-icon');
            
            if (content.classList.contains('active')) {
                content.classList.remove('active');
                icon.style.transform = 'rotate(0deg)';
                sectionsOpened--;
            } else {
                content.classList.add('active');
                icon.style.transform = 'rotate(180deg)';
                sectionsOpened++;
            }
            
            updateProgress();
        }
        
        function updateProgress() {
            const progress = (sectionsOpened / totalSections) * 100;
            document.getElementById('progressFill').style.width = progress + '%';
        }
        
        function showAnswers() {
            const answers = document.getElementById('answers');
            answers.style.display = answers.style.display === 'none' ? 'block' : 'none';
        }
        
        // Open first section by default
        document.addEventListener('DOMContentLoaded', function() {
            const firstSection = document.querySelector('.section-header');
            if (firstSection) {
                toggleSection(firstSection);
            }
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Django 5.1 {% querystring %} Study Guide</title>
	<style>
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	}

	.container {
	background: white;
	border-radius: 15px;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	}

	h1 {
	color: #2c3e50;
	text-align: center;
	margin-bottom: 30px;
	font-size: 2.2em;
	}

	.section {
	margin-bottom: 25px;
	border: 2px solid #ecf0f1;
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.3s ease;
	}

	.section:hover {
	border-color: #3498db;
	box-shadow: 0 5px 15px rgba(52, 152, 219, 0.1);
	}

	.section-header {
	background: linear-gradient(135deg, #3498db, #2980b9);
	color: white;
	padding: 15px 20px;
	cursor: pointer;
	font-weight: bold;
	display: flex;
	justify-content: between;
	align-items: center;
	transition: background 0.3s ease;
	}

	.section-header:hover {
	background: linear-gradient(135deg, #2980b9, #1f618d);
	}

	.toggle-icon {
	font-size: 1.2em;
	transition: transform 0.3s ease;
	}

	.section-content {
	padding: 20px;
	display: none;
	background: #f8f9fa;
	}

	.section-content.active {
	display: block;
	animation: slideDown 0.3s ease;
	}

	@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
	}

	.code-block {
	background: #2c3e50;
	color: #ecf0f1;
	padding: 15px;
	border-radius: 8px;
	margin: 15px 0;
	font-family: 'Courier New', monospace;
	overflow-x: auto;
	}

	.highlight {
	background: #f1c40f;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: bold;
	}

	.comparison-table {
	width: 100%;
	border-collapse: collapse;
	margin: 15px 0;
	}

	.comparison-table th,
	.comparison-table td {
	border: 1px solid #bdc3c7;
	padding: 12px;
	text-align: left;
	}

	.comparison-table th {
	background: #34495e;
	color: white;
	}

	.comparison-table tr:nth-child(even) {
	background: #ecf0f1;
	}

	.practice-question {
	background: #e8f5e8;
	border-left: 4px solid #27ae60;
	padding: 15px;
	margin: 15px 0;
	border-radius: 0 8px 8px 0;
	}

	.key-point {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	padding: 15px;
	border-radius: 8px;
	margin: 15px 0;
	}

	.progress-bar {
	width: 100%;
	height: 10px;
	background: #ecf0f1;
	border-radius: 5px;
	margin: 20px 0;
	overflow: hidden;
	}

	.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #27ae60, #2ecc71);
	width: 0%;
	transition: width 0.5s ease;
	}

	button {
	background: linear-gradient(135deg, #e74c3c, #c0392b);
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.3s ease;
	}

	button:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>🚀 Django 5.1 {% querystring %} Study Guide</h1>

	<div class="progress-bar">
	<div class="progress-fill" id="progressFill"></div>
	</div>

	<div class="section">
	<div class="section-header" onclick="toggleSection(this)">
	<span>🎯 What is {% querystring %} and Why Does It Matter?</span>
	<span class="toggle-icon">▼</span>
	</div>
	<div class="section-content">
	<p>Think of URL query strings as the "settings" part of a web address. When you see a URL like <code>example.com/products?category=electronics&sort=price&page=2</code>, everything after the <code>?</code> are query parameters that tell the server what specific data to show.</p>

	<div class="key-point">
	<strong>🔑 Key Understanding:</strong> Before Django 5.1, manipulating these URL parameters in templates was like trying to edit a sentence while keeping track of every word manually. The new <code>{% querystring %}</code> tag acts like a smart editor that automatically handles the complexity for you.
	</div>

	<p>This template tag solves a fundamental problem in web development: how to easily modify URL parameters without breaking existing ones. It's particularly valuable for features like pagination, filtering, and sorting where you need to preserve the user's current context while adding new parameters.</p>
	</div>
	</div>

	<div class="section">
	<div class="section-header" onclick="toggleSection(this)">
	<span>⚡ How It Works: The Technical Foundation</span>
	<span class="toggle-icon">▼</span>
	</div>
	<div class="section-content">
	<p>The <code>{% querystring %}</code> tag operates by examining the current request's query parameters and providing a clean interface to modify them. Here's how it processes your modifications:</p>

	<div class="code-block">
	# Current URL: /products?category=books&sort=title&page=1

	# Template usage:
	{% querystring page=2 %}
	# Result: ?category=books&sort=title&page=2

	{% querystring category="electronics" color="red" %}
	# Result: ?category=electronics&sort=title&page=1&color=red

	{% querystring page=None %}
	# Result: ?category=books&sort=title (page parameter removed)
	</div>

	<div class="key-point">
	<strong>🧠 Mental Model:</strong> Think of it as a smart dictionary that knows which keys to add, update, or remove while preserving everything else. It's like having an assistant who remembers all your current settings while you focus on changing just what you need.
	</div>
	</div>
	</div>

	<div class="section">
	<div class="section-header" onclick="toggleSection(this)">
	<span>🔄 Before vs. After: The Transformation</span>
	<span class="toggle-icon">▼</span>
	</div>
	<div class="section-content">
	<p>Let's examine how this feature transforms Django template development by comparing the old and new approaches:</p>

	<table class="comparison-table">
	<thead>
	<tr>
	<th>Aspect</th>
	<th>Before Django 5.1</th>
	<th>With {% querystring %}</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><strong>Complexity</strong></td>
	<td>Required custom template tags or complex logic</td>
	<td>Simple, one-line template tag</td>
	</tr>
	<tr>
	<td><strong>Parameter Preservation</strong></td>
	<td>Manual tracking of existing parameters</td>
	<td>Automatic preservation of existing parameters</td>
	</tr>
	<tr>
	<td><strong>Code Maintainability</strong></td>
	<td>Custom solutions required maintenance</td>
	<td>Built-in Django feature, no custom code needed</td>
	</tr>
	<tr>
	<td><strong>Error Proneness</strong></td>
	<td>Easy to accidentally lose parameters</td>
	<td>Robust handling prevents parameter loss</td>
	</tr>
	</tbody>
	</table>

	<div class="code-block">
	<!-- OLD WAY: Complex and error-prone -->
	<a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page=2">
	Next Page
	</a>

	<!-- NEW WAY: Clean and simple -->
	<a href="{% querystring page=2 %}">
	Next Page
	</a>
	</div>
	</div>
	</div>

	<div class="section">
	<div class="section-header" onclick="toggleSection(this)">
	<span>🛠️ Practical Applications and Use Cases</span>
	<span class="toggle-icon">▼</span>
	</div>
	<div class="section-content">
	<p>Understanding where and how to apply <code>{% querystring %}</code> is crucial for effective Django development. Here are the most common and powerful use cases:</p>

	<h3>1. Pagination Systems</h3>
	<div class="code-block">
	<!-- Previous page link -->
	<a href="{% querystring page=page_obj.previous_page_number %}">Previous</a>

	<!-- Next page link -->
	<a href="{% querystring page=page_obj.next_page_number %}">Next</a>

	<!-- Direct page links -->
	{% for page_num in page_obj.paginator.page_range %}
	<a href="{% querystring page=page_num %}">{{ page_num }}</a>
	{% endfor %}
	</div>

	<h3>2. Dynamic Filtering</h3>
	<div class="code-block">
	<!-- Category filters -->
	<a href="{% querystring category='electronics' %}">Electronics</a>
	<a href="{% querystring category='books' %}">Books</a>
	<a href="{% querystring category=None %}">All Categories</a>

	<!-- Price range filters -->
	<a href="{% querystring min_price=100 max_price=500 %}">$100-$500</a>
	</div>

	<h3>3. Sorting Options</h3>
	<div class="code-block">
	<!-- Sort by different criteria -->
	<a href="{% querystring sort='name' %}">Sort by Name</a>
	<a href="{% querystring sort='price' %}">Sort by Price</a>
	<a href="{% querystring sort='date' %}">Sort by Date</a>

	<!-- Toggle sort direction -->
	<a href="{% querystring order='asc' if request.GET.order == 'desc' else 'desc' %}">
	Toggle Sort Direction
	</a>
	</div>

	<div class="practice-question">
	<strong>🤔 Think About This:</strong> How would you create a search interface that preserves the user's current filters while updating the search term? What parameters would you need to manage?
	</div>
	</div>
	</div>

	<div class="section">
	<div class="section-header" onclick="toggleSection(this)">
	<span>⚙️ Setup Requirements and Configuration</span>
	<span class="toggle-icon">▼</span>
	</div>
	<div class="section-content">
	<p>To use <code>{% querystring %}</code> effectively, you need to ensure your Django project is properly configured. Here's what you need to check:</p>

	<h3>1. Django Version Requirement</h3>
	<div class="code-block">
	# Check your Django version
	python -m django --version

	# Should be 5.1 or higher
	# If not, upgrade with:
	pip install Django>=5.1
	</div>

	<h3>2. Context Processor Configuration</h3>
	<p>The tag requires access to the request object in your templates. Ensure your <code>settings.py</code> includes the request context processor:</p>

	<div class="code-block">
	# settings.py
	TEMPLATES = [
	{
	'BACKEND': 'django.template.backends.django.DjangoTemplates',
	'DIRS': [],
	'APP_DIRS': True,
	'OPTIONS': {
	'context_processors': [
	'django.template.context_processors.debug',
	'django.template.context_processors.request', # This is required!
	'django.contrib.auth.context_processors.auth',
	'django.contrib.messages.context_processors.messages',
	],
	},
	},
	]
	</div>

	<div class="key-point">
	<strong>💡 Pro Tip:</strong> The request context processor is usually included by default in new Django projects, but it's worth verifying in existing projects, especially if you're upgrading from older versions.
	</div>
	</div>
	</div>

	<div class="section">
	<div class="section-header" onclick="toggleSection(this)">
	<span>🚀 Advanced Techniques and HTMX Integration</span>
	<span class="toggle-icon">▼</span>
	</div>
	<div class="section-content">
	<p>The real power of <code>{% querystring %}</code> becomes apparent when building dynamic, interactive interfaces. Here's how to leverage it for advanced use cases:</p>

	<h3>HTMX Integration for Dynamic Content</h3>
	<div class="code-block">
	<!-- Dynamic filtering with HTMX -->
	<div hx-get="{% querystring category='electronics' %}"
	hx-target="#product-list"
	hx-push-url="true">
	<button>Show Electronics</button>
	</div>

	<!-- Auto-updating search with debouncing -->
	<input type="text"
	hx-get="{% url 'search' %}"
	hx-trigger="keyup changed delay:300ms"
	hx-target="#search-results"
	hx-vals='{"search": this.value}'>
	</div>

	<h3>Complex Parameter Management</h3>
	<div class="code-block">
	<!-- Multiple parameter updates -->
	<a href="{% querystring category='books' sort='title' page=1 %}">
	Books by Title (Reset to Page 1)
	</a>

	<!-- Conditional parameter setting -->
	<a href="{% querystring featured=True if not request.GET.featured else None %}">
	{% if request.GET.featured %}Hide Featured{% else %}Show Only Featured{% endif %}
	</a>
	</div>

	<div class="practice-question">
	<strong>🎯 Challenge:</strong> How would you create a filter interface that allows users to select multiple categories while preserving their current search term and sort order? Think about the URL structure and user experience.
	</div>
	</div>
	</div>

	<div class="section">
	<div class="section-header" onclick="toggleSection(this)">
	<span>📝 Practice Questions and Exercises</span>
	<span class="toggle-icon">▼</span>
	</div>
	<div class="section-content">
	<div class="practice-question">
	<strong>Question 1:</strong> You have a URL like <code>/products?category=electronics&sort=price&page=3</code>. Using <code>{% querystring %}</code>, how would you create a link that changes the category to "books" while keeping the sort and page parameters?
	</div>

	<div class="practice-question">
	<strong>Question 2:</strong> How would you create a "Clear All Filters" link that removes specific parameters (category, price_min, price_max) while preserving others (sort, page)?
	</div>

	<div class="practice-question">
	<strong>Question 3:</strong> Design a pagination interface for a search results page that needs to preserve the search query, selected filters, and sort order while changing only the page number.
	</div>

	<button onclick="showAnswers()">Show Practice Answers</button>

	<div id="answers" style="display: none; margin-top: 20px;">
	<h3>Practice Answers:</h3>

	<div class="code-block">
	<!-- Answer 1: Change category to books -->
	<a href="{% querystring category='books' %}">Books</a>
	<!-- This preserves sort=price and page=3 automatically -->

	<!-- Answer 2: Clear specific filters -->
	<a href="{% querystring category=None price_min=None price_max=None %}">
	Clear All Filters
	</a>

	<!-- Answer 3: Pagination with preservation -->
	{% for page_num in page_obj.paginator.page_range %}
	<a href="{% querystring page=page_num %}"
	{% if page_num == page_obj.number %}class="active"{% endif %}>
	{{ page_num }}
	</a>
	{% endfor %}
	<!-- All search, filter, and sort parameters are automatically preserved -->
	</div>
	</div>
	</div>
	</div>

	<div class="section">
	<div class="section-header" onclick="toggleSection(this)">
	<span>🎓 Key Takeaways and Best Practices</span>
	<span class="toggle-icon">▼</span>
	</div>
	<div class="section-content">
	<p>As you master the <code>{% querystring %}</code> tag, keep these essential principles in mind:</p>

	<div class="key-point">
	<strong>🔑 Core Concept:</strong> The tag is designed around the principle of "smart defaults" - it automatically does the right thing (preserving existing parameters) while giving you control over specific changes.
	</div>

	<h3>Best Practices for Implementation:</h3>
	<p><strong>Parameter Removal:</strong> Use <code>parameter=None</code> to remove parameters cleanly rather than trying to manipulate URLs manually.</p>

	<p><strong>Multiple Updates:</strong> When updating multiple parameters, do it in a single tag call rather than chaining multiple operations.</p>

	<p><strong>User Experience:</strong> Always consider what parameters should be preserved vs. reset. For example, when changing categories, you might want to reset the page to 1.</p>

	<p><strong>Testing:</strong> Test your URL manipulations with various combinations of existing parameters to ensure they behave correctly in all scenarios.</p>

	<div class="practice-question">
	<strong>🚀 Next Steps:</strong> Try implementing a complete product filtering system in your next Django project. Start with basic category filtering, then add price ranges, sorting, and pagination. Notice how much cleaner your template code becomes!
	</div>
	</div>
	</div>
	</div>

	<script>
	let sectionsOpened = 0;
	const totalSections = document.querySelectorAll('.section').length;

	function toggleSection(header) {
	const content = header.nextElementSibling;
	const icon = header.querySelector('.toggle-icon');

	if (content.classList.contains('active')) {
	content.classList.remove('active');
	icon.style.transform = 'rotate(0deg)';
	sectionsOpened--;
	} else {
	content.classList.add('active');
	icon.style.transform = 'rotate(180deg)';
	sectionsOpened++;
	}

	updateProgress();
	}

	function updateProgress() {
	const progress = (sectionsOpened / totalSections) * 100;
	document.getElementById('progressFill').style.width = progress + '%';
	}

	function showAnswers() {
	const answers = document.getElementById('answers');
	answers.style.display = answers.style.display === 'none' ? 'block' : 'none';
	}

	// Open first section by default
	document.addEventListener('DOMContentLoaded', function() {
	const firstSection = document.querySelector('.section-header');
	if (firstSection) {
	toggleSection(firstSection);
	}
	});
	</script>
	</body>
	</html>