### List Installed Packages

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Displays a list of all Python packages installed in the current virtual environment. Useful for verifying that all dependencies have been installed correctly.

```bash
pip list
```

--------------------------------

### Run Development Server

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Starts the Django development server, allowing you to view and interact with the CommuMap application locally. The application will be accessible at http://127.0.0.1:8000/.

```bash
python manage.py runserver
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Installs all required Python packages listed in the 'requirements.txt' file within the activated virtual environment. Ensure the virtual environment is active before running.

```bash
pip install -r requirements.txt
```

--------------------------------

### Clone CommuMap Repository

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Clones the CommuMap project repository from a given GitHub URL and navigates into the project directory. This is the first step in setting up the development environment.

```bash
git clone <your-github-repo-url>
cd CommuMap
```

--------------------------------

### Create Admin User

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Executes a Python script to create an administrator account for the CommuMap application. This is an alternative to having the project owner create an account.

```bash
python create_admin.py
```

--------------------------------

### Upgrade Pip

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Upgrades the 'pip' package installer to the latest version. This can help resolve potential compilation or installation issues with other packages.

```bash
python -m pip install --upgrade pip
```

--------------------------------

### Database Setup - Bash

Source: https://github.com/taizhixuan/commumap/blob/main/Working_Software_Prototype_Installation_Guide.md

Command to apply database migrations. This sets up the database schema and includes sample data for testing.

```bash
# Apply database migrations
python manage.py migrate
```

--------------------------------

### Create Logs Directory

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Creates a 'logs' directory in the project root. This directory is used for storing application logs. This command should be run in the project's root directory.

```bash
mkdir logs
```

--------------------------------

### Verify Python Version

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Checks the installed Python version. The CommuMap project requires Python 3.8 or higher.

```bash
python --version
```

--------------------------------

### Create and Activate Virtual Environment (Windows Command Prompt)

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Creates a Python virtual environment named '.venv' and activates it using a script. This isolates project dependencies. Requires Python 3.8+.

```bash
.venv\Scripts\activate
```

--------------------------------

### Apply Database Migrations

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Applies any pending database migrations to set up or update the database schema. This command is executed using the Django management script.

```bash
python manage.py migrate
```

--------------------------------

### Create and Activate Virtual Environment (Bash/Zsh)

Source: https://github.com/taizhixuan/commumap/blob/main/TEAM_SETUP.md

Creates a Python virtual environment named '.venv' and activates it using the 'source' command. This isolates project dependencies. Requires Python 3.8+.

```bash
# Create virtual environment
python -m venv .venv

# Activate it
source .venv/bin/activate
```

--------------------------------

### JavaScript: MFA and Modal Management

Source: https://github.com/taizhixuan/commumap/blob/main/templates/managers/profile.html

This snippet includes functions to set up MFA, close modals, and confirm account deactivation. `setupMFA` enables the MFA interface and closes the setup modal. `closePasswordModal` and `closeMFAModal` hide respective modals. `confirmDeactivation` prompts the user before initiating account deactivation.

```javascript
function setupMFA() {
  const toggle = document.getElementById('mfa-toggle');
  const card = document.getElementById('mfa-card');
  toggle.classList.add('active');
  card.classList.remove('disabled');
  card.classList.add('enabled');
  closeMFAModal();
  showNotification('🔐 Two-Factor Authentication enabled successfully!', 'success');
}

function closePasswordModal() {
  document.getElementById('password-modal').classList.add('hidden');
}

function closeMFAModal() {
  document.getElementById('mfa-modal').classList.add('hidden');
  // Reset toggle if user cancels
  const toggle = document.getElementById('mfa-toggle');
  if (!toggle.classList.contains('active')) {
    toggle.classList.remove('active');
  }
}

function confirmDeactivation() {
  if (confirm('⚠️ Are you sure you want to deactivate your account? This will hide all your services from public view.')) {
    showNotification('⏸️ Account deactivation initiated', 'warning');
  }
}
```

--------------------------------

### Set Up Virtual Environment - Bash

Source: https://github.com/taizhixuan/commumap/blob/main/Working_Software_Prototype_Installation_Guide.md

Commands to create and activate a virtual environment for the project. This isolates the project dependencies from the system Python environment.

```bash
# Create virtual environment
python -m venv .venv

# Activate virtual environment
# For Git Bash/Linux/macOS:
source .venv/bin/activate

# For Windows Command Prompt:
.venv\Scripts\activate
```

--------------------------------

### Extract Project Files - Bash

Source: https://github.com/taizhixuan/commumap/blob/main/Working_Software_Prototype_Installation_Guide.md

Command to extract the CommuMap.zip file and navigate to the project directory. This is the first step in setting up the project.

```bash
# Extract the CommuMap.zip file to your desired location
# Navigate to the extracted CommuMap directory
cd CommuMap
```

--------------------------------

### Get user geolocation

Source: https://github.com/taizhixuan/commumap/blob/main/templates/services/service_list.html

Requests the user's current location using the browser's Geolocation API and updates form fields.

```JavaScript
function getUserLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;

        document.getElementById('userLat').value = lat;
        document.getElementById('userLng').value = lng;
        showNotification('Location detected! Distance filter is now available.', 'success');

        const distanceSelect = document.querySelector('select[name="distance"]');
        if (distanceSelect.value) {
          document.getElementById('filtersForm').submit();
        }
      },
      function(error) {
        console.warn('Location access denied:', error);
        showNotification('Location access denied. Distance filter unavailable.', 'error');
      },
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 300000 }
    );
  } else {
    showNotification('Geolocation is not supported by this browser.', 'error');
  }
}
```

--------------------------------

### GET /services/

Source: https://context7.com/taizhixuan/commumap/llms.txt

Retrieves a list of community services filtered by category, status, distance, and geographic coordinates. Supports pagination and returns real-time distance calculations for each service.

```APIDOC
## GET /services/\n\n### Description\nSearch and filter community services with geographic constraints and category-based filtering.\n\n### Method\nGET\n\n### Endpoint\n/services/\n\n### Parameters\n#### Query Parameters\n- **category** (string) - Optional - Service category to filter (e.g., healthcare, shelter).\n- **status** (string) - Optional - Service status filter (e.g., open, closed).\n- **distance** (number) - Optional - Radius in kilometers for geographic filtering.\n- **lat** (float) - Required when distance is provided - Latitude of the reference point.\n- **lng** (float) - Required when distance is provided - Longitude of the reference point.\n- **page** (integer) - Optional - Page number for pagination.\n- **page_size** (integer) - Optional - Number of items per page.\n\n#### Path Parameters\n_None._\n\n#### Request Body\n_None._\n\n### Request Example\nGET /services/?category=healthcare&status=open&distance=5&lat=2.9152&lng=101.6515\n\n### Response\n#### Success Response (200)\n- **id** (integer) - Service identifier.\n- **name** (string) - Service name.\n- **calculated_distance** (float) - Distance from reference point in km.\n- **current_status** (string) - Current operational status.\n- **capacity_percentage** (float) - Current capacity usage percentage.\n- **address** (string) - Service address.\n- **city**, **state_province**, **country**, etc. (additional service details).\n\n### Response Example\n```json\n{\n  "results": [\n    {\n      "id": 12,\n      "name": "Central Community Clinic",\n      "calculated_distance": 1.2,\n      "current_status": "open",\n      "capacity_percentage": 50.0,\n      "address": "123 Main Street, Cyberjaya"\n    }\n  ],\n  "page": 1,\n  "page_size": 10,\n  "total": 42\n}\n```
```

--------------------------------

### Strategy Pattern - Python

Source: https://github.com/taizhixuan/commumap/blob/main/CodebaseSummary.md

Presents the Strategy pattern, allowing algorithms to be selected at runtime without modifying the context. The code demonstrates how to create different search strategies (e.g., geographic, category, emergency) and choose the appropriate one based on the context.

```python
SearchContext('geographic').search(queryset, user_location=point)
```

--------------------------------

### JavaScript String Extension for Template Filter

Source: https://github.com/taizhixuan/commumap/blob/main/apps/moderators/templates/moderators/outreach_detail.html

Custom JavaScript String prototype extension to add first_word method that mimics Django template filter functionality for getting the first word from a string.

```javascript
// Add template literal filter for getting first word String.prototype.first_word = function() { return this.split(' ')[0]; };
```

--------------------------------

### Smooth Scrolling for Internal Links (JavaScript)

Source: https://github.com/taizhixuan/commumap/blob/main/templates/users/dashboard.html

Implements smooth scrolling behavior for anchor links (links starting with '#') within the page. When a user clicks such a link, the page scrolls smoothly to the target element instead of jumping instantly. Dependencies: Browser API for scrolling.

```javascript
document.addEventListener('DOMContentLoaded', function() {
  // Smooth scrolling for internal links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  });
});
```

--------------------------------

### UI Event Listeners and Initialization

Source: https://github.com/taizhixuan/commumap/blob/main/templates/services/service_detail.html

Initializes the page by setting up event listeners for various UI elements. This includes handling tab clicks, like/helpful button interactions, keyboard shortcuts for navigation and closing modals, and auto-resizing textareas. It also checks URL parameters for success messages after reviews or comments are posted.

```javascript
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.tab-btn').forEach(button => {
    button.addEventListener('click', function() {
      const tabName = this.dataset.tab;
      switchTab(tabName);
    });
  });
  document.querySelectorAll('.like-btn').forEach(button => {
    button.addEventListener('click', function() {
      const type = this.dataset.type;
      const id = this.dataset.id;
      const action = this.dataset.action;
      handleLikeAction(this, type, id, action);
    });
  });
  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
      document.querySelectorAll('.reply-form').forEach(form => {
        form.classList.add('hidden');
      });
      if (document.activeElement && document.activeElement.blur) {
        document.activeElement.blur();
      }
    }
    if (event.key === '1' && event.ctrlKey) {
      event.preventDefault();
      switchTab('reviews');
    } else if (event.key === '2' && event.ctrlKey) {
      event.preventDefault();
      switchTab('comments');
    }
  });
  document.querySelectorAll('.reply-form textarea').forEach(textarea => {
    textarea.addEventListener('input', function() {
      this.style.height = 'auto';
      this.style.height = this.scrollHeight + 'px';
    });
  });
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('success') === 'review') {
    showNotification('Review posted successfully!', 'success');
    switchTab('reviews');
  } else if (urlParams.get('success') === 'comment') {
    showNotification('Comment posted successfully!', 'success');
    switchTab('comments');
  }
});
```

--------------------------------

### Animated Statistics Counter (JavaScript)

Source: https://github.com/taizhixuan/commumap/blob/main/templates/users/dashboard.html

Animates numerical statistics using a counter effect when they become visible in the viewport, observed by another Intersection Observer. It counts up to the final value with a staggered start for each number. Dependencies: Intersection Observer API, basic DOM manipulation.

```javascript
document.addEventListener('DOMContentLoaded', function() {
  // Animate stats with counter effect
  const animateStats = () => {
    const statNumbers = document.querySelectorAll('.stat-number, .welcome-stat-number');
    statNumbers.forEach((stat, index) => {
      const finalValue = parseInt(stat.textContent);
      let currentValue = 0;
      const increment = Math.max(1, Math.ceil(finalValue / 60)); // Stagger the animation start
      setTimeout(() => {
        const counter = setInterval(() => {
          currentValue += increment;
          if (currentValue >= finalValue) {
            currentValue = finalValue;
            clearInterval(counter);
          }
          stat.textContent = currentValue;
        }, 40);
      }, index * 200);
    });
  };

  // Start stats animation when they come into view
  const statsObserver = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        animateStats();
        statsObserver.unobserve(entry.target);
      }
    });
  }, { threshold: 0.3 });

  const statsSection = document.querySelector('.stats-grid');
  if (statsSection) {
    statsObserver.observe(statsSection);
  }
});
```

--------------------------------

### Initialize and Load Map Services (JavaScript)

Source: https://github.com/taizhixuan/commumap/blob/main/templates/services/service_map.html

Initializes the Leaflet map, centers it on Selangor, Malaysia, loads tile layers, retrieves the user's current location, and then loads service markers onto the map. It relies on the Leaflet library and browser geolocation API.

```javascript
let map;
let markers = [];
let userLocationMarker = null;
let userLocation = null;
let isEmergencyMode = false;
let searchTimeout;

// Services from database
const services = [
  {% for service in services %}
    {
      id: '{{ service.id }}',
      name: '{{ service.name|escapejs }}',
      category: '{{ service.category.category_type }}',
      lat: {{ service.latitude }},
      lng: {{ service.longitude }},
      status: '{{ service.current_status }}',
      capacity: { current: {{ service.current_capacity|default:0 }}, max: {{ service.max_capacity|default:0 }} },
      isEmergency: {{ service.is_emergency_service|yesno:"true,false" }},
      phone: '{{ service.phone|escapejs }}',
      address: '{{ service.address|escapejs }}',
      description: '{{ service.short_description|escapejs }}'
    }{% if not forloop.last %},{% endif %}
  {% endfor %}
];

// Initialize map
function initMap() {
  // Center on Selangor, Malaysia
  map = L.map('map').setView([3.1478, 101.6953], 11);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
  getUserLocation();
  loadServices();
}

function getUserLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        userLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        if (userLocationMarker) {
          map.removeLayer(userLocationMarker);
        }
        userLocationMarker = L.marker([userLocation.lat, userLocation.lng], {
          icon: L.divIcon({
            html: '<div style="background: #3b82f6; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.3);"><i class="fas fa-user" style="font-size: 8px;"></i></div>',
            className: 'user-location-marker',
            iconSize: [20, 20]
          })
        }).addTo(map);
        userLocationMarker.bindPopup('<b>Your Location</b>');
      },
      function(error) {
        console.log('Geolocation error:', error);
      }
    );
  }
}

function loadServices() {
  clearMarkers();
  services.forEach(service => {
    if (shouldShowService(service)) {
      addServiceMarker(service);
    }
  });
}

function shouldShowService(service) {
  if (isEmergencyMode && !service.isEmergency) {
    return false;
  }
  const activeCategories = getActiveCategories();
  if (activeCategories.length > 0 && !activeCategories.includes(service.category)) {
    return false;
  }
  const searchQuery = document.getElementById('searchInput').value.toLowerCase();
  if (searchQuery && !service.name.toLowerCase().includes(searchQuery)) {
    return false;
  }
  return true;
}

function addServiceMarker(service) {
  const icon = getServiceIcon(service);
  const marker = L.marker([service.lat, service.lng], {
    icon: L.divIcon({
      html: icon,
      className: 'service-marker',
      iconSize: [36, 36]
    })
  });
  const popupContent = createPopupContent(service);
  marker.bindPopup(popupContent, { maxWidth: 300 });
  marker.addTo(map);
  markers.push(marker);
}

function getServiceIcon(service) {
  const categoryColors = {
    healthcare: '#ef4444',
    shelter: '#10b981',
    food: '#f59e0b',
    education: '#8b5cf6',
    emergency: '#3b82f6',
    social: '#06b6d4'
  };
  const categoryIcons = {
    healthcare: 'fa-hospital',
    shelter: 'fa-home',
    food: 'fa-utensils',
    education: 'fa-book',
    emergency: 'fa-ambulance',
    social: 'fa-users'
  };
  const color = categoryColors[service.category] || '#6b7280';
  const icon = categoryIcons[service.category] || 'fa-map-marker';
  return `<div style="background: ${color}; color: white; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 3px solid white; box-shadow: 0 6px 20px rgba(0,0,0,0.4); font-size: 14px; transition: transform 0.2s ease; cursor: pointer;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
    <i class="fas ${icon}"></i>
  </div>`;
}

function createPopupContent(service) {
  const capacityPercentage = service.capacity.max > 0 ? (service.capacity.current / service.capacity.max) * 100 : 0;
  return `
    <div>
      <div style="font-weight: 600; margin-bottom: 8px;">${service.name}</div>
      <div style="background: #dcfce7; color: #166534; padding: 3px 8px; border-radius: 12px; font-size: 11px; display: inline-block; margin-bottom: 8px;">${service.status.toUpperCase()}</div>
      ${service.capacity.max > 0 ? `
        <div style="margin-bottom: 8px; font-size: 12px;"> Capacity: ${service.capacity.current}/${service.capacity.max}
          <div style="width: 100%; height: 6px; background: #e5e7eb; border-radius: 3px; margin-top: 4px;">
            <div style="height: 100%; background: #10b981; border-radius: 3px; width: ${capacityPercentage}%;"></div>
          </div>
        </div>
      ` : ''}
      <div style="font-size: 12px; color: #6b7280; margin-bottom: 8px;">${service.description}</div>
      <div style="font-size: 11px; color: #9ca3af;">${service.address}</div>
      <div style="display: flex; gap: 8px; margin-top: 10px;">
        <button onclick="viewServiceDetails('${service.id}')" style="flex: 1; padding: 6px 12px; background: #667eea; color: white; border: none; border-rad`
}

// Placeholder functions to avoid errors, actual implementation would be needed.
function clearMarkers() {
  console.log('Clearing markers...');
}

function getActiveCategories() {
  console.log('Getting active categories...');
  return [];
}

function viewServiceDetails(serviceId) {
  console.log('Viewing details for service:', serviceId);
}
```

--------------------------------

### JavaScript: Initialize Map and Load Services

Source: https://github.com/taizhixuan/commumap/blob/main/templates/services/service_map.html

Initializes the map when the DOM is loaded and handles the loading of services. It includes functions for clearing markers, toggling emergency mode, filtering services by category, debouncing search input, and performing search actions. It also provides functions to view service details and initiate phone calls.

```javascript
function clearMarkers() { markers.forEach(marker => map.removeLayer(marker)); markers = []; }

function toggleEmergencyMode() {
  const btn = document.getElementById('emergencyBtn');
  isEmergencyMode = !isEmergencyMode;
  if (isEmergencyMode) {
    btn.classList.add('active');
    btn.innerHTML = '<i class="fas fa-times"></i><span class="hidden md:inline ml-2">EXIT EMERGENCY</span>';
    btn.style.background = 'linear-gradient(135deg, #dc2626, #991b1b)';
    btn.style.animation = 'none';
  } else {
    btn.classList.remove('active');
    btn.innerHTML = '<i class="fas fa-exclamation-triangle"></i><span class="hidden md:inline ml-2">HELP ME NOW</span>';
    btn.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)';
    btn.style.animation = 'pulse 2s infinite';
  }
  loadServices();
}

function toggleCategory(element, category) {
  document.querySelectorAll('.category-chip').forEach(chip => {
    chip.classList.remove('active');
  });
  element.classList.add('active');
  loadServices();
}

function getActiveCategories() {
  const activeChips = document.querySelectorAll('.category-chip.active');
  const categories = [];
  activeChips.forEach(chip => {
    const category = chip.dataset.category;
    if (category) categories.push(category);
  });
  return categories;
}

function debounceSearch(query) {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    loadServices();
  }, 300);
}

function handleSearchKeyPress(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
    performSearch();
  }
}

function performSearch() {
  const query = document.getElementById('searchInput').value.trim();
  if (query) {
    loadServices();
  }
}

function viewServiceDetails(serviceId) {
  window.location.href = `/services/${serviceId}/`;
}

function callService(phone) {
  if (phone) {
    window.location.href = `tel:${phone}`;
  }
}

// Initialize map when page loads
document.addEventListener('DOMContentLoaded', initMap);
```

--------------------------------

### Service Directions with Geolocation Integration

Source: https://github.com/taizhixuan/commumap/blob/main/templates/services/service_detail.html

Provides directions to service locations using Google Maps. Attempts to get user's current location for optimal routing, falls back to direct search if location access is denied. Handles address validation and error cases.

```javascript
// Directions functionality
function getDirections() {
  const serviceAddress = "{{ service.address|escapejs }}";
  const serviceName = "{{ service.name|escapejs }}";
  
  if (!serviceAddress) {
    showNotification('Address not available for this service', 'error');
    return;
  }
  
  // Try to get user's current location for better directions
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        const userLat = position.coords.latitude;
        const userLng = position.coords.longitude;
        const directionsUrl = `https://www.google.com/maps/dir/${userLat},${userLng}/${encodeURIComponent(serviceAddress)}`;
        window.open(directionsUrl, '_blank');
      },
      function(error) {
        // Fallback: directions without current location
        const directionsUrl = `https://www.google.com/maps/search/${encodeURIComponent(serviceAddress)}`;
        window.open(directionsUrl, '_blank');
      }
    );
  } else {
    // Fallback: directions without current location
    const directionsUrl = `https://www.google.com/maps/search/${encodeURIComponent(serviceAddress)}`;
    window.open(directionsUrl, '_blank');
  }
}
```

--------------------------------

### User Review and Rating System (Python)

Source: https://context7.com/taizhixuan/commumap/llms.txt

This code demonstrates the creation of a service review and a vote on its helpfulness. It showcases functionality for submitting reviews with ratings, titles, content, tags, and visit dates, as well as allowing users to vote on the helpfulness of reviews and updating review counters.

```Python
from apps.feedback.models import ServiceReview, ReviewHelpfulVote
from apps.services.models import Service
from apps.core.models import User
from django.utils import timezone

# Create a service review
service = Service.objects.get(slug='central-community-clinic-cyberjaya')
user = User.objects.get(email='user@example.com')

review = ServiceReview.objects.create(
    service=service,
    user=user,
    rating=5,
    title="Excellent service and caring staff",
    content="I visited this clinic last week and received prompt attention. The staff were professional and compassionate. Wait time was reasonable even without an appointment.",
    tags=['helpful_staff', 'clean_facility', 'quick_service'],
    visit_date=timezone.now().date(),
    is_verified=False  # Requires moderator approval
)

# Vote on review helpfulness
other_user = User.objects.get(email='reader@example.com')
vote = ReviewHelpfulVote.objects.create(
    review=review,
    user=other_user,
    is_helpful=True
)

# Update review counts
review.helpful_count += 1
review.save()
```

--------------------------------

### User Form Template Snippets (Django Template)

Source: https://github.com/taizhixuan/commumap/blob/main/templates/console/user_form.html

These are snippets from a Django template for user form creation, including password setup and role-specific detail fields. They utilize Django's form rendering and conditional logic for displaying errors and help text. The password fields enforce length requirements.

```django
{# Password Setup #}
Password * {{ form.password1|add_class:"form-control" }} {% if form.password1.help_text %}

{{ form.password1.help_text }}

{% else %}

Password must be at least 8 characters long.

{% endif %} {% if form.password1.errors %} {% for error in form.password1.errors %}

{{ error }}

{% endfor %} {% endif %}

Confirm Password * {{ form.password2|add_class:"form-control" }} {% if form.password2.help_text %}

{{ form.password2.help_text }}

{% else %}

Enter the same password as before, for verification.

{% endif %} {% if form.password2.errors %} {% for error in form.password2.errors %}

{{ error }}

{% endfor %} {% endif %}

{# Role-specific Information #}
##### Service Manager Details

Service Name {{ form.service_name|add_class:"form-control" }} {% if form.service_name.errors %} {% for error in form.service_name.errors %}

{{ error }}

{% endfor %} {% endif %}

Official Email {{ form.official_email|add_class:"form-control" }} {% if form.official_email.errors %} {% for error in form.official_email.errors %}

{{ error }}

{% endfor %} {% endif %}

Contact Number {{ form.contact_number|add_class:"form-control" }} {% if form.contact_number.errors %} {% for error in form.contact_number.errors %}

{{ error }}

{% endfor %} {% endif %}

Organization {{ form.organization|add_class:"form-control" }} {% if form.organization.errors %} {% for error in form.organization.errors %}

{{ error }}

{% endfor %} {% endif %}

##### Community Moderator Details

Relevant Community {{ form.relevant_community|add_class:"form-control" }} {% if form.relevant_community.errors %} {% for error in form.relevant_community.errors %}

{{ error }}

{% endfor %} {% endif %}

Organization {{ form.organization|add_class:"form-control" }} {% if form.organization.errors %} {% for error in form.organization.errors %}

{{ error }}

{% endfor %} {% endif %}

Community Experience {{ form.community_experience|add_class:"form-control" }} {% if form.community_experience.errors %} {% for error in form.community_experience.errors %}

{{ error }}

{% endfor %} {% endif %}

[Cancel]({% url 'console:users' %}) {% if target_user %}Update User{% else %}Create User{% endif %}
```

--------------------------------

### Django Template: Pagination Controls

Source: https://github.com/taizhixuan/commumap/blob/main/templates/services/service_list.html

This snippet provides the logic for rendering pagination controls in a Django template. It handles displaying first, previous, next, and last page links, along with a range of page numbers. It also allows for preserving GET parameters like search, category, distance, status, and sort order.

```django
{% if is_paginated %}

{% if page_obj.has_previous %} [⟨⟨ First](?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.distance %}&distance={{ request.GET.distance }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %} "First Page") [‹ Previous](?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.distance %}&distance={{ request.GET.distance }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %} "Previous Page") {% endif %} {% for num in page_obj.paginator.page_range %} {% if num == page_obj.number %} {{ num }} {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %} [{{ num }}](?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.distance %}&distance={{ request.GET.distance }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}) {% elif num == 1 or num == page_obj.paginator.num_pages %} [{{ num }}](?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.distance %}&distance={{ request.GET.distance }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}) {% elif num == page_obj.number|add:'-4' or num == page_obj.number|add:'4' %} ... {% endif %} {% endfor %}

{{ page_obj.number }} of {{ page_obj.paginator.num_pages }}

{% if page_obj.has_next %} [Next ›](?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.distance %}&distance={{ request.GET.distance }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %} "Next Page") [Last ⟩⟩](?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.distance %}&distance={{ request.GET.distance }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %} "Last Page") {% endif %}

Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}

{% endif %} {% else %}
```

--------------------------------

### Generate navigation URLs using Django template tags

Source: https://github.com/taizhixuan/commumap/blob/main/templates/core/registration_success.html

Creates dynamic navigation links using Django's URL template tag. Resolves named URL patterns from the Django URL configuration. Outputs absolute paths for the login and landing pages.

```django
{% url 'core:login' %}
{% url 'core:landing' %}
```

--------------------------------

### User Actions and Service Information Display (Templating)

Source: https://github.com/taizhixuan/commumap/blob/main/templates/services/service_detail.html

This snippet handles quick actions for authenticated users, such as leaving reviews or adding comments, and displays general service information like quality score and total ratings. It also includes a section for related services.

```html
{% verbatim %}### Quick Actions

{% if user.is_authenticated %} [Leave Review]({% url 'feedback:create_review' service_id=service.id %}) [Add Comment]({% url 'feedback:create_comment' service_id=service.id %}) {% endif %} Share Service

### Service Information

{% if service.quality_score > 0 %}

{{ service.quality_score }}/5.0

{% for i in "12345" %} {% if forloop.counter <= service.quality_score %} {% else %} {% endif %} {% endfor %}

{{ service.total_ratings }} reviews

{% else %}

No ratings yet

Be the first to review

{% endif %}

* * *

Last Updated

{{ service.updated_at|timesince }} ago

Service ID

#{{ service.id|slice:":8" }}

### Related Services

[View all {{ service.category.name }}]({% url 'services:category' category_slug=service.category.slug %})
{% endverbatim %}
```

--------------------------------

### Custom Django QuerySet Methods for Service Discovery

Source: https://github.com/taizhixuan/commumap/blob/main/CodebaseSummary.md

Defines custom QuerySet methods on the Service model for advanced filtering and searching. These methods facilitate complex queries like finding active, verified, public, emergency-eligible, or open services, as well as performing proximity searches, category filtering, and text-based searches. Usage examples demonstrate chaining these methods for sophisticated data retrieval.

```python
class ServiceQuerySet(models.QuerySet):
    def active(self):
        return self.filter(is_active=True)

    def verified(self):
        return self.filter(is_verified=True)

    def public(self):
        return self.active().verified()

    def emergency_eligible(self):
        return self.filter(is_emergency_service=True)

    def open_now(self):
        # Placeholder for actual open hours logic
        return self

    def near_point(self, point, distance_km):
        # Placeholder for geospatial query
        return self

    def by_category(self, category_slug):
        return self.filter(category__slug=category_slug)

    def search(self, query):
        # Placeholder for full-text search logic
        return self


class ServiceManager(models.Manager):
    def get_queryset(self):
        return ServiceQuerySet(self.model, using=self._db)

    def public(self):
        return self.get_queryset().public()

    # ... other manager methods leveraging ServiceQuerySet


# Example Usage:
# Service.objects.public().emergency_eligible().open_now()
# Service.objects.near_point((lat, lng), 5).by_category('healthcare')

```

--------------------------------

### Template Metadata Iteration and Control Flow

Source: https://github.com/taizhixuan/commumap/blob/main/apps/moderators/templates/moderators/action_detail.html

Template loop that iterates over action metadata items and displays key-value pairs. Includes control flow tags for template structure and block definitions. Uses Jinja2/Django-style syntax for dynamic content rendering.

```jinja
{% for key, value in action.metadata.items %}

{{ key|title }}

{{ value }}

{% endfor %}

{% endif %}

{% endblock %}
```

--------------------------------

### Toggle Deactivate Button and Update Progress - JavaScript

Source: https://github.com/taizhixuan/commumap/blob/main/templates/console/user_confirm_delete.html

This snippet provides functions to enable/disable the deactivate button based on checkbox state and update a progress bar dynamically. It depends on DOM elements like 'confirmDeactivate' checkbox and 'deactivateBtn' button. Inputs are user interactions (checkbox change), outputs are UI state changes (button enable/disable and progress width). It assumes standard DOM structure and may not work without proper HTML setup; no external libraries required.

```javascript
function toggleDeactivateButton() {
  const checkbox = document.getElementById('confirmDeactivate');
  const deactivateBtn = document.getElementById('deactivateBtn');
  const step3 = document.querySelector('.step:last-child');
  deactivateBtn.disabled = !checkbox.checked;
  if (checkbox.checked) {
    step3.classList.add('active');
    updateProgress(100);
  } else {
    step3.classList.remove('active');
    updateProgress(75);
  }
}
function updateProgress(width) {
  const progressBar = document.querySelector('.progress-bar');
  progressBar.style.width = width + '%';
}
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
```

--------------------------------

### Toggle Switch Styling (CSS)

Source: https://github.com/taizhixuan/commumap/blob/main/apps/moderators/templates/moderators/outreach_form.html

Basic styling for a toggle switch component, including container, alignment, and basic appearance. Further implementation details for the switch's on/off states would typically require additional CSS and potentially JavaScript. Dependencies: Basic CSS for layout and appearance.

```CSS
.toggle-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.3s e
```

--------------------------------

### Rendering Service List with Pagination in Django Template

Source: https://github.com/taizhixuan/commumap/blob/main/templates/services/category_detail.html

This template iterates over a queryset of services for a given category, rendering each service card with name, emergency flag, status, address, phone, free status, description, quality-based star ratings, capacity, and links to details. It includes phone dial links and pagination navigation that maintains GET parameters for q (search), status, and sort filters. Dependencies include Django's template engine, Service model with fields like is_emergency_service, get_current_status_display, address, phone, is_free, description, quality_score, total_ratings, max_capacity, current_capacity, and pagination via page_obj; limitations include truncation of address (40 chars) and description (120 chars), no dynamic icon rendering beyond category icon.

```django-template
### [{{ service.name }}]({% url 'services:detail' service.pk %})

{% if service.is_emergency_service %} Emergency {% endif %}

{{ service.get_current_status_display }}

{{ service.address|truncatechars:40 }}

{% if service.phone %}

{{ service.phone }}

{% endif %} {% if service.is_free %}

Free Service

{% endif %}

{{ service.description|truncatechars:120 }}

{% if service.quality_score > 0 %}

{% for i in "12345" %} {% if forloop.counter <= service.quality_score %}  ★ {% else %} ☆ {% endif %} {% endfor %}

({{ service.total_ratings }})

{% else %} No ratings yet {% endif %}

{% if service.max_capacity > 0 %}

{{ service.current_capacity }}/{{ service.max_capacity }} capacity

{% endif %}

[View Details]({% url 'services:detail' service.pk %}) {% if user.is_authenticated %}  {% endif %} {% if service.phone %} [Call](tel:{{ service.phone }}){% endif %}

{% endfor %}

{% if is_paginated %}

{% if page_obj.has_previous %} [First](?page=1{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}) [Previous](?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}) {% endif %} Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }} {% if page_obj.has_next %} [Next](?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}) [Last](?page={{ page_obj.paginator.num_pages }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}) {% endif %}

{% endif %} {% else %}

{{ category.get_icon_display|default:"📋" }}

### No services found

{% if request.GET.q or request.GET.status %} No services match your current filters in this category. {% else %} There are currently no services available in this category. {% endif %}

{% if request.GET.q or request.GET.status or request.GET.sort %} [Clear Filters]({% url 'services:category' category_slug=category.slug %}) {% endif %} [Browse All Services]({% url 'services:list' %})

{% endif %} {% if related_categories %}
```