hw 6-7 some fixes

- Redis / Celery / Celery Beat
- кэширование популярных тегов и лучших участников
- асинхронные уведомления в Centrifugo
- отправка email-уведомлений через Celery
- полнотекстовый поиск и подсказки
- Docker Compose инфраструктура

.env.docker

@@ -0,0 +1,26 @@
+SECRET_KEY=django-insecure-n7=j$-o2$-ae1_xw5$ers@t*zvad97mwo$tjf^imow524_8#=o
+DEBUG=True
+
+POSTGRES_DB=askme
+POSTGRES_USER=askme_user
+POSTGRES_PASSWORD=askme_password
+
+DB_NAME=askme
+DB_USER=askme_user
+DB_PASSWORD=askme_password
+DB_HOST=db
+DB_PORT=5432
+DB_ENGINE="django.db.backends.postgresql"
+REDIS_HOST=redis
+REDIS_PORT=6379
+REDIS_CACHE_DB=1
+REDIS_BROKER_DB=2
+REDIS_BEAT_DB=3
+
+CENTRIFUGO_URL=http://centrifugo:8000
+CENTRIFUGO_API_KEY=centrifugo_secret
+
+EMAIL_BACKEND=django.core.mail.backends.smtp.EmailBackend
+EMAIL_HOST=maildev
+EMAIL_PORT=1025
+DEFAULT_FROM_EMAIL=webmaster@localhost

.env.example

@@ -1,2 +1,22 @@
 SECRET_KEY=django-insecure-1234
 DEBUG=True
+
+DB_NAME=vkdesk
+DB_USER=postgres
+DB_PASSWORD=1234567
+DB_HOST=localhost
+DB_PORT=5432
+DB_ENGINE="django.db.backends.postgresql"
+REDIS_HOST=localhost
+REDIS_PORT=6379
+REDIS_CACHE_DB=1
+REDIS_BROKER_DB=2
+REDIS_BEAT_DB=3
+
+CENTRIFUGO_URL=http://localhost:8001
+CENTRIFUGO_API_KEY=replace_me
+
+EMAIL_BACKEND=django.core.mail.backends.smtp.EmailBackend
+EMAIL_HOST=localhost
+EMAIL_PORT=1025
+DEFAULT_FROM_EMAIL=webmaster@localhost

Dockerfile

@@ -1,15 +1,14 @@
-FROM python:3.10-slim
+FROM python:3.12
 
 ENV PYTHONDONTWRITEBYTECODE=1
 ENV PYTHONUNBUFFERED=1
 
 WORKDIR /app
 
-COPY ./requirements.txt ./
+COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
+
+RUN pip install --upgrade pip
+
+RUN pip install -r requirements.txt
 
 COPY . .
-
-EXPOSE 8000
-
-CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

README.md

@@ -1,44 +1,66 @@
-## Добро пожаловать в мой репозиторий :)
+# 2026-VK-EDU-Web-12-Istratov-D
 
-Позже здесь будет проект-дз...
+## Запуск в Docker
 
-### О себе
+1. Скопируйте `.env.docker` в `.env` или создайте свой файл на основе `.env.example`.
+2. Запустите сервисы:
 
-Я интересуюсь **backend-разработкой**, **серверными инструментами** и **микроконтроллерами**.
+```bash
-Пишу на Java, Python и C++, начинал с написания плагинов для Minecraft и разных полезных утилит.
-
-🔧 Студент VK Education, курса "Web-разработка".
-
-
-## HW-1:
-- создан репозиторий и подкаталоги внутри
-- создана базовая структура проекта (/public/*.html, /public/static/css/style.css, /public/static/js/script.js)
-- подключена библиотека bootstrap локально (/public/static/css/bootstrap.min.css) (пока не использовалась, подключена на будущее)
-- настроены права (protected main branch + merge только через PR)
-<img width="1240" height="1086" alt="image" src="https://github.com/user-attachments/assets/e576c646-e5e6-43dc-82a3-b130f8f7583b" />
-<img width="1213" height="357" alt="image" src="https://github.com/user-attachments/assets/28d203f8-4a45-4a4b-84d2-ea4f9251bc27" />
-<img width="656" height="225" alt="image" src="https://github.com/user-attachments/assets/3f714157-1b8e-4fd0-aa14-5396735c8d60" />
-- настроен .gitignore (за основу взят шаблон для python)
-- сверстаны base.html, index.html, question.html, ask.html, login.html, signup.html, profile.html
->>>>>>> main
-
-## Запуск проекта
-
-### 1. Установка корректных .env
-
-Для отладки можно переименовать .env.example в .env
-
-### 2. На текущей машине
-```shell
-pip install --no-cache-dir -r requirements.txt
-python manage.py runserver 8000
-```
-
-### 2. Docker
-
-```shell
 docker compose up --build
 ```
 
-Запустится именно на 127.0.0.1:8000
+3. Откройте приложение: `http://127.0.0.1:8080`
+4. Centrifugo доступен на `http://127.0.0.1:8001`
+5. Maildev доступен на `http://127.0.0.1:1080`
 
+## Переменные окружения
+
+В `.env` должны быть:
+
+- `SECRET_KEY`
+- `DEBUG`
+- `POSTGRES_DB`, `POSTGRES_USER`, `POSTGRES_PASSWORD`
+- `DB_ENGINE`, `DB_NAME`, `DB_USER`, `DB_PASSWORD`, `DB_HOST`, `DB_PORT`
+- `REDIS_HOST`, `REDIS_PORT`, `REDIS_CACHE_DB`, `REDIS_BROKER_DB`, `REDIS_BEAT_DB`
+- `CENTRIFUGO_URL`, `CENTRIFUGO_API_KEY`
+- `EMAIL_BACKEND`, `EMAIL_HOST`, `EMAIL_PORT`, `DEFAULT_FROM_EMAIL`
+
+## Миграции
+
+После изменений моделей выполните:
+
+```bash
+python manage.py makemigrations
+python manage.py migrate
+```
+
+## Дополнительные конфигурации
+
+- `gunicorn_conf.py` — конфигурация Gunicorn с двумя воркерами.
+- `simple_wsgi.py` — простой WSGI-приложение для запуска без Django на `localhost:8081`.
+- `nginx.conf` — пример конфигурации Nginx для отдачи `/uploads/`, статических файлов и проксирования на Gunicorn.
+
+## Заполнить базу данных
+
+```bash
+python manage.py fill_db 10000
+```
+
+Когда запущено в докере:
+
+```bash
+docker compose exec python-app python manage.py fill_db 10000
+```
+
+Это удалит предыдущие данные из дб!
+
+## Реализовано
+
+- Redis / Celery / Celery Beat
+- кэширование популярных тегов и лучших участников
+- асинхронные уведомления в Centrifugo
+- отправка email-уведомлений через Celery
+- полнотекстовый поиск и подсказки
+- Docker Compose инфраструктура
+
+```

application/__init__.py

@@ -0,0 +1,3 @@
+from .celery import app as celery_app
+
+__all__ = ('celery_app',)

application/celery.py

@@ -0,0 +1,15 @@
+from __future__ import annotations
+import os
+from celery import Celery
+from django.conf import settings
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'application.settings')
+
+app = Celery('application')
+app.config_from_object('django.conf:settings', namespace='CELERY')
+app.autodiscover_tasks()
+
+
+@app.task(bind=True)
+def debug_task(self):
+    print(f'Request: {self.request!r}')

application/settings.py

@@ -26,7 +26,15 @@ SECRET_KEY = os.getenv("SECRET_KEY")
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = os.getenv("DEBUG") == "True"
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['127.0.0.1', 'localhost']
+LOGIN_URL = '/login/'
+
+# Allow requests coming through nginx on host:8080 (used in local Docker Compose)
+# Add any additional origins you use (including scheme and port) here.
+CSRF_TRUSTED_ORIGINS = [
+    'http://127.0.0.1:8080',
+    'http://localhost:8080',
+]
 
 
 # Application definition
@@ -38,6 +46,8 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'django.contrib.postgres',
+    'questions',
 ]
 
 MIDDLEWARE = [
@@ -67,6 +77,7 @@ TEMPLATES = [
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
+                'questions.context_processors.sidebar_data',
             ],
         },
     },
@@ -80,8 +91,12 @@ WSGI_APPLICATION = 'application.wsgi.application'
 
 DATABASES = {
     'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
+        'ENGINE': os.getenv('DB_ENGINE'),
-        'NAME': BASE_DIR / 'db.sqlite3',
+        'NAME': os.getenv('DB_NAME'),
+        'USER': os.getenv('DB_USER'),
+        'PASSWORD': os.getenv('DB_PASSWORD'),
+        'HOST': os.getenv('DB_HOST'),
+        'PORT': os.getenv('DB_PORT'),
     }
 }
 
@@ -108,7 +123,7 @@ AUTH_PASSWORD_VALIDATORS = [
 # Internationalization
 # https://docs.djangoproject.com/en/5.2/topics/i18n/
 
-LANGUAGE_CODE = 'en-us'
+LANGUAGE_CODE = 'ru-RU'
 
 TIME_ZONE = 'UTC'
 
@@ -120,7 +135,7 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/5.2/howto/static-files/
 
-STATIC_URL = 'static/'
+STATIC_URL = '/static/'
 
 STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 
@@ -128,3 +143,54 @@ STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+
+MEDIA_URL = '/media/'
+MEDIA_ROOT = BASE_DIR / 'media'
+
+# Redis / Celery / Cache settings
+REDIS_HOST = os.getenv('REDIS_HOST', 'redis')
+REDIS_PORT = os.getenv('REDIS_PORT', '6379')
+REDIS_CACHE_DB = os.getenv('REDIS_CACHE_DB', '1')
+REDIS_BROKER_DB = os.getenv('REDIS_BROKER_DB', '2')
+REDIS_BEAT_DB = os.getenv('REDIS_BEAT_DB', '3')
+
+CACHES = {
+    "default": {
+        "BACKEND": "django_redis.cache.RedisCache",
+        "LOCATION": f"redis://{REDIS_HOST}:{REDIS_PORT}/{REDIS_CACHE_DB}",
+        "OPTIONS": {"CLIENT_CLASS": "django_redis.client.DefaultClient"},
+        "TIMEOUT": 60 * 10,
+    }
+}
+
+# Celery settings
+CELERY_BROKER_URL = f"redis://{REDIS_HOST}:{REDIS_PORT}/{REDIS_BROKER_DB}"
+CELERY_RESULT_BACKEND = f"redis://{REDIS_HOST}:{REDIS_PORT}/{REDIS_BEAT_DB}"
+CELERY_BEAT_SCHEDULER = "redbeat.RedBeatScheduler"
+CELERY_REDBEAT_REDIS_URL = f"redis://{REDIS_HOST}:{REDIS_PORT}/{REDIS_BEAT_DB}"
+
+# Centrifugo (real-time) settings
+CENTRIFUGO_URL = os.getenv('CENTRIFUGO_URL', 'http://centrifugo:8000')
+CENTRIFUGO_API_KEY = os.getenv('CENTRIFUGO_API_KEY', 'centrifugo_secret')
+
+# Email settings (use maildev for local development)
+EMAIL_BACKEND = os.getenv('EMAIL_BACKEND', 'django.core.mail.backends.smtp.EmailBackend')
+EMAIL_HOST = os.getenv('EMAIL_HOST', 'maildev')
+EMAIL_PORT = int(os.getenv('EMAIL_PORT', '1025'))
+EMAIL_USE_TLS = os.getenv('EMAIL_USE_TLS', 'False') == 'True'
+DEFAULT_FROM_EMAIL = os.getenv('DEFAULT_FROM_EMAIL', 'webmaster@localhost')
+
+# Celery beat schedule (periodic tasks)
+from celery.schedules import crontab
+
+CELERY_BEAT_SCHEDULE = {
+    'rebuild_popular_tags': {
+        'task': 'questions.tasks.rebuild_popular_tags',
+        'schedule': crontab(minute='*/30'),
+    },
+    'rebuild_best_members': {
+        'task': 'questions.tasks.rebuild_best_members',
+        'schedule': crontab(minute='*/15'),
+    },
+}

centrifugo/config.json

@@ -0,0 +1,10 @@
+{
+  "secret": "centrifugo_secret",
+  "namespaces": [
+    {
+      "name": "public",
+      "anonymous": true
+    }
+  ],
+  "allowed_origins": ["*"]
+}

docker-compose.yml

@@ -1,11 +1,122 @@
-version: '3.8'
-
 services:
+  db:
+    image: postgres:16
+    container_name: postgres-container
+    restart: always
+    env_file:
+      - .env
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB}
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    networks:
+      - django-network
+
   python-app:
     build: .
     container_name: django-app-container
-    ports:
+    restart: always
-      - "8000:8000"
+    working_dir: /app
     volumes:
       - .:/app
-    working_dir: /app
+      - ./media:/app/media
+    env_file:
+      - .env
+    depends_on:
+      - db
+      - redis
+      - maildev
+    command: >
+      sh -c "
+      python manage.py migrate --noinput &&
+      python manage.py collectstatic --noinput &&
+      gunicorn application.wsgi:application --config gunicorn_conf.py
+      "
+    networks:
+      - django-network
+
+  redis:
+    image: redis:7
+    container_name: redis-container
+    restart: always
+    volumes:
+      - redis_data:/data
+    ports:
+      - "6379:6379"
+    networks:
+      - django-network
+
+  celery:
+    build: .
+    container_name: celery-worker
+    command: celery -A application worker --loglevel=info
+    volumes:
+      - .:/app
+    env_file:
+      - .env
+    depends_on:
+      - redis
+      - db
+    networks:
+      - django-network
+
+  celery-beat:
+    build: .
+    container_name: celery-beat
+    command: celery -A application beat --loglevel=info -S redbeat.RedBeatScheduler
+    volumes:
+      - .:/app
+    env_file:
+      - .env
+    depends_on:
+      - redis
+      - db
+    networks:
+      - django-network
+
+  centrifugo:
+    image: centrifugo/centrifugo:latest
+    container_name: centrifugo
+    restart: always
+    command: centrifugo --config=/centrifugo/config.json
+    volumes:
+      - ./centrifugo:/centrifugo:ro
+    ports:
+      - "8001:8000"
+    networks:
+      - django-network
+
+  maildev:
+    image: maildev/maildev:latest
+    container_name: maildev
+    restart: always
+    ports:
+      - "1080:1080"
+      - "1025:1025"
+    networks:
+      - django-network
+
+  nginx:
+    image: nginx:latest
+    container_name: nginx-container
+    restart: always
+    ports:
+      - "8080:80"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./static:/var/www/ask_pupkin/static:ro
+      - ./media:/var/www/ask_pupkin/uploads:ro
+    depends_on:
+      - python-app
+    networks:
+      - django-network
+
+volumes:
+  redis_data:
+  postgres_data:
+  media_data:
+
+networks:
+  django-network:

gunicorn_conf.py

@@ -0,0 +1,8 @@
+bind = '0.0.0.0:8000'
+workers = 2
+worker_class = 'sync'
+threads = 2
+timeout = 120
+loglevel = 'info'
+accesslog = '-'
+errorlog = '-'

nginx.conf

@@ -0,0 +1,45 @@
+worker_processes auto;
+events { worker_connections 1024; }
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    gzip            on;
+    gzip_types      text/plain text/css application/javascript application/json image/svg+xml;
+
+    proxy_cache_path /tmp/nginx-cache levels=1:2 keys_zone=django:10m max_size=100m inactive=60m;
+
+    upstream django {
+        server python-app:8000;
+    }
+
+    server {
+        listen 80;
+        server_name localhost;
+
+        location /static/ {
+            alias /var/www/ask_pupkin/static/;
+            access_log off;
+            expires 30d;
+            add_header Cache-Control "public, max-age=2592000";
+        }
+
+        location /media/ {
+            alias /var/www/ask_pupkin/uploads/;
+            access_log off;
+            expires 7d;
+            add_header Cache-Control "public, max-age=604800";
+        }
+
+        location / {
+            proxy_pass http://django;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_cache django;
+            proxy_cache_bypass $http_cache_control;
+            add_header X-Proxy-Cache $upstream_cache_status;
+        }
+    }
+}

questions/context_processors.py

@@ -0,0 +1,55 @@
+from datetime import timedelta
+from django.utils import timezone
+from django.core.cache import cache
+from django.contrib.auth.models import User
+from django.db.models import Count, Q
+
+from .models import Tag
+
+
+def sidebar_data(request):
+    popular_tags = cache.get('popular_tags')
+    best_members = cache.get('best_members')
+
+    if popular_tags is None:
+        three_months_ago = timezone.now() - timedelta(days=90)
+        popular_qs = Tag.objects.annotate(
+            q_count=Count('question', filter=Q(question__created_at__gte=three_months_ago))
+        ).order_by('-q_count')[:10]
+        popular_tags = [
+            {'name': tag.name, 'count': tag.q_count}
+            for tag in popular_qs
+        ]
+        cache.set('popular_tags', popular_tags, timeout=60 * 60)
+
+    if best_members is None:
+        week_ago = timezone.now() - timedelta(days=7)
+        users_q = User.objects.annotate(
+            q_count=Count('question', filter=Q(question__created_at__gte=week_ago))
+        )
+        users_a = User.objects.annotate(
+            a_count=Count('answer', filter=Q(answer__created_at__gte=week_ago)))
+
+        scores = {}
+        for u in users_q:
+            scores[u.id] = scores.get(u.id, 0) + (u.q_count or 0)
+        for u in users_a:
+            scores[u.id] = scores.get(u.id, 0) + (u.a_count or 0)
+
+        best_members_list = User.objects.filter(id__in=list(scores.keys()))
+        best_members = [
+            {
+                'id': u.id,
+                'username': u.username,
+                'score': scores.get(u.id, 0)
+            }
+            for u in best_members_list
+        ]
+        best_members.sort(key=lambda x: x['score'], reverse=True)
+        best_members = best_members[:10]
+        cache.set('best_members', best_members, timeout=60 * 60)
+
+    return {
+        'popular_tags': popular_tags,
+        'best_members': best_members,
+    }

questions/forms.py

@@ -0,0 +1,173 @@
+from django import forms
+from django.contrib.auth import authenticate
+from django.contrib.auth.models import User
+from django.contrib.auth.password_validation import validate_password
+from django.core.exceptions import ValidationError
+
+import os
+
+from .models import Question, Tag
+from .models import Profile
+from .models import Answer
+
+def validate_avatar(image):
+    max_size = 2 * 1024 * 1024
+
+    if image.size > max_size:
+        raise ValidationError("Image too large (max 2MB)")
+
+    ext = os.path.splitext(image.name)[1].lower()
+
+    allowed_extensions = ['.jpg', '.jpeg', '.png', '.webp', '.ico']
+
+    if ext not in allowed_extensions:
+        raise ValidationError("Unsupported file extension")
+
+class LoginForm(forms.Form):
+    username = forms.CharField(max_length=150)
+    password = forms.CharField(widget=forms.PasswordInput)
+
+    def clean(self):
+        cleaned_data = super().clean()
+
+        username = cleaned_data.get('username')
+        password = cleaned_data.get('password')
+
+        user = authenticate(username=username, password=password)
+
+        if not user:
+            raise ValidationError("Wrong login or password")
+
+        cleaned_data['user'] = user
+        return cleaned_data
+
+
+class SignupForm(forms.Form):
+    username = forms.CharField(max_length=150)
+    email = forms.EmailField()
+    nickname = forms.CharField(max_length=100)
+
+    password = forms.CharField(widget=forms.PasswordInput)
+    password_repeat = forms.CharField(widget=forms.PasswordInput)
+
+    avatar = forms.ImageField(
+        required=False,
+        validators=[validate_avatar]
+    )
+
+    def clean_username(self):
+        username = self.cleaned_data['username']
+        if User.objects.filter(username=username).exists():
+            raise ValidationError("Username already exists")
+        return username
+
+    def clean_email(self):
+        email = self.cleaned_data['email']
+        if Profile.objects.filter(email=email).exists():
+            raise ValidationError("Email already registered")
+        return email
+
+    def clean(self):
+        cleaned_data = super().clean()
+
+        p1 = cleaned_data.get('password')
+        p2 = cleaned_data.get('password_repeat')
+
+        if p1 != p2:
+            raise ValidationError("Passwords do not match")
+
+        validate_password(p1)
+
+        return cleaned_data
+
+    def save(self):
+        user = User.objects.create_user(
+            username=self.cleaned_data['username'],
+            password=self.cleaned_data['password']
+        )
+
+        Profile.objects.create(
+            user=user,
+            email=self.cleaned_data['email'],
+            nickname=self.cleaned_data['nickname'],
+            avatar=self.cleaned_data.get('avatar')
+        )
+
+        return user
+
+
+class ProfileForm(forms.Form):
+    email = forms.EmailField()
+    nickname = forms.CharField(max_length=100)
+    avatar = forms.ImageField(
+        required=False,
+        validators=[validate_avatar]
+    )
+
+    def __init__(self, *args, user=None, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.user = user
+
+        if user:
+            self.fields['email'].initial = user.profile.email
+            self.fields['nickname'].initial = user.profile.nickname
+
+    def clean_email(self):
+        email = self.cleaned_data['email']
+
+        if Profile.objects.filter(email=email).exclude(user=self.user).exists():
+            raise ValidationError("Email already used")
+
+        return email
+
+    def save(self):
+        profile = self.user.profile
+
+        profile.email = self.cleaned_data['email']
+        profile.nickname = self.cleaned_data['nickname']
+
+        if self.cleaned_data.get('avatar'):
+            profile.avatar = self.cleaned_data['avatar']
+
+        profile.save()
+
+class AskForm(forms.ModelForm):
+    tags = forms.CharField()
+
+    class Meta:
+        model = Question
+        fields = ['title', 'body']
+
+    def clean_tags(self):
+        tags = self.cleaned_data['tags'].split(',')
+        tags = [t.strip() for t in tags if t.strip()]
+
+        if not tags:
+            raise ValidationError("Add at least one tag")
+
+        return tags
+
+    def save(self, user):
+        question = super().save(commit=False)
+        question.user = user
+        question.save()
+
+        tags = self.cleaned_data['tags']
+
+        for tag_name in tags:
+            tag, _ = Tag.objects.get_or_create(name=tag_name)
+            question.tags.add(tag)
+
+        return question
+
+class AnswerForm(forms.ModelForm):
+    class Meta:
+        model = Answer
+        fields = ['body']
+
+    def save(self, user, question):
+        answer = super().save(commit=False)
+        answer.user = user
+        answer.question = question
+        answer.save()
+        return answer

questions/management/commands/fill_db.py

@@ -0,0 +1,189 @@
+import random
+
+from django.core.management.base import BaseCommand
+from django.contrib.auth.models import User
+from faker import Faker
+
+from questions.models import (
+    Question,
+    Answer,
+    Tag,
+    Profile,
+    QuestionReaction,
+)
+
+fake = Faker()
+
+
+class Command(BaseCommand):
+    help = 'Fill database with test data'
+
+    def add_arguments(self, parser):
+        parser.add_argument('ratio', type=int)
+
+    def handle(self, *args, **options):
+        ratio = options['ratio']
+
+        self.stdout.write(
+            self.style.SUCCESS(f'Start filling DB with ratio={ratio}')
+        )
+
+        self.clear_db()
+
+        users = self.create_users(ratio)
+        tags = self.create_tags(ratio)
+        questions = self.create_questions(ratio, users, tags)
+
+        self.create_answers(ratio, users, questions)
+        self.create_reactions(ratio, users, questions)
+
+        self.stdout.write(self.style.SUCCESS('DONE'))
+
+    def clear_db(self):
+        QuestionReaction.objects.all().delete()
+        Answer.objects.all().delete()
+        Question.objects.all().delete()
+        Profile.objects.all().delete()
+        Tag.objects.all().delete()
+
+        # если нужен superuser — можно удалить эту строку
+        User.objects.filter(is_superuser=False).delete()
+
+    def create_users(self, ratio):
+        fake.unique.clear()
+
+        users = []
+
+        for i in range(ratio):
+            users.append(
+                User(
+                    username=f'user_{i}_{fake.user_name()}',
+                    email=fake.unique.email(),
+                )
+            )
+
+        User.objects.bulk_create(users, batch_size=1000)
+
+        users = list(User.objects.all())
+
+        profiles = [
+            Profile(
+                user=user,
+                email=user.email,
+                nickname=fake.user_name(),
+            )
+            for user in users
+        ]
+
+        Profile.objects.bulk_create(profiles, batch_size=1000)
+
+        self.stdout.write(self.style.SUCCESS('Users created'))
+
+        return users
+
+    def create_tags(self, ratio):
+        fake.unique.clear()
+
+        tag_count = max(20, ratio // 100)
+
+        tags = [
+            Tag(name=fake.unique.word())
+            for _ in range(tag_count)
+        ]
+
+        Tag.objects.bulk_create(tags, batch_size=1000)
+
+        tags = list(Tag.objects.all())
+
+        self.stdout.write(self.style.SUCCESS('Tags created'))
+
+        return tags
+
+    def create_questions(self, ratio, users, tags):
+        questions = [
+            Question(
+                title=fake.sentence()[:50],
+                body=fake.text(max_nb_chars=500),
+                user=random.choice(users),
+                rating=random.randint(0, 100),
+            )
+            for _ in range(ratio)
+        ]
+
+        Question.objects.bulk_create(questions, batch_size=1000)
+
+        questions = list(Question.objects.all())
+
+        # BULK CREATE ДЛЯ MANY-TO-MANY
+        through_model = Question.tags.through
+        relations = []
+
+        for question in questions:
+            selected_tags = random.sample(
+                tags,
+                k=min(3, len(tags))
+            )
+
+            for tag in selected_tags:
+                relations.append(
+                    through_model(
+                        question_id=question.id,
+                        tag_id=tag.id,
+                    )
+                )
+
+        through_model.objects.bulk_create(
+            relations,
+            batch_size=1000
+        )
+
+        self.stdout.write(self.style.SUCCESS('Questions created'))
+
+        return questions
+
+    def create_answers(self, ratio, users, questions):
+        answers = [
+            Answer(
+                question=random.choice(questions),
+                user=random.choice(users),
+                body=fake.text(max_nb_chars=300),
+                rating=random.randint(0, 50),
+            )
+            for _ in range(ratio)
+        ]
+
+        Answer.objects.bulk_create(answers, batch_size=1000)
+
+        self.stdout.write(self.style.SUCCESS('Answers created'))
+
+    def create_reactions(self, ratio, users, questions):
+        reactions = []
+        used_pairs = set()
+
+        target = ratio
+
+        while len(reactions) < target:
+            user = random.choice(users)
+            question = random.choice(questions)
+
+            pair = (user.id, question.id)
+
+            if pair in used_pairs:
+                continue
+
+            used_pairs.add(pair)
+
+            reactions.append(
+                QuestionReaction(
+                    question=question,
+                    user=user,
+                    positive=random.choice([True, False]),
+                )
+            )
+
+        QuestionReaction.objects.bulk_create(
+            reactions,
+            batch_size=1000
+        )
+
+        self.stdout.write(self.style.SUCCESS('Reactions created'))

questions/migrations/0001_initial.py

@@ -0,0 +1,68 @@
+# Generated by Django 5.2.12 on 2026-04-27 17:22
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Tag',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=50, unique=True)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Profile',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('avatar', models.ImageField(blank=True, null=True, upload_to='avatars/')),
+                ('email', models.EmailField(max_length=254, unique=True)),
+                ('nickname', models.CharField(max_length=100)),
+                ('user', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Question',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=50)),
+                ('body', models.TextField()),
+                ('rating', models.IntegerField(default=0)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+                ('tags', models.ManyToManyField(to='questions.tag')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Answer',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('body', models.TextField()),
+                ('rating', models.IntegerField(default=0)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+                ('question', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='answers', to='questions.question')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='QuestionReaction',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('positive', models.BooleanField(default=True)),
+                ('question', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='reactions', to='questions.question')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'unique_together': {('question', 'user')},
+            },
+        ),
+    ]

questions/migrations/0002_alter_profile_avatar_answerreaction.py

@@ -0,0 +1,34 @@
+# Generated by Django 5.2.12 on 2026-05-08 21:19
+
+import django.db.models.deletion
+import questions.models
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('questions', '0001_initial'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='profile',
+            name='avatar',
+            field=models.ImageField(blank=True, null=True, upload_to=questions.models.avatar_upload_path),
+        ),
+        migrations.CreateModel(
+            name='AnswerReaction',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('positive', models.BooleanField(default=True)),
+                ('answer', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='reactions', to='questions.answer')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'unique_together': {('answer', 'user')},
+            },
+        ),
+    ]

questions/migrations/0003_question_correct_answer.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.2.12 on 2026-05-10 13:57
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('questions', '0002_alter_profile_avatar_answerreaction'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='question',
+            name='correct_answer',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='correct_for', to='questions.answer'),
+        ),
+    ]

questions/migrations/0004_answer_created_at_and_search_index.py

@@ -0,0 +1,18 @@
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('questions', '0003_question_correct_answer'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='answer',
+            name='created_at',
+            field=models.DateTimeField(auto_now_add=True, default=django.utils.timezone.now),
+            preserve_default=False,
+        ),
+    ]

questions/models.py

@@ -1,3 +1,168 @@
 from django.db import models
+from django.contrib.auth.models import User
+from django.contrib.postgres.indexes import GinIndex
+from django.contrib.postgres.search import SearchVector
 
-# Create your models here.
+import uuid
+import os
+
+from .utils import crop_square
+
+
+def avatar_upload_path(instance, filename):
+
+    ext = filename.split('.')[-1]
+
+    filename = f"{uuid.uuid4()}.{ext}"
+
+    return os.path.join('avatars', filename)
+
+
+class Profile(models.Model):
+
+    user = models.OneToOneField(
+        User,
+        on_delete=models.CASCADE
+    )
+
+    avatar = models.ImageField(
+        upload_to=avatar_upload_path,
+        null=True,
+        blank=True
+    )
+
+    email = models.EmailField(unique=True)
+
+    nickname = models.CharField(max_length=100)
+
+    def __str__(self):
+        return self.user.username
+
+    def save(self, *args, **kwargs):
+
+        super().save(*args, **kwargs)
+
+        if self.avatar:
+            crop_square(self.avatar.path)
+
+
+class Tag(models.Model):
+
+    name = models.CharField(
+        max_length=50,
+        unique=True
+    )
+
+    def __str__(self):
+        return self.name
+
+
+class Question(models.Model):
+
+    title = models.CharField(max_length=50)
+
+    user = models.ForeignKey(
+        User,
+        on_delete=models.CASCADE
+    )
+
+    body = models.TextField()
+
+    rating = models.IntegerField(default=0)
+
+    tags = models.ManyToManyField(Tag)
+
+    created_at = models.DateTimeField(
+        auto_now_add=True
+    )
+
+    correct_answer = models.ForeignKey(
+        'Answer',
+        on_delete=models.SET_NULL,
+        null=True,
+        blank=True,
+        related_name='correct_for'
+    )
+
+    def __str__(self):
+        return self.title
+
+    class Meta:
+        indexes = [
+            GinIndex(SearchVector('title', 'body'), name='question_search_idx')
+        ]
+
+
+class QuestionReaction(models.Model):
+
+    question = models.ForeignKey(
+        Question,
+        on_delete=models.CASCADE,
+        related_name='reactions'
+    )
+
+    user = models.ForeignKey(
+        User,
+        on_delete=models.CASCADE
+    )
+
+    positive = models.BooleanField(default=True)
+
+    class Meta:
+        unique_together = ('question', 'user')
+
+    def __str__(self):
+
+        return (
+            "Reaction for "
+            + self.question.title
+            + " by "
+            + self.user.username
+        )
+
+
+class Answer(models.Model):
+
+    question = models.ForeignKey(
+        Question,
+        on_delete=models.CASCADE,
+        related_name='answers'
+    )
+
+    user = models.ForeignKey(
+        User,
+        on_delete=models.CASCADE
+    )
+
+    body = models.TextField()
+
+    rating = models.IntegerField(default=0)
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+
+        return (
+            "Answer for "
+            + self.question.title
+            + " by "
+            + self.user.username
+        )
+
+
+class AnswerReaction(models.Model):
+
+    answer = models.ForeignKey(
+        Answer,
+        on_delete=models.CASCADE,
+        related_name='reactions'
+    )
+
+    user = models.ForeignKey(
+        User,
+        on_delete=models.CASCADE
+    )
+
+    positive = models.BooleanField(default=True)
+
+    class Meta:
+        unique_together = ('answer', 'user')

questions/static/core/css/style.css

@@ -58,6 +58,7 @@ a:hover {
     gap: 0.6rem;
     flex: 1;
     min-width: 40%;
+    position: relative;
 }
 
 .search input {
@@ -204,6 +205,10 @@ a:hover {
     box-shadow: 0.25rem 0.25rem 0 rgba(31, 45, 58, 0.08);
 }
 
+.not-underlined {
+  text-decoration: none;
+}
+
 .sidebar h2 {
     margin: 0 0 0.5rem;
     font-size: 1.25rem;
@@ -214,6 +219,44 @@ a:hover {
     margin-bottom: 1.5rem;
 }
 
+.search-suggestions {
+    position: absolute;
+    top: calc(100% + 0.4rem);
+    left: 0;
+    right: 0;
+    background: #ffffff;
+    border: 1px solid #1f2d3a;
+    border-radius: 0.5rem;
+    width: 100%;
+    box-sizing: border-box;
+    max-height: 18rem;
+    overflow: auto;
+    display: none;
+    z-index: 100;
+}
+
+.search-suggestion {
+    display: block;
+    padding: 0.6rem 0.9rem;
+    color: #1f2d3a;
+    text-decoration: none;
+    border-bottom: 1px solid #e8f0f7;
+}
+
+.search-suggestion:hover {
+    background: #f0f7ff;
+}
+
+.best-members {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.best-members li {
+    margin-bottom: 0.5rem;
+}
+
 .tag-cloud {
     display: flex;
     flex-wrap: wrap;
@@ -307,6 +350,21 @@ a:hover {
     margin-top: 0.4rem;
 }
 
+.current-tag {
+    display: inline-block;
+    border: 0.125rem solid #1f2d3a;
+    background: #f2f7f7;
+    padding: 0.25rem 0.6rem;
+    margin-bottom: 0.6rem;
+    font-size: 0.85rem;
+    box-shadow: 0.2rem 0.2rem 0 rgba(31, 45, 58, 0.08);
+}
+
+.current-tag span {
+    color: #1d57d4;
+    font-weight: 700;
+}
+
 .footer {
     border-top: 0.125rem solid #1f2d3a;
     padding: 0.6rem 1.1rem;

questions/static/core/js/script.js

@@ -0,0 +1,193 @@
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let cookie of cookies) {
+            cookie = cookie.trim();
+            if (cookie.startsWith(name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+const csrftoken = getCookie('csrftoken');
+const searchInput = document.getElementById('search-input');
+const searchSuggestions = document.getElementById('search-suggestions');
+let searchTimeout = null;
+
+function setSearchSuggestions(results) {
+    if (!searchSuggestions) return;
+    if (!results.length) {
+        searchSuggestions.innerHTML = '';
+        searchSuggestions.style.display = 'none';
+        return;
+    }
+    searchSuggestions.innerHTML = results.map(item => `
+        <a class="search-suggestion" href="${item.url}">${item.title}</a>
+    `).join('');
+    searchSuggestions.style.display = 'block';
+}
+
+if (searchInput) {
+    searchInput.addEventListener('input', function () {
+        const query = this.value.trim();
+        clearTimeout(searchTimeout);
+        if (!query) {
+            setSearchSuggestions([]);
+            return;
+        }
+        searchTimeout = setTimeout(function () {
+            fetch(`/search?q=${encodeURIComponent(query)}`)
+                .then(response => response.json())
+                .then(data => {
+                    setSearchSuggestions(data.results || []);
+                })
+                .catch(() => setSearchSuggestions([]));
+        }, 250);
+    });
+    document.addEventListener('click', function (event) {
+        if (!searchSuggestions.contains(event.target) && event.target !== searchInput) {
+            searchSuggestions.style.display = 'none';
+        }
+    });
+}
+
+function askItSearch(event) {
+    event.preventDefault();
+    const query = searchInput ? searchInput.value.trim() : '';
+    if (!query) {
+        return false;
+    }
+
+    fetch(`/search?q=${encodeURIComponent(query)}`)
+        .then(response => response.json())
+        .then(data => {
+            const results = data.results || [];
+            if (results.length) {
+                window.location.href = results[0].url;
+            } else {
+                window.location.href = `/ask?q=${encodeURIComponent(query)}`;
+            }
+        })
+        .catch(() => {
+            window.location.href = `/ask?q=${encodeURIComponent(query)}`;
+        });
+
+    return false;
+}
+
+function postReaction(url, data, onSuccess) {
+    $.ajax({
+        url,
+        type: 'POST',
+        headers: {
+            'X-CSRFToken': csrftoken
+        },
+        data,
+        success: onSuccess,
+        error: function (xhr) {
+            if (xhr.responseJSON) {
+                alert(xhr.responseJSON.error);
+            } else {
+                alert('Server error');
+            }
+        }
+    });
+}
+
+$(document).on('click', '.question-like', function () {
+    const btn = $(this);
+    const questionId = btn.data('id');
+    postReaction('/ajax/question/react/', {question_id: questionId, type: 'like'}, function (response) {
+        $('#question-rating-' + questionId).text(response.rating);
+        btn.remove();
+        $('.question-dislike[data-id="' + questionId + '"]').remove();
+        $('#question-rating-' + questionId).after('<span> voted </span>');
+    });
+});
+
+$(document).on('click', '.question-dislike', function () {
+    const btn = $(this);
+    const questionId = btn.data('id');
+    postReaction('/ajax/question/react/', {question_id: questionId, type: 'dislike'}, function (response) {
+        $('#question-rating-' + questionId).text(response.rating);
+        btn.remove();
+        $('.question-like[data-id="' + questionId + '"]').remove();
+        $('#question-rating-' + questionId).after('<span> voted </span>');
+    });
+});
+
+$(document).on('click', '.answer-like', function () {
+    const btn = $(this);
+    const answerId = btn.data('id');
+    postReaction('/ajax/answer/react/', {answer_id: answerId, type: 'like'}, function (response) {
+        $('#answer-rating-' + answerId).text(response.rating);
+        btn.remove();
+        $('.answer-dislike[data-id="' + answerId + '"]').remove();
+        $('#answer-rating-' + answerId).after('<span> voted </span>');
+    });
+});
+
+$(document).on('click', '.answer-dislike', function () {
+    const btn = $(this);
+    const answerId = btn.data('id');
+    postReaction('/ajax/answer/react/', {answer_id: answerId, type: 'dislike'}, function (response) {
+        $('#answer-rating-' + answerId).text(response.rating);
+        btn.remove();
+        $('.answer-like[data-id="' + answerId + '"]').remove();
+        $('#answer-rating-' + answerId).after('<span> voted </span>');
+    });
+});
+
+$(document).on('click', '.correct-answer-btn', function () {
+    const btn = $(this);
+    postReaction('/ajax/answer/correct/', {
+        question_id: btn.data('question'),
+        answer_id: btn.data('answer')
+    }, function (response) {
+        $('.correct-label').remove();
+        $('#answer-' + response.correct_answer_id).find('.answer-controls').html(`
+            <span class="correct-label">
+                ✔ Correct
+            </span>
+        `);
+    });
+});
+
+(function () {
+    try {
+        if (window.ASK_QUESTION_ID) {
+            const host = location.hostname;
+            const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+            const centrifugoWs = protocol + '://' + host + ':8001/connection/websocket';
+
+            const centrifuge = new Centrifuge(centrifugoWs);
+            centrifuge.on('connect', function (ctx) {
+                console.log('centrifuge connected', ctx);
+            });
+
+            const channel = 'question_' + window.ASK_QUESTION_ID;
+            centrifuge.subscribe(channel, function (message) {
+                const data = message.data;
+                const answerHtml = `\n<article class="answer-card" id="answer-${data.id}">\n  <div>\n    <div class="avatar-box">avatar</div>\n    <div class="vote-box"><span id="answer-rating-${data.id}">0</span></div>\n  </div>\n  <div>\n    <p>${data.body}</p>\n    <div class="answer-controls"></div>\n  </div>\n</article>\n`;
+                const answers = document.querySelectorAll('.answer-card');
+                if (answers.length) {
+                    answers[answers.length - 1].insertAdjacentHTML('afterend', answerHtml);
+                } else {
+                    const questionArticle = document.querySelector('article.card');
+                    if (questionArticle) {
+                        questionArticle.insertAdjacentHTML('afterend', answerHtml);
+                    } else {
+                        location.reload();
+                    }
+                }
+            });
+            centrifuge.connect();
+        }
+    } catch (e) {
+        console.error('centrifuge init error', e);
+    }
+})();

questions/tasks.py

@@ -0,0 +1,94 @@
+from __future__ import annotations
+from celery import shared_task
+from django.core.cache import cache
+from django.conf import settings
+import requests
+from django.core.mail import send_mail
+from django.utils import timezone
+from datetime import timedelta
+from django.db.models import Count, Sum, Q
+from django.contrib.auth.models import User
+from .models import Tag, Question, Answer
+
+
+
+@shared_task
+def rebuild_popular_tags():
+    # compute top 10 tags by number of questions in last 3 months
+    three_months_ago = timezone.now() - timedelta(days=90)
+    popular_qs = Tag.objects.annotate(
+        q_count=Count('question', filter=Q(question__created_at__gte=three_months_ago))
+    ).order_by('-q_count')[:10]
+
+    popular = [
+        {'name': t.name, 'count': t.q_count}
+        for t in popular_qs
+    ]
+    # store in cache
+    cache.set('popular_tags', popular, timeout=60 * 60)
+    return popular
+
+
+@shared_task
+def rebuild_best_members():
+    # compute top 10 users by activity (questions created in last week + total answers)
+    week_ago = timezone.now() - timedelta(days=7)
+
+    # users with most questions in the last week (by count)
+    users_q = User.objects.annotate(
+        q_count=Count('question', filter=Q(question__created_at__gte=week_ago))
+    )
+
+    # users with most answers in the last week
+    users_a = User.objects.annotate(
+        a_count=Count('answer', filter=Q(answer__created_at__gte=week_ago))
+    )
+
+    # combine scores
+    scores = {}
+
+    for u in users_q:
+        scores[u.id] = scores.get(u.id, 0) + (u.q_count or 0)
+
+    for u in users_a:
+        scores[u.id] = scores.get(u.id, 0) + (u.a_count or 0)
+
+    # build list of users sorted by score
+    best_users = User.objects.filter(id__in=list(scores.keys()))
+    best = []
+    for u in best_users:
+        best.append({
+            'id': u.id,
+            'username': u.username,
+            'score': scores.get(u.id, 0)
+        })
+
+    best.sort(key=lambda x: x['score'], reverse=True)
+    best = best[:10]
+
+    cache.set('best_members', best, timeout=60 * 60)
+    return best
+
+
+@shared_task
+def publish_new_answer_centrifugo(question_id: int, payload: dict):
+    # Send message to centrifugo pushed via HTTP API
+    # Use Centrifugo HTTP API (v4) publish endpoint
+    api_url = settings.CENTRIFUGO_URL.rstrip('/') + '/api'
+    headers = {'Authorization': f'apikey {settings.CENTRIFUGO_API_KEY}'}
+    data = {
+        'method': 'publish',
+        'params': {
+            'channel': f'question_{question_id}',
+            'data': payload,
+        }
+    }
+    try:
+        requests.post(api_url, json=data, headers=headers, timeout=5)
+    except Exception:
+        pass
+
+
+@shared_task
+def send_new_answer_email(subject: str, message: str, recipient_list: list[str]):
+    send_mail(subject, message, settings.DEFAULT_FROM_EMAIL, recipient_list)

questions/templates/core/ask.html

@@ -6,22 +6,29 @@
 <div class="main-title">
     <h1>Ask a Question</h1>
 </div>
+<form class="form" method="post">
+    {% csrf_token %}
+
+    {{ form.non_field_errors }}
 
-<form class="form">
     <div class="form-row">
-        <label for="title">Title</label>
+        <label>Title</label>
-        <input id="title" type="text" value="How to build a moon park ?">
+        {{ form.title }}
+        {{ form.title.errors }}
     </div>
+
     <div class="form-row">
-        <label for="text">Text</label>
+        <label>Text</label>
-        <textarea id="text">Really, how ? Have no idea about it</textarea>
+        {{ form.body }}
+        {{ form.body.errors }}
     </div>
+
     <div class="form-row">
-        <label for="tags">Tags</label>
+        <label>Tags</label>
-        <input id="tags" type="text" value="moon, park, puzzle">
+        {{ form.tags }}
-    </div>
+        {{ form.tags.errors }}
-    <div>
-        <button class="button" type="button">ASK IT</button>
     </div>
+
+    <button class="button" type="submit">ASK IT</button>
 </form>
 {% endblock %}

questions/templates/core/base.html

@@ -1,140 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>VkDesk | Fresh Questions</title>
-    <meta name="description" content="VkDesk Q&A">
-    <link rel="stylesheet" href="../../static/core/css/style.css">
-</head>
-<body>
-    <header class="site-header">
-        <div class="logo">VkDesk</div>
-        <form class="search">
-            <input type="text" placeholder="Search">
-            <a class="button button--ask" href="index">ASK IT</a>
-        </form>
-        <div class="user-block">
-            <div class="avatar-box small">avatar</div>
-            <div class="user-links">
-                <div class="user-name">Dr. Pepper</div>
-                <div>
-                    <a href="profile">settings</a>
-                    <a href="login">log out</a>
-                </div>
-            </div>
-        </div>
-    </header>
-
-    <div class="content">
-        <main>
-            <div class="main-title">
-                <h1>Fresh Questions</h1>
-                <a href="#">Top Today</a>
-            </div>
-
-            <article class="card">
-                <div>
-                    <div class="avatar-box">avatar</div>
-                    <div class="vote-box">
-                        <span>5</span>
-                        <span class="vote-arrows">^<span>'</span></span>
-                    </div>
-                </div>
-                <div>
-                    <a class="question-title" href="question.html">How to build a moon park ?</a>
-                    <p>Guys, i have trouble with a moon park. Cant find the black-jack...</p>
-                    <div class="meta">
-                        <a href="question.html">answer (3)</a>
-                        <span>Tags:</span>
-                        <a class="tag" href="#">black-jack</a>
-                        <a class="tag" href="#">bender</a>
-                    </div>
-                </div>
-            </article>
-
-            <article class="card">
-                <div>
-                    <div class="avatar-box">avatar</div>
-                    <div class="vote-box">
-                        <span>5</span>
-                        <span class="vote-arrows">^<span>'</span></span>
-                    </div>
-                </div>
-                <div>
-                    <a class="question-title" href="question">How to build a moon park ?</a>
-                    <p>Guys, i have trouble with a moon park. Can't find the black-jack...</p>
-                    <div class="meta">
-                        <a href="question">answer (3)</a>
-                        <span>Tags:</span>
-                        <a class="tag" href="#">black-jack</a>
-                        <a class="tag" href="#">bender</a>
-                    </div>
-                </div>
-            </article>
-
-            <article class="card">
-                <div>
-                    <div class="avatar-box">avatar</div>
-                    <div class="vote-box">
-                        <span>5</span>
-                        <span class="vote-arrows">^<span>'</span></span>
-                    </div>
-                </div>
-                <div>
-                    <a class="question-title" href="question.html">How to build a moon park ?</a>
-                    <p>Guys, i have trouble with a moon park. Can't find the black-jack...</p>
-                    <div class="meta">
-                        <a href="question.html">answer (3)</a>
-                        <span>Tags:</span>
-                        <a class="tag" href="#">black-jack</a>
-                        <a class="tag" href="#">bender</a>
-                    </div>
-                </div>
-            </article>
-
-            <nav class="pagination">
-                <a class="page-link" href="#">1</a>
-                <a class="page-link" href="#">2</a>
-                <a class="page-link" href="#">3</a>
-                <span class="page-link">...</span>
-                <a class="page-link" href="#">53</a>
-            </nav>
-        </main>
-
-        <aside class="sidebar">
-            <div class="sidebar-section">
-                <h2>Trending Tags</h2>
-                <div class="tag-cloud">
-                    <span>perl</span>
-                    <span class="tag-red">c++</span>
-                    <span>TechnoPark</span>
-                    <span class="tag-red">RUST</span>
-                    <span class="tag-green">django</span>
-                    <span>Mail.Ru</span>
-                    <span>Java</span>
-                    <span class="tag-orange">TS</span>
-                </div>
-            </div>
-
-            <div class="sidebar-section">
-                <h2>Top Members</h2>
-                <div class="member-list">
-                    <a href="#">Mr. Freeman</a>
-                    <a href="#">Dr. House</a>
-                    <a href="#">Bender</a>
-                    <a href="#">Queen Victoria</a>
-                    <a href="#">V. Pupkin</a>
-                </div>
-            </div>
-        </aside>
-    </div>
-
-    <footer class="footer">2026</footer>
-</body>
-</html>
-
-
-
-
-
-

questions/templates/core/hot.html

@@ -0,0 +1,16 @@
+{% extends 'core/layout/base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="main-title">
+    <h1>Hot Questions</h1>
+    <a href="/">All questions</a>
+</div>
+
+{% for question in hot_questions %}
+{% include 'core/partials/question.html' %}
+{% endfor %}
+{% include 'core/partials/pagination.html' %}
+
+
+{% endblock %}

questions/templates/core/index.html

@@ -3,10 +3,15 @@
 
 {% block content %}
 <div class="main-title">
-    <h1>Fresh Questions</h1>
+    <h1>All Questions</h1>
-    <a href="#">Top Today</a>
+    <a href="/hot">Hot questions</a>
 </div>
 
+{% if tag %}
+<div class="current-tag">
+    Текущий тег: <span>#{{ tag }}</span>
+</div>
+{% endif %}
 {% for question in questions %}
 {% include 'core/partials/question.html' %}
 {% endfor %}

questions/templates/core/layout/base.html

@@ -6,22 +6,48 @@
     <title>VkDesk | Fresh Questions</title>
     <meta name="description" content="VkDesk Q&A">
     <link rel="stylesheet" href="{% static 'core/css/style.css' %}">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://unpkg.com/centrifuge@2.2.1/centrifuge.min.js"></script>
+    <script>
+        function redirectToAsk(event) {
+            event.preventDefault();
+            const searchInput = document.getElementById('search-input');
+            const query = searchInput ? searchInput.value.trim() : '';
+            const url = query ? `/ask?q=${encodeURIComponent(query)}` : '/ask';
+            window.location.href = url;
+        }
+    </script>
 </head>
 <body>
     <header class="site-header">
-        <div class="logo">VkDesk</div>
+        <a href="/" class="logo not-underlined">VkDesk</a>
-        <form class="search">
+        <form class="search" onsubmit="return false;">
-            <input type="text" placeholder="Search">
+            <input id="search-input" type="text" placeholder="Search">
-            <a class="button button--ask" href="ask">ASK IT</a>
+            <div id="search-suggestions" class="search-suggestions"></div>
+            <a class="button button--ask" href="#" onclick="return askItSearch(event)">ASK IT</a>
         </form>
         <div class="user-block">
-            <div class="avatar-box small">avatar</div>
+            <div class="avatar-box small">
-            <div class="user-links">
+                {% if request.user.profile.avatar %}
-                <a href="profile" class="user-name">Dr. Pepper</a>
+                    <img src="{{ request.user.profile.avatar.url }}" width="40">
-                <div>
+                {% else %}
-                    <a href="profile">settings</a>
+                    <img src="{% static 'core/img/profile.webp' %}" width="40">
-                    <a href="login">log out</a>
+                {% endif %}
             </div>
+            <div class="user-links">
+                {% if request.user.is_authenticated %}
+                <a href="{% url 'profile' %}" class="user-name">
+                    {{ request.user.profile.nickname }}
+                </a>
+                <div>
+                    <a href="{% url 'logout' %}">log out</a>
+                </div>
+                {% else %}
+                <div>
+                    <a href="{% url 'login' %}">log in</a>
+                    <a href="{% url 'signup' %}">sign up</a>
+                </div>
+                {% endif %}
             </div>
         </div>
     </header>
@@ -34,31 +60,24 @@
             <div class="sidebar-section">
                 <h2>Trending Tags</h2>
                 <div class="tag-cloud">
-                    <span>perl</span>
+                    {% for tag in popular_tags %}
-                    <span class="tag-red">python</span>
+                    <a href="/?tag={{ tag.name }}" class="not-underlined">{{ tag.name }}</a>
-                    <span>TechnoPark</span>
+                    {% endfor %}
-                    <span class="tag-red">MySQL</span>
-                    <span class="tag-green">django</span>
-                    <span>Mail.Ru</span>
-                    <span>Voloshin</span>
-                    <span class="tag-orange">Firefox</span>
                 </div>
             </div>
-
             <div class="sidebar-section">
-                <h2>Top Members</h2>
+                <h2>Best Members</h2>
-                <div class="member-list">
+                <ul class="best-members">
-                    <a href="#">Mr. Freeman</a>
+                    {% for member in best_members %}
-                    <a href="#">Dr. House</a>
+                    <li>{{ member.username }} ({{ member.score }})</li>
-                    <a href="#">Bender</a>
+                    {% endfor %}
-                    <a href="#">Queen Victoria</a>
+                </ul>
-                    <a href="#">V. Pupkin</a>
-                </div>
             </div>
         </aside>
     </div>
     <footer class="footer">2026</footer>
 </body>
+<script src="{% static 'core/js/script.js' %}"></script>
 </html>
 
 

questions/templates/core/login.html

@@ -8,21 +8,31 @@
     <h1>Sign In</h1>
 </div>
 
-<p class="error">Sorry, wrong password!</p>
 
-<form class="form">
+<form class="form" method="post">
+    {% csrf_token %}
+
+    {{ form.non_field_errors }}
+
     <div class="form-row">
-        <label for="login">Login</label>
+        <label>Login</label>
-        <input id="login" type="text" placeholder="Enter your login here">
+        {{ form.username }}
+        {{ form.username.errors }}
     </div>
+
     <div class="form-row">
-        <label for="password">Password</label>
+        <label>Password</label>
-        <input id="password" type="password" value="********">
+        {{ form.password }}
+        {{ form.password.errors }}
     </div>
+
+    <input type="hidden" name="next" value="{{ next }}">
+
     <div>
-        <button class="button" type="button">Sign In!</button>
+        <button class="button" type="submit">Sign In!</button>
     </div>
-    <a href="signup">create new account</a>
+
+    <a href="{% url 'signup' %}">create new account</a>
 </form>
 
 

questions/templates/core/partials/pagination.html

@@ -1,9 +1,13 @@
 <nav class="pagination">
+{% if page_obj.paginator.num_pages > 1 %}
     {% if page_obj.has_previous %}
     <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
     {% endif %}
+
     <a class="page-link" href="#">{{ page_obj.number }}</a>
+
     {% if page_obj.has_next %}
         <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
     {% endif %}
+{% endif %}
 </nav>

questions/templates/core/partials/question.html

@@ -1,20 +1,88 @@
-
 <article class="card">
+
     <div>
-        <div class="avatar-box">avatar</div>
+
+        <div class="avatar-box">
+
+            {% if question.user.profile.avatar %}
+                <img src="{{ question.user.profile.avatar.url }}" width="80">
+            {% else %}
+                avatar
+            {% endif %}
+
+        </div>
+
         <div class="vote-box">
-            <span>5</span>
+
-            <span class="vote-arrows">^</span>
+            <span
+                class="question-rating"
+                id="question-rating-{{ question.id }}"
+            >
+                {{ question.rating }}
+            </span>
+
+            {% if request.user.is_authenticated %}
+
+                {% if question.id not in user_reactions %}
+
+                    <button
+                        class="question-like"
+                        data-id="{{ question.id }}"
+                    >
+                        +
+                    </button>
+
+                    <button
+                        class="question-dislike"
+                        data-id="{{ question.id }}"
+                    >
+                        -
+                    </button>
+
+                {% else %}
+
+                    <span>voted</span>
+
+                {% endif %}
+
+            {% endif %}
+
         </div>
+
     </div>
+
     <div>
-        <p class="question-title" href="question">{{ question.title }}</p>
+
-        <p>{{ question.text }}</p>
+        <a
+            class="question-title"
+            href="/question?question_id={{ question.id }}"
+        >
+            {{ question.title }}
+        </a>
+
+        <p>{{ question.body }}</p>
+
         <div class="meta">
-            <a href="question">answer (3)</a>
+
+            <a href="/question?question_id={{ question.id }}">
+                answer
+            </a>
+
             <span>Tags:</span>
-            <a class="tag" href="#">black-jack</a>
+
-            <a class="tag" href="#">bender</a>
+            {% for tag in question.tags.all %}
+
+                <a
+                    class="tag"
+                    href="/?tag={{ tag }}"
+                >
+                    {{ tag }}
+                </a>
+
+            {% endfor %}
+
         </div>
+
     </div>
+
 </article>

questions/templates/core/profile.html

@@ -3,33 +3,40 @@
 
 {% block content %}
 <div class="main-title">
-    <h1>Profile: Dr. Pepper</h1>
+    <h1>Profile:</h1>
 </div>
 
-<form class="form">
+<form class="form" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+
+    {{ form.non_field_errors }}
+
     <div class="form-row">
-        <label for="login">Login</label>
+        <label>Email</label>
-        <input id="login" type="text" value="dr_pepper">
+        {{ form.email }}
+        {{ form.email.errors }}
     </div>
+
     <div class="form-row">
-        <label for="email">Email</label>
+        <label>Nickname</label>
-        <input id="email" type="email" value="drpepper@mail.ru">
+        {{ form.nickname }}
+        {{ form.nickname.errors }}
     </div>
+
     <div class="form-row">
-        <label for="nickname">NickName</label>
+        <label>Avatar</label>
-        <input id="nickname" type="text" value="Dr. Pepper">
+        {{ form.avatar }}
     </div>
-    <div class="form-row">
+
-        <label>Upload avatar</label>
+    <div class="avatar-preview">
-        <div class="avatar-box">avatar</div>
+        {% if request.user.profile.avatar %}
-    </div>
+            <img src="{{ request.user.profile.avatar.url }}" width="120">
-    <div class="form-row">
+        {% else %}
-        <span></span>
+            <img src="{% static 'core/img/profile.webp' %}" width="120">
-        <input type="file">
+        {% endif %}
-    </div>
-    <div>
-        <button class="button" type="button">Save</button>
     </div>
+
+    <button class="button" type="submit">Save</button>
 </form>
 
 {% endblock %}

questions/templates/core/question.html

@@ -4,63 +4,192 @@
 {% block content %}
 
 <article class="card">
+
     <div>
-        <div class="avatar-box">avatar</div>
+
+        <div class="avatar-box">
+
+            {% if question.user.profile.avatar %}
+                <img src="{{ question.user.profile.avatar.url }}" width="80">
+            {% else %}
+                avatar
+            {% endif %}
+
+        </div>
+
         <div class="vote-box">
-            <span>5</span>
+
-            <span class="vote-arrows">^<span>'</span></span>
+            <span id="question-rating-{{ question.id }}">
+                {{ question.rating }}
+            </span>
+
+            {% if request.user.is_authenticated %}
+
+                {% if not question_reaction %}
+
+                    <button
+                        class="question-like"
+                        data-id="{{ question.id }}"
+                    >
+                        +
+                    </button>
+
+                    <button
+                        class="question-dislike"
+                        data-id="{{ question.id }}"
+                    >
+                        -
+                    </button>
+
+                {% else %}
+
+                    <span>voted</span>
+
+                {% endif %}
+
+            {% endif %}
+
         </div>
+
     </div>
+
     <div>
-        <div class="question-title">How to build a moon park ?</div>
+
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
+        <div class="question-title">
+            {{ question.title }}
+        </div>
+
+        <p>{{ question.body }}</p>
+
         <div class="meta">
+
             <span>Tags:</span>
-            <a class="tag" href="#">black-jack</a>
+
-            <a class="tag" href="#">bender</a>
+            {% for tag in question.tags.all %}
+
+                <a
+                    class="tag"
+                    href="/?tag={{ tag }}"
+                >
+                    {{ tag }}
+                </a>
+
+            {% endfor %}
+
         </div>
+
     </div>
+
 </article>
 
-<article class="answer-card">
+
+{% for answer in answers %}
+
+<article
+    class="answer-card"
+    id="answer-{{ answer.id }}"
+>
+
     <div>
-        <div class="avatar-box">avatar</div>
+
+        <div class="avatar-box">
+
+            {% if answer.user.profile.avatar %}
+                <img src="{{ answer.user.profile.avatar.url }}" width="80">
+            {% else %}
+                avatar
+            {% endif %}
+
+        </div>
+
         <div class="vote-box">
-            <span>5</span>
+
-            <span class="vote-arrows">^<span>'</span></span>
+            <span id="answer-rating-{{ answer.id }}">
+                {{ answer.rating }}
+            </span>
+
+            {% if request.user.is_authenticated %}
+
+                {% if answer.id not in answer_reactions %}
+
+                    <button
+                        class="answer-like"
+                        data-id="{{ answer.id }}"
+                    >
+                        +
+                    </button>
+
+                    <button
+                        class="answer-dislike"
+                        data-id="{{ answer.id }}"
+                    >
+                        -
+                    </button>
+
+                {% else %}
+
+                    <span>voted</span>
+
+                {% endif %}
+
+            {% endif %}
+
         </div>
+
     </div>
+
     <div>
-        <p>First of all I would like to thank you for the invitation to participate in such a ... Russia is the huge territory which in many respects needs to be render habitable.</p>
+
+        <p>{{ answer.body }}</p>
+
         <div class="answer-controls">
-            <input type="checkbox" checked>
+
-            <span>Correct!</span>
+            {% if question.correct_answer_id == answer.id %}
+
+                <span class="correct-label">
+                    ✔ Correct
+                </span>
+
+            {% endif %}
+
         </div>
+
+        {% if request.user == question.user %}
+
+            <button
+                class="correct-answer-btn"
+                data-question="{{ question.id }}"
+                data-answer="{{ answer.id }}"
+            >
+                Correct
+            </button>
+
+        {% endif %}
+
     </div>
+
 </article>
 
-<article class="answer-card">
+{% endfor %}
-    <div>
+
-        <div class="avatar-box">avatar</div>
+
-        <div class="vote-box">
+<form method="post">
-            <span>3</span>
+
-            <span class="vote-arrows">^<span>'</span></span>
+    {% csrf_token %}
-        </div>
+
-    </div>
+    {{ form.body }}
-    <div>
+
-        <p>First of all I would like to thank you for the invitation to participate in such a ... Russia is the huge territory which in many respects needs to be render habitable.</p>
+    {{ form.body.errors }}
-        <div class="answer-controls">
+
-            <input type="checkbox">
+    <button type="submit">
-            <span>Correct!</span>
+        Answer
-        </div>
+    </button>
-    </div>
-</article>
 
-<form class="form">
-    <label for="answer">Enter your answer here..</label>
-    <textarea id="answer"></textarea>
-    <button class="button" type="button">Answer</button>
 </form>
 
-
 {% endblock %}
+
+<script>
+    window.ASK_QUESTION_ID = {{ question.id }};
+    window.ANSWERS_COUNT = {{ answers|length }};
+</script>

questions/templates/core/signup.html

@@ -7,38 +7,51 @@
     <h1>Create Account</h1>
 </div>
 
-<p class="error">Sorry, this email address already registered!</p>
+<form class="form" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+
+    {{ form.non_field_errors }}
 
-<form class="form">
     <div class="form-row">
-        <label for="login">Login</label>
+        <label>Login</label>
-        <input id="login" type="text" value="dr_pepper">
+        {{ form.username }}
+        {{ form.username.errors }}
     </div>
+
     <div class="form-row">
-        <label for="email">Email</label>
+        <label>Email</label>
-        <input id="email" type="email" value="drpepper@mail.ru">
+        {{ form.email }}
+        {{ form.email.errors }}
     </div>
+
     <div class="form-row">
-        <label for="nickname">NickName</label>
+        <label>NickName</label>
-        <input id="nickname" type="text" value="Dr. Pepper">
+        {{ form.nickname }}
+        {{ form.nickname.errors }}
     </div>
+
     <div class="form-row">
-        <label for="password">Password</label>
+        <label>Password</label>
-        <input id="password" type="password" value="********">
+        {{ form.password }}
+        {{ form.password.errors }}
     </div>
+
     <div class="form-row">
-        <label for="repeat">Repeat password</label>
+        <label>Repeat password</label>
-        <input id="repeat" type="password" value="********">
+        {{ form.password_repeat }}
+        {{ form.password_repeat.errors }}
     </div>
+
     <div class="form-row">
-        <label>Upload avatar</label>
+        <label>Avatar</label>
-        <input type="file">
+        {{ form.avatar }}
+        {{ form.avatar.errors }}
     </div>
+
     <div>
-        <button class="button" type="button">Register!</button>
+        <button class="button" type="submit">Register!</button>
     </div>
 </form>
-
 {% endblock %}
 
 

questions/urls.py

@@ -1,12 +1,24 @@
 from django.urls import path
+from django.conf import settings
+from django.conf.urls.static import static
 
 from questions import views
 
 urlpatterns = [
     path('', views.index, name='index'),
     path('login', views.login, name='login'),
+    path('login/', views.login),
     path('ask', views.ask, name='ask'),
     path('profile', views.profile, name='profile'),
     path('question', views.question, name='question'),
     path('signup', views.signup, name='signup'),
+    path('hot', views.hot, name='hot'),
+    path('search', views.search, name='search'),
+    path('logout', views.logout, name='logout'),
+    path('ajax/question/react/', views.question_react),
+    path('ajax/answer/react/', views.answer_react),
+    path('ajax/answer/correct/', views.mark_correct),
 ]
+
+if settings.DEBUG:
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

questions/utils.py

@@ -0,0 +1,20 @@
+from PIL import Image
+
+
+def crop_square(image_path, size=(300, 300)):
+    img = Image.open(image_path)
+
+    width, height = img.size
+
+    min_side = min(width, height)
+
+    left = (width - min_side) / 2
+    top = (height - min_side) / 2
+    right = (width + min_side) / 2
+    bottom = (height + min_side) / 2
+
+    img = img.crop((left, top, right, bottom))
+
+    img = img.resize(size)
+
+    img.save(image_path)

questions/views.py

@@ -1,38 +1,482 @@
-from django.shortcuts import render
+from django.shortcuts import render, get_object_or_404
 from django.core.paginator import Paginator
+from django.contrib.auth import login as auth_login, logout as auth_logout
+from django.shortcuts import redirect
+from django.utils.http import url_has_allowed_host_and_scheme
+from django.contrib.auth.decorators import login_required
+from django.http import JsonResponse
+from django.views.decorators.http import require_POST
+from django.contrib.postgres.search import SearchQuery, SearchRank, SearchVector
 
+from .models import (
+    Question,
+    Tag,
+    Answer,
+    QuestionReaction,
+    AnswerReaction
+)
+
+from .forms import (
+    LoginForm,
+    SignupForm,
+    ProfileForm,
+    AskForm,
+    AnswerForm
+)
+from . import tasks as tasks_module
 
-QUESTIONS = [
-    {
-        "id": i,
-        "title": f'Question number {i}',
-        "text": f'Some text {i}',
-    }
-    for i in range(10)
-]
 
 def index(request):
+
+    tag_name = request.GET.get('tag')
+
+    questions = Question.objects.all() \
+        .select_related('user') \
+        .prefetch_related('tags') \
+        .order_by('-created_at')
+
+    if tag_name:
+        questions = questions.filter(tags__name=tag_name)
+
+    paginator = Paginator(questions, 4)
+
+    page_number = request.GET.get('page', 1)
+
+    page_obj = paginator.get_page(page_number)
+
+    user_reactions = {}
+
+    if request.user.is_authenticated:
+
+        reactions = QuestionReaction.objects.filter(
+            user=request.user,
+            question__in=page_obj.object_list
+        )
+
+        user_reactions = {
+            reaction.question_id: reaction.positive
+            for reaction in reactions
+        }
+
+    hot_questions = Question.objects.order_by('-rating')[:4]
+
+    return render(request, 'core/index.html', {
+        'questions': page_obj.object_list,
+        'page_obj': page_obj,
+        'hot_questions': hot_questions,
+        'tags': Tag.objects.all(),
+        'tag': tag_name,
+        'user_reactions': user_reactions
+    })
+
+
+def hot(request):
+
+    questions = Question.objects.all() \
+        .select_related('user') \
+        .prefetch_related('tags') \
+        .order_by('-rating')
+
+    paginator = Paginator(questions, 4)
+
+    page_number = request.GET.get('page', 1)
+
+    page_obj = paginator.get_page(page_number)
+
+    user_reactions = {}
+
+    if request.user.is_authenticated:
+
+        reactions = QuestionReaction.objects.filter(
+            user=request.user,
+            question__in=page_obj.object_list
+        )
+
+        user_reactions = {
+            reaction.question_id: reaction.positive
+            for reaction in reactions
+        }
+
+    return render(request, 'core/hot.html', {
+        'questions': page_obj.object_list,
+        'page_obj': page_obj,
+        'hot_questions': questions[:4],
+        'tags': Tag.objects.all(),
+        'user_reactions': user_reactions
+    })
+
+
+def search(request):
+    query_text = request.GET.get('q', '').strip()
+
+    if not query_text:
+        return JsonResponse({'results': []})
+
+    vector = (
+        SearchVector('title', weight='A') +
+        SearchVector('body', weight='B')
+    )
+    query = SearchQuery(query_text, search_type='websearch')
+    questions = Question.objects.annotate(
+        rank=SearchRank(vector, query)
+    ).filter(rank__gt=0).order_by('-rank')[:10]
+
+    results = [
+        {
+            'id': q.id,
+            'title': q.title,
+            'url': f'/question?question_id={q.id}'
+        }
+        for q in questions
+    ]
+
+    return JsonResponse({'results': results})
+
+
+def question(request):
+
+    question_id = request.GET.get('question_id')
+
+    question = get_object_or_404(
+        Question.objects.select_related('user')
+        .prefetch_related('tags', 'answers'),
+        id=question_id
+    )
+
+    if request.method == 'POST':
+
+        if not request.user.is_authenticated:
+            return redirect(
+                f'/login?next=/question?question_id={question_id}'
+            )
+
+        form = AnswerForm(request.POST)
+
+        if form.is_valid():
+
+            answer = form.save(
+                user=request.user,
+                question=question
+            )
+
+            # trigger async notifications and cache updates
             try:
-        page_number = int(request.GET.get('page', 1))
+                payload = {
-    except ValueError:
+                    'id': answer.id,
-        page_number = 1
+                    'body': answer.body,
-    page = Paginator(QUESTIONS, 4)
+                    'user': answer.user.username
-    page_obj = page.page(page_number)
+                }
-    return render(request, 'core/index.html', context={'questions': page_obj.object_list, 'page_obj': page_obj})
+                tasks_module.publish_new_answer_centrifugo.delay(question.id, payload)
+            except Exception:
+                pass
 
+            try:
+                # send email to question author
+                recipient = []
+                if hasattr(question.user, 'profile'):
+                    recipient = [question.user.profile.email]
+                subject = f'New answer to your question: {question.title}'
+                message = f'User {answer.user.username} answered your question.\n\n{answer.body}'
+                if recipient and recipient[0]:
+                    tasks_module.send_new_answer_email.delay(subject, message, recipient)
+            except Exception:
+                pass
 
-def ask(request):
+            # optionally trigger cache rebuilds
-    return render(request, 'core/ask.html', context={'questions': QUESTIONS})
+            try:
+                tasks_module.rebuild_popular_tags.delay()
+                tasks_module.rebuild_best_members.delay()
+            except Exception:
+                pass
+
+            return redirect(
+                f'/question?question_id={question.id}#answer-{answer.id}'
+            )
+
+    else:
+
+        form = AnswerForm()
+
+    question_reaction = None
+
+    answer_reactions = {}
+
+    if request.user.is_authenticated:
+
+        question_reaction = QuestionReaction.objects.filter(
+            question=question,
+            user=request.user
+        ).first()
+
+        reactions = AnswerReaction.objects.filter(
+            user=request.user,
+            answer__question=question
+        )
+
+        answer_reactions = {
+            reaction.answer_id: reaction.positive
+            for reaction in reactions
+        }
+
+    return render(request, 'core/question.html', {
+        'question': question,
+        'answers': question.answers.all(),
+        'form': form,
+        'tags': Tag.objects.all(),
+        'question_reaction': question_reaction,
+        'answer_reactions': answer_reactions
+    })
 
 
 def login(request):
-    return render(request, 'core/login.html', context={'questions': QUESTIONS})
 
-def profile(request):
+    next_url = request.GET.get('next', '/')
-    return render(request, 'core/profile.html', context={'questions': QUESTIONS})
+
+    if request.method == 'POST':
+
+        form = LoginForm(request.POST)
+
+        if form.is_valid():
+
+            user = form.cleaned_data['user']
+
+            auth_login(request, user)
+
+            if not url_has_allowed_host_and_scheme(
+                next_url,
+                allowed_hosts={request.get_host()}
+            ):
+                next_url = '/'
+
+            return redirect(next_url)
+
+    else:
+
+        form = LoginForm()
+
+    return render(request, 'core/login.html', {
+        'form': form,
+        'next': next_url,
+        'tags': Tag.objects.all()
+    })
 
-def question(request):
-    return render(request, 'core/question.html', context={'questions': QUESTIONS})
 
 def signup(request):
-    return render(request, 'core/signup.html', context={'questions': QUESTIONS})
+
+    if request.method == 'POST':
+
+        form = SignupForm(request.POST, request.FILES)
+
+        if form.is_valid():
+
+            user = form.save()
+
+            auth_login(request, user)
+
+            return redirect('/')
+
+    else:
+
+        form = SignupForm()
+
+    return render(request, 'core/signup.html', {
+        'form': form,
+        'tags': Tag.objects.all()
+    })
+
+
+def logout(request):
+
+    auth_logout(request)
+
+    return redirect(
+        request.META.get('HTTP_REFERER', '/')
+    )
+
+
+@login_required
+def profile(request):
+
+    if request.method == 'POST':
+
+        form = ProfileForm(
+            request.POST,
+            request.FILES,
+            user=request.user
+        )
+
+        if form.is_valid():
+
+            form.save()
+
+            return redirect('profile')
+
+    else:
+
+        form = ProfileForm(user=request.user)
+
+    return render(request, 'core/profile.html', {
+        'form': form,
+        'tags': Tag.objects.all()
+    })
+
+
+@login_required
+def ask(request):
+
+    if request.method == 'POST':
+
+        form = AskForm(request.POST)
+
+        if form.is_valid():
+
+            question = form.save(user=request.user)
+
+            return redirect(
+                f'/question?question_id={question.id}'
+            )
+
+    else:
+
+        form = AskForm()
+
+    return render(request, 'core/ask.html', {
+        'form': form,
+        'tags': Tag.objects.all()
+    })
+
+
+@require_POST
+@login_required
+def question_react(request):
+
+    question_id = request.POST.get('question_id')
+
+    reaction_type = request.POST.get('type')
+
+    if reaction_type not in ['like', 'dislike']:
+
+        return JsonResponse({
+            'error': 'invalid type'
+        }, status=400)
+
+    question = get_object_or_404(
+        Question,
+        id=question_id
+    )
+
+    if QuestionReaction.objects.filter(
+        question=question,
+        user=request.user
+    ).exists():
+
+        return JsonResponse({
+            'error': 'already reacted'
+        }, status=400)
+
+    positive = reaction_type == 'like'
+
+    QuestionReaction.objects.create(
+        question=question,
+        user=request.user,
+        positive=positive
+    )
+
+    if positive:
+        question.rating += 1
+    else:
+        question.rating -= 1
+
+    question.save()
+
+    return JsonResponse({
+        'rating': question.rating
+    })
+
+
+@require_POST
+@login_required
+def answer_react(request):
+
+    answer_id = request.POST.get('answer_id')
+
+    reaction_type = request.POST.get('type')
+
+    if reaction_type not in ['like', 'dislike']:
+
+        return JsonResponse({
+            'error': 'invalid type'
+        }, status=400)
+
+    answer = get_object_or_404(
+        Answer,
+        id=answer_id
+    )
+
+    if AnswerReaction.objects.filter(
+        answer=answer,
+        user=request.user
+    ).exists():
+
+        return JsonResponse({
+            'error': 'already reacted'
+        }, status=400)
+
+    positive = reaction_type == 'like'
+
+    AnswerReaction.objects.create(
+        answer=answer,
+        user=request.user,
+        positive=positive
+    )
+
+    if positive:
+        answer.rating += 1
+    else:
+        answer.rating -= 1
+
+    answer.save()
+
+    return JsonResponse({
+        'rating': answer.rating
+    })
+
+
+@require_POST
+@login_required
+def mark_correct(request):
+
+    question_id = request.POST.get('question_id')
+
+    answer_id = request.POST.get('answer_id')
+
+    question = get_object_or_404(
+        Question,
+        id=question_id
+    )
+
+    answer = get_object_or_404(
+        Answer,
+        id=answer_id
+    )
+
+    if question.user != request.user:
+
+        return JsonResponse({
+            'error': 'forbidden'
+        }, status=403)
+
+    if answer.question != question:
+
+        return JsonResponse({
+            'error': 'wrong answer'
+        }, status=400)
+
+    question.correct_answer = answer
+
+    question.save()
+
+    return JsonResponse({
+        'success': True,
+        'correct_answer_id': answer.id
+    })

requirements.txt

@@ -1,2 +1,12 @@
 Django==5.2.12
 python-dotenv==1.2.2
+pillow==12.2.0
+psycopg2-binary==2.9.12
+
+gunicorn==21.2.0
+celery==5.3.1
+redis==4.5.5
+django-redis==6.0.0
+redbeat==0.0.1
+requests==2.31.0
+Faker

simple_wsgi.py

@@ -0,0 +1,28 @@
+def simple_app(environ, start_response):
+    method = environ.get('REQUEST_METHOD', 'GET')
+    query = environ.get('QUERY_STRING', '')
+    content_length = environ.get('CONTENT_LENGTH')
+    body = b''
+    if content_length:
+        try:
+            length = int(content_length)
+            body = environ['wsgi.input'].read(length)
+        except (ValueError, KeyError):
+            body = b''
+
+    params = []
+    if query:
+        params.append(f'GET: {query}')
+    if body:
+        params.append(f'POST: {body.decode("utf-8", errors="replace")}')
+
+    response_body = 'Received parameters:\n' + '\n'.join(params)
+    response_body = response_body.encode('utf-8')
+
+    status = '200 OK'
+    headers = [
+        ('Content-Type', 'text/plain; charset=utf-8'),
+        ('Content-Length', str(len(response_body)))
+    ]
+    start_response(status, headers)
+    return [response_body]

static/admin/css/autocomplete.css

@@ -0,0 +1,279 @@
+select.admin-autocomplete {
+    width: 20em;
+}
+
+.select2-container--admin-autocomplete.select2-container {
+    min-height: 30px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single,
+.select2-container--admin-autocomplete .select2-selection--multiple {
+    min-height: 30px;
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection,
+.select2-container--admin-autocomplete.select2-container--open .select2-selection {
+    border-color: var(--body-quiet-color);
+    min-height: 30px;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--single,
+.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--single {
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--multiple,
+.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--multiple {
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single {
+    background-color: var(--body-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
+    color: var(--body-fg);
+    line-height: 30px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__placeholder {
+    color: var(--body-quiet-color);
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow b {
+    border-color: #888 transparent transparent transparent;
+    border-style: solid;
+    border-width: 5px 4px 0 4px;
+    height: 0;
+    left: 50%;
+    margin-left: -4px;
+    margin-top: -2px;
+    position: absolute;
+    top: 50%;
+    width: 0;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__clear {
+    float: left;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+    left: 1px;
+    right: auto;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single {
+    background-color: var(--darkened-bg);
+    cursor: default;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single .select2-selection__clear {
+    display: none;
+}
+
+.select2-container--admin-autocomplete.select2-container--open .select2-selection--single .select2-selection__arrow b {
+    border-color: transparent transparent #888 transparent;
+    border-width: 0 4px 5px 4px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple {
+    background-color: var(--body-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: text;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered {
+    box-sizing: border-box;
+    list-style: none;
+    margin: 0;
+    padding: 0 10px 5px 5px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered li {
+    list-style: none;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__placeholder {
+    color: var(--body-quiet-color);
+    margin-top: 5px;
+    float: left;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin: 5px;
+    position: absolute;
+    right: 0;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice {
+    background-color: var(--darkened-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove {
+    color: var(--body-quiet-color);
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove:hover {
+    color: var(--body-fg);
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-search--inline {
+    float: right;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+    margin-left: 5px;
+    margin-right: auto;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+    margin-left: 2px;
+    margin-right: auto;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection--multiple {
+    border: solid var(--body-quiet-color) 1px;
+    outline: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--multiple {
+    background-color: var(--darkened-bg);
+    cursor: default;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection__choice__remove {
+    display: none;
+}
+
+.select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--multiple {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--multiple {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.select2-container--admin-autocomplete .select2-search--dropdown {
+    background: var(--darkened-bg);
+}
+
+.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
+    background: var(--body-bg);
+    color: var(--body-fg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.select2-container--admin-autocomplete .select2-search--inline .select2-search__field {
+    background: transparent;
+    color: var(--body-fg);
+    border: none;
+    outline: 0;
+    box-shadow: none;
+    -webkit-appearance: textfield;
+}
+
+.select2-container--admin-autocomplete .select2-results > .select2-results__options {
+    max-height: 200px;
+    overflow-y: auto;
+    color: var(--body-fg);
+    background: var(--body-bg);
+}
+
+.select2-container--admin-autocomplete .select2-results__option[role=group] {
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete .select2-results__option[aria-disabled=true] {
+    color: var(--body-quiet-color);
+}
+
+.select2-container--admin-autocomplete .select2-results__option[aria-selected=true] {
+    background-color: var(--selected-bg);
+    color: var(--body-fg);
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option {
+    padding-left: 1em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__group {
+    padding-left: 0;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -1em;
+    padding-left: 2em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -2em;
+    padding-left: 3em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -3em;
+    padding-left: 4em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -4em;
+    padding-left: 5em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -5em;
+    padding-left: 6em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
+    background-color: var(--primary);
+    color: var(--primary-fg);
+}
+
+.select2-container--admin-autocomplete .select2-results__group {
+    cursor: default;
+    display: block;
+    padding: 6px;
+}
+
+.errors .select2-selection {
+    border: 1px solid var(--error-fg);
+}

static/admin/css/changelists.css

@@ -0,0 +1,343 @@
+/* CHANGELISTS */
+
+#changelist {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+#changelist .changelist-form-container {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+#changelist table {
+    width: 100%;
+}
+
+.change-list .hiddenfields { display:none; }
+
+.change-list .filtered table {
+    border-right: none;
+}
+
+.change-list .filtered {
+    min-height: 400px;
+}
+
+.change-list .filtered .results, .change-list .filtered .paginator,
+.filtered #toolbar, .filtered div.xfull {
+    width: auto;
+}
+
+.change-list .filtered table tbody th {
+    padding-right: 1em;
+}
+
+#changelist-form .results {
+    overflow-x: auto;
+    width: 100%;
+}
+
+#changelist .toplinks {
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+#changelist .paginator {
+    color: var(--body-quiet-color);
+    border-bottom: 1px solid var(--hairline-color);
+    background: var(--body-bg);
+    overflow: hidden;
+}
+
+/* CHANGELIST TABLES */
+
+#changelist table thead th {
+    padding: 0;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+#changelist table thead th.action-checkbox-column {
+    width: 1.5em;
+    text-align: center;
+}
+
+#changelist table tbody td.action-checkbox {
+    text-align: center;
+}
+
+#changelist table tfoot {
+    color: var(--body-quiet-color);
+}
+
+/* TOOLBAR */
+
+#toolbar {
+    padding: 8px 10px;
+    margin-bottom: 15px;
+    border-top: 1px solid var(--hairline-color);
+    border-bottom: 1px solid var(--hairline-color);
+    background: var(--darkened-bg);
+    color: var(--body-quiet-color);
+}
+
+#toolbar form input {
+    border-radius: 4px;
+    font-size: 0.875rem;
+    padding: 5px;
+    color: var(--body-fg);
+}
+
+#toolbar #searchbar {
+    height: 1.1875rem;
+    border: 1px solid var(--border-color);
+    padding: 2px 5px;
+    margin: 0;
+    vertical-align: top;
+    font-size: 0.8125rem;
+    max-width: 100%;
+}
+
+#toolbar #searchbar:focus {
+    border-color: var(--body-quiet-color);
+}
+
+#toolbar form input[type="submit"] {
+    border: 1px solid var(--border-color);
+    font-size: 0.8125rem;
+    padding: 4px 8px;
+    margin: 0;
+    vertical-align: middle;
+    background: var(--body-bg);
+    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
+    cursor: pointer;
+    color: var(--body-fg);
+}
+
+#toolbar form input[type="submit"]:focus,
+#toolbar form input[type="submit"]:hover {
+    border-color: var(--body-quiet-color);
+}
+
+#changelist-search img {
+    vertical-align: middle;
+    margin-right: 4px;
+}
+
+#changelist-search .help {
+    word-break: break-word;
+}
+
+/* FILTER COLUMN */
+
+#changelist-filter {
+    flex: 0 0 240px;
+    order: 1;
+    background: var(--darkened-bg);
+    border-left: none;
+    margin: 0 0 0 30px;
+}
+
+@media (forced-colors: active) {
+  #changelist-filter {
+      border: 1px solid;
+  }
+}
+
+#changelist-filter h2 {
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 5px 15px;
+    margin-bottom: 12px;
+    border-bottom: none;
+}
+
+#changelist-filter h3,
+#changelist-filter details summary {
+    font-weight: 400;
+    padding: 0 15px;
+    margin-bottom: 10px;
+}
+
+#changelist-filter details summary > * {
+    display: inline;
+}
+
+#changelist-filter details > summary {
+    list-style-type: none;
+}
+
+#changelist-filter details > summary::-webkit-details-marker {
+    display: none;
+}
+
+#changelist-filter details > summary::before {
+    content: '→';
+    font-weight: bold;
+    color: var(--link-hover-color);
+}
+
+#changelist-filter details[open] > summary::before {
+    content: '↓';
+}
+
+#changelist-filter ul {
+    margin: 5px 0;
+    padding: 0 15px 15px;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+#changelist-filter ul:last-child {
+    border-bottom: none;
+}
+
+#changelist-filter li {
+    list-style-type: none;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+#changelist-filter a {
+    display: block;
+    color: var(--body-quiet-color);
+    word-break: break-word;
+}
+
+#changelist-filter li.selected {
+    border-left: 5px solid var(--hairline-color);
+    padding-left: 10px;
+    margin-left: -15px;
+}
+
+#changelist-filter li.selected a {
+    color: var(--link-selected-fg);
+}
+
+#changelist-filter a:focus, #changelist-filter a:hover,
+#changelist-filter li.selected a:focus,
+#changelist-filter li.selected a:hover {
+    color: var(--link-hover-color);
+}
+
+#changelist-filter #changelist-filter-extra-actions {
+    font-size: 0.8125rem;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+/* DATE DRILLDOWN */
+
+.change-list .toplinks {
+    display: flex;
+    padding-bottom: 5px;
+    flex-wrap: wrap;
+    gap: 3px 17px;
+    font-weight: bold;
+}
+
+.change-list .toplinks a {
+    font-size: 0.8125rem;
+}
+
+.change-list .toplinks .date-back {
+    color: var(--body-quiet-color);
+}
+
+.change-list .toplinks .date-back:focus,
+.change-list .toplinks .date-back:hover {
+    color: var(--link-hover-color);
+}
+
+/* ACTIONS */
+
+.filtered .actions {
+    border-right: none;
+}
+
+#changelist table input {
+    margin: 0;
+    vertical-align: baseline;
+}
+
+/* Once the :has() pseudo-class is supported by all browsers, the tr.selected
+   selector and the JS adding the class can be removed. */
+#changelist tbody tr.selected {
+    background-color: var(--selected-row);
+}
+
+#changelist tbody tr:has(.action-select:checked) {
+    background-color: var(--selected-row);
+}
+
+@media (forced-colors: active) {
+    #changelist tbody tr.selected {
+        background-color: SelectedItem;
+    }
+    #changelist tbody tr:has(.action-select:checked) {
+        background-color: SelectedItem;
+    }
+}
+
+#changelist .actions {
+    padding: 10px;
+    background: var(--body-bg);
+    border-top: none;
+    border-bottom: none;
+    line-height: 1.5rem;
+    color: var(--body-quiet-color);
+    width: 100%;
+}
+
+#changelist .actions span.all,
+#changelist .actions span.action-counter,
+#changelist .actions span.clear,
+#changelist .actions span.question {
+    font-size: 0.8125rem;
+    margin: 0 0.5em;
+}
+
+#changelist .actions:last-child {
+    border-bottom: none;
+}
+
+#changelist .actions select {
+    vertical-align: top;
+    height: 1.5rem;
+    color: var(--body-fg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    padding: 0 0 0 4px;
+    margin: 0;
+    margin-left: 10px;
+}
+
+#changelist .actions select:focus {
+    border-color: var(--body-quiet-color);
+}
+
+#changelist .actions label {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 0.8125rem;
+}
+
+#changelist .actions .button {
+    font-size: 0.8125rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--body-bg);
+    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
+    cursor: pointer;
+    height: 1.5rem;
+    line-height: 1;
+    padding: 4px 8px;
+    margin: 0;
+    color: var(--body-fg);
+}
+
+#changelist .actions .button:focus, #changelist .actions .button:hover {
+    border-color: var(--body-quiet-color);
+}

static/admin/css/dark_mode.css

@@ -0,0 +1,130 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+      --primary: #264b5d;
+      --primary-fg: #f7f7f7;
+  
+      --body-fg: #eeeeee;
+      --body-bg: #121212;
+      --body-quiet-color: #d0d0d0;
+      --body-medium-color: #e0e0e0;
+      --body-loud-color: #ffffff;
+  
+      --breadcrumbs-link-fg: #e0e0e0;
+      --breadcrumbs-bg: var(--primary);
+  
+      --link-fg: #81d4fa;
+      --link-hover-color: #4ac1f7;
+      --link-selected-fg: #6f94c6;
+  
+      --hairline-color: #272727;
+      --border-color: #353535;
+  
+      --error-fg: #e35f5f;
+      --message-success-bg: #006b1b;
+      --message-warning-bg: #583305;
+      --message-error-bg: #570808;
+  
+      --darkened-bg: #212121;
+      --selected-bg: #1b1b1b;
+      --selected-row: #00363a;
+  
+      --close-button-bg: #333333;
+      --close-button-hover-bg: #666666;
+
+      color-scheme: dark;
+    }
+  }
+
+
+html[data-theme="dark"] {
+    --primary: #264b5d;
+    --primary-fg: #f7f7f7;
+
+    --body-fg: #eeeeee;
+    --body-bg: #121212;
+    --body-quiet-color: #d0d0d0;
+    --body-medium-color: #e0e0e0;
+    --body-loud-color: #ffffff;
+
+    --breadcrumbs-link-fg: #e0e0e0;
+    --breadcrumbs-bg: var(--primary);
+
+    --link-fg: #81d4fa;
+    --link-hover-color: #4ac1f7;
+    --link-selected-fg: #6f94c6;
+
+    --hairline-color: #272727;
+    --border-color: #353535;
+
+    --error-fg: #e35f5f;
+    --message-success-bg: #006b1b;
+    --message-warning-bg: #583305;
+    --message-error-bg: #570808;
+
+    --darkened-bg: #212121;
+    --selected-bg: #1b1b1b;
+    --selected-row: #00363a;
+
+    --close-button-bg: #333333;
+    --close-button-hover-bg: #666666;
+
+    color-scheme: dark;
+}
+
+/* THEME SWITCH */
+.theme-toggle {
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background: transparent;
+    vertical-align: middle;
+    margin-inline-start: 5px;
+    margin-top: -1px;
+}
+
+.theme-toggle svg {
+    vertical-align: middle;
+    height: 1.5rem;
+    width: 1.5rem;
+    display: none;
+}
+
+/*
+Fully hide screen reader text so we only show the one matching the current
+theme.
+*/
+.theme-toggle .visually-hidden {
+    display: none;
+}
+
+html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
+    display: block;
+}
+
+html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
+    display: block;
+}
+
+html[data-theme="light"] .theme-toggle .theme-label-when-light {
+    display: block;
+}
+
+/* ICONS */
+.theme-toggle svg.theme-icon-when-auto,
+.theme-toggle svg.theme-icon-when-dark,
+.theme-toggle svg.theme-icon-when-light {
+    fill: var(--header-link-color);
+    color: var(--header-bg);
+}
+
+html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto {
+    display: block;
+}
+
+html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
+    display: block;
+}
+
+html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
+    display: block;
+}

static/admin/css/dashboard.css

@@ -0,0 +1,29 @@
+/* DASHBOARD */
+.dashboard td, .dashboard th {
+    word-break: break-word;
+}
+
+.dashboard .module table th {
+    width: 100%;
+}
+
+.dashboard .module table td {
+    white-space: nowrap;
+}
+
+.dashboard .module table td a {
+    display: block;
+    padding-right: .6em;
+}
+
+/* RECENT ACTIONS MODULE */
+
+.module ul.actionlist {
+    margin-left: 0;
+}
+
+ul.actionlist li {
+    list-style-type: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

static/admin/css/forms.css

@@ -0,0 +1,498 @@
+@import url('widgets.css');
+
+/* FORM ROWS */
+
+.form-row {
+    overflow: hidden;
+    padding: 10px;
+    font-size: 0.8125rem;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+.form-row img, .form-row input {
+    vertical-align: middle;
+}
+
+.form-row label input[type="checkbox"] {
+    margin-top: 0;
+    vertical-align: 0;
+}
+
+form .form-row p {
+    padding-left: 0;
+}
+
+.flex-container {
+    display: flex;
+}
+
+.form-multiline {
+    flex-wrap: wrap;
+}
+
+.form-multiline > div {
+    padding-bottom: 10px;
+}
+
+/* FORM LABELS */
+
+label {
+    font-weight: normal;
+    color: var(--body-quiet-color);
+    font-size: 0.8125rem;
+}
+
+.required label, label.required {
+    font-weight: bold;
+}
+
+/* RADIO BUTTONS */
+
+form div.radiolist div {
+    padding-right: 7px;
+}
+
+form div.radiolist.inline div {
+    display: inline-block;
+}
+
+form div.radiolist label {
+    width: auto;
+}
+
+form div.radiolist input[type="radio"] {
+    margin: -2px 4px 0 0;
+    padding: 0;
+}
+
+form ul.inline {
+    margin-left: 0;
+    padding: 0;
+}
+
+form ul.inline li {
+    float: left;
+    padding-right: 7px;
+}
+
+/* FIELDSETS */
+
+fieldset .fieldset-heading,
+fieldset .inline-heading,
+:not(.inline-related) .collapse summary {
+    border: 1px solid var(--header-bg);
+    margin: 0;
+    padding: 8px;
+    font-weight: 400;
+    font-size: 0.8125rem;
+    background: var(--header-bg);
+    color: var(--header-link-color);
+}
+
+/* ALIGNED FIELDSETS */
+
+.aligned label {
+    display: block;
+    padding: 4px 10px 0 0;
+    min-width: 160px;
+    width: 160px;
+    word-wrap: break-word;
+}
+
+.aligned label:not(.vCheckboxLabel):after {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.aligned label + p, .aligned .checkbox-row + div.help, .aligned label + div.readonly {
+    padding: 6px 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    overflow-wrap: break-word;
+}
+
+.aligned ul label {
+    display: inline;
+    float: none;
+    width: auto;
+}
+
+.aligned .form-row input {
+    margin-bottom: 0;
+}
+
+.colMS .aligned .vLargeTextField, .colMS .aligned .vXMLLargeTextField {
+    width: 350px;
+}
+
+form .aligned ul {
+    margin-left: 160px;
+    padding-left: 10px;
+}
+
+form .aligned div.radiolist {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+}
+
+form .aligned p.help,
+form .aligned div.help {
+    margin-top: 0;
+    margin-left: 160px;
+    padding-left: 10px;
+}
+
+form .aligned p.date div.help.timezonewarning,
+form .aligned p.datetime div.help.timezonewarning,
+form .aligned p.time div.help.timezonewarning {
+    margin-left: 0;
+    padding-left: 0;
+    font-weight: normal;
+}
+
+form .aligned p.help:last-child,
+form .aligned div.help:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+form .aligned input + p.help,
+form .aligned textarea + p.help,
+form .aligned select + p.help,
+form .aligned input + div.help,
+form .aligned textarea + div.help,
+form .aligned select + div.help {
+    margin-left: 160px;
+    padding-left: 10px;
+}
+
+form .aligned select option:checked {
+    background-color: var(--selected-row);
+}
+
+form .aligned ul li {
+    list-style: none;
+}
+
+form .aligned table p {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.aligned .vCheckboxLabel {
+    padding: 1px 0 0 5px;
+}
+
+.aligned .vCheckboxLabel + p.help,
+.aligned .vCheckboxLabel + div.help {
+    margin-top: -4px;
+}
+
+.colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField {
+    width: 610px;
+}
+
+fieldset .fieldBox {
+    margin-right: 20px;
+}
+
+/* WIDE FIELDSETS */
+
+.wide label {
+    width: 200px;
+}
+
+form .wide p.help,
+form .wide ul.errorlist,
+form .wide div.help {
+    padding-left: 50px;
+}
+
+form div.help ul {
+    padding-left: 0;
+    margin-left: 0;
+}
+
+.colM fieldset.wide .vLargeTextField, .colM fieldset.wide .vXMLLargeTextField {
+    width: 450px;
+}
+
+/* COLLAPSIBLE FIELDSETS */
+
+.collapse summary .fieldset-heading,
+.collapse summary .inline-heading {
+    background: transparent;
+    border: none;
+    color: currentColor;
+    display: inline;
+    margin: 0;
+    padding: 0;
+}
+
+/* MONOSPACE TEXTAREAS */
+
+fieldset.monospace textarea {
+    font-family: var(--font-family-monospace);
+}
+
+/* SUBMIT ROW */
+
+.submit-row {
+    padding: 12px 14px 12px;
+    margin: 0 0 20px;
+    background: var(--darkened-bg);
+    border: 1px solid var(--hairline-color);
+    border-radius: 4px;
+    overflow: hidden;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+body.popup .submit-row {
+    overflow: auto;
+}
+
+.submit-row input {
+    height: 2.1875rem;
+    line-height: 0.9375rem;
+}
+
+.submit-row input, .submit-row a {
+    margin: 0;
+}
+
+.submit-row input.default {
+    text-transform: uppercase;
+}
+
+.submit-row a.deletelink {
+    margin-left: auto;
+}
+
+.submit-row a.deletelink {
+    display: block;
+    background: var(--delete-button-bg);
+    border-radius: 4px;
+    padding: 0.625rem 0.9375rem;
+    height: 0.9375rem;
+    line-height: 0.9375rem;
+    color: var(--button-fg);
+}
+
+.submit-row a.closelink {
+    display: inline-block;
+    background: var(--close-button-bg);
+    border-radius: 4px;
+    padding: 10px 15px;
+    height: 0.9375rem;
+    line-height: 0.9375rem;
+    color: var(--button-fg);
+}
+
+.submit-row a.deletelink:focus,
+.submit-row a.deletelink:hover,
+.submit-row a.deletelink:active {
+    background: var(--delete-button-hover-bg);
+    text-decoration: none;
+}
+
+.submit-row a.closelink:focus,
+.submit-row a.closelink:hover,
+.submit-row a.closelink:active {
+    background: var(--close-button-hover-bg);
+    text-decoration: none;
+}
+
+/* CUSTOM FORM FIELDS */
+
+.vSelectMultipleField {
+    vertical-align: top;
+}
+
+.vCheckboxField {
+    border: none;
+}
+
+.vDateField, .vTimeField {
+    margin-right: 2px;
+    margin-bottom: 4px;
+}
+
+.vDateField {
+    min-width: 6.85em;
+}
+
+.vTimeField {
+    min-width: 4.7em;
+}
+
+.vURLField {
+    width: 30em;
+}
+
+.vLargeTextField, .vXMLLargeTextField {
+    width: 48em;
+}
+
+.flatpages-flatpage #id_content {
+    height: 40.2em;
+}
+
+.module table .vPositiveSmallIntegerField {
+    width: 2.2em;
+}
+
+.vIntegerField {
+    width: 5em;
+}
+
+.vBigIntegerField {
+    width: 10em;
+}
+
+.vForeignKeyRawIdAdminField {
+    width: 5em;
+}
+
+.vTextField, .vUUIDField {
+    width: 20em;
+}
+
+/* INLINES */
+
+.inline-group {
+    padding: 0;
+    margin: 0 0 30px;
+}
+
+.inline-group thead th {
+    padding: 8px 10px;
+}
+
+.inline-group .aligned label {
+    width: 160px;
+}
+
+.inline-related {
+    position: relative;
+}
+
+.inline-related h4,
+.inline-related:not(.tabular) .collapse summary {
+    margin: 0;
+    color: var(--body-medium-color);
+    padding: 5px;
+    font-size: 0.8125rem;
+    background: var(--darkened-bg);
+    border: 1px solid var(--hairline-color);
+    border-left-color: var(--darkened-bg);
+    border-right-color: var(--darkened-bg);
+}
+
+.inline-related h3 span.delete {
+    float: right;
+}
+
+.inline-related h3 span.delete label {
+    margin-left: 2px;
+    font-size: 0.6875rem;
+}
+
+.inline-related fieldset {
+    margin: 0;
+    background: var(--body-bg);
+    border: none;
+    width: 100%;
+}
+
+.inline-group .tabular fieldset.module {
+    border: none;
+}
+
+.inline-related.tabular fieldset.module table {
+    width: 100%;
+    overflow-x: scroll;
+}
+
+.last-related fieldset {
+    border: none;
+}
+
+.inline-group .tabular tr.has_original td {
+    padding-top: 2em;
+}
+
+.inline-group .tabular tr td.original {
+    padding: 2px 0 0 0;
+    width: 0;
+    _position: relative;
+}
+
+.inline-group .tabular th.original {
+    width: 0px;
+    padding: 0;
+}
+
+.inline-group .tabular td.original p {
+    position: absolute;
+    left: 0;
+    height: 1.1em;
+    padding: 2px 9px;
+    overflow: hidden;
+    font-size: 0.5625rem;
+    font-weight: bold;
+    color: var(--body-quiet-color);
+    _width: 700px;
+}
+
+.inline-group div.add-row,
+.inline-group .tabular tr.add-row td {
+    color: var(--body-quiet-color);
+    background: var(--darkened-bg);
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+.inline-group .tabular tr.add-row td {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+.inline-group div.add-row a,
+.inline-group .tabular tr.add-row td a {
+    font-size: 0.75rem;
+}
+
+.empty-form {
+    display: none;
+}
+
+/* RELATED FIELD ADD ONE / LOOKUP */
+
+.related-lookup {
+    margin-left: 5px;
+    display: inline-block;
+    vertical-align: middle;
+    background-repeat: no-repeat;
+    background-size: 14px;
+}
+
+.related-lookup {
+    width: 1rem;
+    height: 1rem;
+    background-image: url(../img/search.svg);
+}
+
+form .related-widget-wrapper ul {
+    display: inline-block;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.clearable-file-input input {
+    margin-top: 0;
+}

static/admin/css/login.css

@@ -0,0 +1,61 @@
+/* LOGIN FORM */
+
+.login {
+    background: var(--darkened-bg);
+    height: auto;
+}
+
+.login #header {
+    height: auto;
+    padding: 15px 16px;
+    justify-content: center;
+}
+
+.login #header h1 {
+    font-size: 1.125rem;
+    margin: 0;
+}
+
+.login #header h1 a {
+    color: var(--header-link-color);
+}
+
+.login #content {
+    padding: 20px;
+}
+
+.login #container {
+    background: var(--body-bg);
+    border: 1px solid var(--hairline-color);
+    border-radius: 4px;
+    overflow: hidden;
+    width: 28em;
+    min-width: 300px;
+    margin: 100px auto;
+    height: auto;
+}
+
+.login .form-row {
+    padding: 4px 0;
+}
+
+.login .form-row label {
+    display: block;
+    line-height: 2em;
+}
+
+.login .form-row #id_username, .login .form-row #id_password {
+    padding: 8px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.login .submit-row {
+    padding: 1em 0 0 0;
+    margin: 0;
+    text-align: center;
+}
+
+.login .password-reset-link {
+    text-align: center;
+}

static/admin/css/nav_sidebar.css

@@ -0,0 +1,150 @@
+.sticky {
+    position: sticky;
+    top: 0;
+    max-height: 100vh;
+}
+
+.toggle-nav-sidebar {
+    z-index: 20;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 23px;
+    width: 23px;
+    border: 0;
+    border-right: 1px solid var(--hairline-color);
+    background-color: var(--body-bg);
+    cursor: pointer;
+    font-size: 1.25rem;
+    color: var(--link-fg);
+    padding: 0;
+}
+
+[dir="rtl"] .toggle-nav-sidebar {
+    border-left: 1px solid var(--hairline-color);
+    border-right: 0;
+}
+
+.toggle-nav-sidebar:hover,
+.toggle-nav-sidebar:focus {
+    background-color: var(--darkened-bg);
+}
+
+#nav-sidebar {
+    z-index: 15;
+    flex: 0 0 275px;
+    left: -276px;
+    margin-left: -276px;
+    border-top: 1px solid transparent;
+    border-right: 1px solid var(--hairline-color);
+    background-color: var(--body-bg);
+    overflow: auto;
+}
+
+[dir="rtl"] #nav-sidebar {
+    border-left: 1px solid var(--hairline-color);
+    border-right: 0;
+    left: 0;
+    margin-left: 0;
+    right: -276px;
+    margin-right: -276px;
+}
+
+.toggle-nav-sidebar::before {
+    content: '\00BB';
+}
+
+.main.shifted .toggle-nav-sidebar::before {
+    content: '\00AB';
+}
+
+.main > #nav-sidebar {
+    visibility: hidden;
+}
+
+.main.shifted > #nav-sidebar {
+    margin-left: 0;
+    visibility: visible;
+}
+
+[dir="rtl"] .main.shifted > #nav-sidebar {
+    margin-right: 0;
+}
+
+#nav-sidebar .module th {
+    width: 100%;
+    overflow-wrap: anywhere;
+}
+
+#nav-sidebar .module th,
+#nav-sidebar .module caption {
+    padding-left: 16px;
+}
+
+#nav-sidebar .module td {
+    white-space: nowrap;
+}
+
+[dir="rtl"] #nav-sidebar .module th,
+[dir="rtl"] #nav-sidebar .module caption {
+    padding-left: 8px;
+    padding-right: 16px;
+}
+
+#nav-sidebar .current-app .section:link,
+#nav-sidebar .current-app .section:visited {
+    color: var(--header-color);
+    font-weight: bold;
+}
+
+#nav-sidebar .current-model {
+    background: var(--selected-row);
+}
+
+@media (forced-colors: active) {
+    #nav-sidebar .current-model {
+        background-color: SelectedItem;
+    }
+}
+
+.main > #nav-sidebar + .content {
+    max-width: calc(100% - 23px);
+}
+
+.main.shifted > #nav-sidebar + .content {
+    max-width: calc(100% - 299px);
+}
+
+@media (max-width: 767px) {
+    #nav-sidebar, #toggle-nav-sidebar {
+        display: none;
+    }
+
+    .main > #nav-sidebar + .content,
+    .main.shifted > #nav-sidebar + .content {
+        max-width: 100%;
+    }
+}
+
+#nav-filter {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 2px 5px;
+    margin: 5px 0;
+    border: 1px solid var(--border-color);
+    background-color: var(--darkened-bg);
+    color: var(--body-fg);
+}
+
+#nav-filter:focus {
+    border-color: var(--body-quiet-color);
+}
+
+#nav-filter.no-results {
+    background: var(--message-error-bg);
+}
+
+#nav-sidebar table {
+    width: 100%;
+}

static/admin/css/responsive.css

@@ -0,0 +1,904 @@
+/* Tablets */
+
+input[type="submit"], button {
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+@media (max-width: 1024px) {
+    /* Basic */
+
+    html {
+        -webkit-text-size-adjust: 100%;
+    }
+
+    td, th {
+        padding: 10px;
+        font-size: 0.875rem;
+    }
+
+    .small {
+        font-size: 0.75rem;
+    }
+
+    /* Layout */
+
+    #container {
+        min-width: 0;
+    }
+
+    #content {
+        padding: 15px 20px 20px;
+    }
+
+    div.breadcrumbs {
+        padding: 10px 30px;
+    }
+
+    /* Header */
+
+    #header {
+        flex-direction: column;
+        padding: 15px 30px;
+        justify-content: flex-start;
+    }
+
+    #site-name {
+        margin: 0 0 8px;
+        line-height: 1.2;
+    }
+
+    #user-tools {
+        margin: 0;
+        font-weight: 400;
+        line-height: 1.85;
+        text-align: left;
+    }
+
+    #user-tools a {
+        display: inline-block;
+        line-height: 1.4;
+    }
+
+    /* Dashboard */
+
+    .dashboard #content {
+        width: auto;
+    }
+
+    #content-related {
+        margin-right: -290px;
+    }
+
+    .colSM #content-related {
+        margin-left: -290px;
+    }
+
+    .colMS {
+        margin-right: 290px;
+    }
+
+    .colSM {
+        margin-left: 290px;
+    }
+
+    .dashboard .module table td a {
+        padding-right: 0;
+    }
+
+    td .changelink, td .addlink {
+        font-size: 0.8125rem;
+    }
+
+    /* Changelist */
+
+    #toolbar {
+        border: none;
+        padding: 15px;
+    }
+
+    #changelist-search > div {
+        display: flex;
+        flex-wrap: nowrap;
+        max-width: 480px;
+    }
+
+    #changelist-search label {
+        line-height: 1.375rem;
+    }
+
+    #toolbar form #searchbar {
+        flex: 1 0 auto;
+        width: 0;
+        height: 1.375rem;
+        margin: 0 10px 0 6px;
+    }
+
+    #toolbar form input[type=submit] {
+        flex: 0 1 auto;
+    }
+
+    #changelist-search .quiet {
+        width: 0;
+        flex: 1 0 auto;
+        margin: 5px 0 0 25px;
+    }
+
+    #changelist .actions {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 15px 0;
+    }
+
+    #changelist .actions label {
+        display: flex;
+    }
+
+    #changelist .actions select {
+        background: var(--body-bg);
+    }
+
+    #changelist .actions .button {
+        min-width: 48px;
+        margin: 0 10px;
+    }
+
+    #changelist .actions span.all,
+    #changelist .actions span.clear,
+    #changelist .actions span.question,
+    #changelist .actions span.action-counter {
+        font-size: 0.6875rem;
+        margin: 0 10px 0 0;
+    }
+
+    #changelist-filter {
+        flex-basis: 200px;
+    }
+
+    .change-list .filtered .results,
+    .change-list .filtered .paginator,
+    .filtered #toolbar,
+    .filtered .actions,
+
+    #changelist .paginator {
+        border-top-color: var(--hairline-color); /* XXX Is this used at all? */
+    }
+
+    #changelist .results + .paginator {
+        border-top: none;
+    }
+
+    /* Forms */
+
+    label {
+        font-size: 1rem;
+    }
+
+    /*
+    Minifiers remove the default (text) "type" attribute from "input" HTML
+    tags. Add input:not([type]) to make the CSS stylesheet work the same.
+    */
+    .form-row input:not([type]),
+    .form-row input[type=text],
+    .form-row input[type=password],
+    .form-row input[type=email],
+    .form-row input[type=url],
+    .form-row input[type=tel],
+    .form-row input[type=number],
+    .form-row textarea,
+    .form-row select,
+    .form-row .vTextField {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 6px 8px;
+        min-height: 2.25rem;
+        font-size: 1rem;
+    }
+
+    .form-row select {
+        height: 2.25rem;
+    }
+
+    .form-row select[multiple] {
+        height: auto;
+        min-height: 0;
+    }
+
+    fieldset .fieldBox + .fieldBox {
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid var(--hairline-color);
+    }
+
+    textarea {
+        max-width: 100%;
+        max-height: 120px;
+    }
+
+    .aligned label {
+        padding-top: 6px;
+    }
+
+    .aligned .related-lookup,
+    .aligned .datetimeshortcuts,
+    .aligned .related-lookup + strong {
+        align-self: center;
+        margin-left: 15px;
+    }
+
+    form .aligned div.radiolist {
+        margin-left: 2px;
+    }
+
+    .submit-row {
+        padding: 8px;
+    }
+
+    .submit-row a.deletelink {
+        padding: 10px 7px;
+    }
+
+    .button, input[type=submit], input[type=button], .submit-row input, a.button {
+        padding: 7px;
+    }
+
+    /* Selector */
+
+    .selector {
+        display: flex;
+        width: 100%;
+    }
+
+    .selector .selector-filter {
+        display: flex;
+        align-items: center;
+    }
+
+    .selector .selector-filter input {
+        width: 100%;
+        min-height: 0;
+        flex: 1 1;
+    }
+
+    .selector-available, .selector-chosen {
+        width: auto;
+        flex: 1 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .selector select {
+        width: 100%;
+        flex: 1 0 auto;
+        margin-bottom: 5px;
+    }
+
+    .selector-chooseall, .selector-clearall {
+        align-self: center;
+    }
+
+    .stacked {
+        flex-direction: column;
+        max-width: 480px;
+    }
+
+    .stacked > * {
+        flex: 0 1 auto;
+    }
+
+    .stacked select {
+        margin-bottom: 0;
+    }
+
+    .stacked .selector-available, .stacked .selector-chosen {
+        width: auto;
+    }
+
+    .stacked ul.selector-chooser {
+        padding: 0 2px;
+        transform: none;
+    }
+
+    .stacked .selector-chooser li {
+        padding: 3px;
+    }
+
+    .help-tooltip, .selector .help-icon {
+        display: none;
+    }
+
+    .datetime input {
+        width: 50%;
+        max-width: 120px;
+    }
+
+    .datetime span {
+        font-size: 0.8125rem;
+    }
+
+    .datetime .timezonewarning {
+        display: block;
+        font-size: 0.6875rem;
+        color: var(--body-quiet-color);
+    }
+
+    .datetimeshortcuts {
+        color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */
+    }
+
+    .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
+        width: 75%;
+    }
+
+    .inline-group {
+        overflow: auto;
+    }
+
+    /* Messages */
+
+    ul.messagelist li {
+        padding-left: 55px;
+        background-position: 30px 12px;
+    }
+
+    ul.messagelist li.error {
+        background-position: 30px 12px;
+    }
+
+    ul.messagelist li.warning {
+        background-position: 30px 14px;
+    }
+
+    /* Login */
+
+    .login #header {
+        padding: 15px 20px;
+    }
+
+    .login #site-name {
+        margin: 0;
+    }
+
+    /* GIS */
+
+    div.olMap {
+        max-width: calc(100vw - 30px);
+        max-height: 300px;
+    }
+
+    .olMap + .clear_features {
+        display: block;
+        margin-top: 10px;
+    }
+
+    /* Docs */
+
+    .module table.xfull {
+        width: 100%;
+    }
+
+    pre.literal-block {
+        overflow: auto;
+    }
+}
+
+/* Mobile */
+
+@media (max-width: 767px) {
+    /* Layout */
+
+    #header, #content {
+        padding: 15px;
+    }
+
+    div.breadcrumbs {
+        padding: 10px 15px;
+    }
+
+    /* Dashboard */
+
+    .colMS, .colSM {
+        margin: 0;
+    }
+
+    #content-related, .colSM #content-related {
+        width: 100%;
+        margin: 0;
+    }
+
+    #content-related .module {
+        margin-bottom: 0;
+    }
+
+    #content-related .module h2 {
+        padding: 10px 15px;
+        font-size: 1rem;
+    }
+
+    /* Changelist */
+
+    #changelist {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    #toolbar {
+        padding: 10px;
+    }
+
+    #changelist-filter {
+        margin-left: 0;
+    }
+
+    #changelist .actions label {
+        flex: 1 1;
+    }
+
+    #changelist .actions select {
+        flex: 1 0;
+        width: 100%;
+    }
+
+    #changelist .actions span {
+        flex: 1 0 100%;
+    }
+
+    #changelist-filter {
+        position: static;
+        width: auto;
+        margin-top: 30px;
+    }
+
+    .object-tools {
+        float: none;
+        margin: 0 0 15px;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    .object-tools li {
+        height: auto;
+        margin-left: 0;
+    }
+
+    .object-tools li + li {
+        margin-left: 15px;
+    }
+
+    /* Forms */
+
+    .form-row {
+        padding: 15px 0;
+    }
+
+    .aligned .form-row,
+    .aligned .form-row > div {
+        max-width: 100vw;
+    }
+
+    .aligned .form-row > div {
+        width: calc(100vw - 30px);
+    }
+
+    .flex-container {
+        flex-flow: column;
+    }
+
+    .flex-container.checkbox-row {
+        flex-flow: row;
+    }
+
+    textarea {
+        max-width: none;
+    }
+
+    .vURLField {
+        width: auto;
+    }
+
+    fieldset .fieldBox + .fieldBox {
+        margin-top: 15px;
+        padding-top: 15px;
+    }
+
+    .aligned label {
+        width: 100%;
+        min-width: auto;
+        padding: 0 0 10px;
+    }
+
+    .aligned label:after {
+        max-height: 0;
+    }
+
+    .aligned .form-row input,
+    .aligned .form-row select,
+    .aligned .form-row textarea {
+        flex: 1 1 auto;
+        max-width: 100%;
+    }
+
+    .aligned .checkbox-row input {
+        flex: 0 1 auto;
+        margin: 0;
+    }
+
+    .aligned .vCheckboxLabel {
+        flex: 1 0;
+        padding: 1px 0 0 5px;
+    }
+
+    .aligned label + p,
+    .aligned label + div.help,
+    .aligned label + div.readonly {
+        padding: 0;
+        margin-left: 0;
+    }
+
+    .aligned p.file-upload {
+        font-size: 0.8125rem;
+    }
+
+    span.clearable-file-input {
+        margin-left: 15px;
+    }
+
+    span.clearable-file-input label {
+        font-size: 0.8125rem;
+        padding-bottom: 0;
+    }
+
+    .aligned .timezonewarning {
+        flex: 1 0 100%;
+        margin-top: 5px;
+    }
+
+    form .aligned .form-row div.help {
+        width: 100%;
+        margin: 5px 0 0;
+        padding: 0;
+    }
+
+    form .aligned ul,
+    form .aligned ul.errorlist {
+        margin-left: 0;
+        padding-left: 0;
+    }
+
+    form .aligned div.radiolist {
+        margin-top: 5px;
+        margin-right: 15px;
+        margin-bottom: -3px;
+    }
+
+    form .aligned div.radiolist:not(.inline) div + div {
+        margin-top: 5px;
+    }
+
+    /* Related widget */
+
+    .related-widget-wrapper {
+        width: 100%;
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .related-widget-wrapper .selector {
+        order: 1;
+        flex: 1 0 auto;
+    }
+
+    .related-widget-wrapper > a {
+        order: 2;
+    }
+
+    .related-widget-wrapper .radiolist ~ a {
+        align-self: flex-end;
+    }
+
+    .related-widget-wrapper > select ~ a {
+        align-self: center;
+    }
+
+    /* Selector */
+
+    .selector {
+        flex-direction: column;
+        gap: 10px 0;
+    }
+
+    .selector-available, .selector-chosen {
+        flex: 1 1 auto;
+    }
+
+    .selector select {
+        max-height: 96px;
+    }
+
+    .selector ul.selector-chooser {
+        display: flex;
+        width: 60px;
+        height: 30px;
+        padding: 0 2px;
+        transform: none;
+    }
+
+    .selector ul.selector-chooser li {
+        float: left;
+    }
+
+    .selector-remove {
+        background-position: 0 0;
+    }
+
+    :enabled.selector-remove:focus, :enabled.selector-remove:hover {
+        background-position: 0 -24px;
+    }
+
+    .selector-add  {
+        background-position: 0 -48px;
+    }
+
+    :enabled.selector-add:focus, :enabled.selector-add:hover {
+        background-position: 0 -72px;
+    }
+
+    /* Inlines */
+
+    .inline-group[data-inline-type="stacked"] .inline-related {
+        border: 1px solid var(--hairline-color);
+        border-radius: 4px;
+        margin-top: 15px;
+        overflow: auto;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related > * {
+        box-sizing: border-box;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related .module {
+        padding: 0 10px;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related .module .form-row {
+        border-top: 1px solid var(--hairline-color);
+        border-bottom: none;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related .module .form-row:first-child {
+        border-top: none;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related h3 {
+        padding: 10px;
+        border-top-width: 0;
+        border-bottom-width: 2px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related h3 .inline_label {
+        margin-right: auto;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related h3 span.delete {
+        float: none;
+        flex: 1 1 100%;
+        margin-top: 5px;
+    }
+
+    .inline-group[data-inline-type="stacked"] .aligned .form-row > div:not([class]) {
+        width: 100%;
+    }
+
+    .inline-group[data-inline-type="stacked"] .aligned label {
+        width: 100%;
+    }
+
+    .inline-group[data-inline-type="stacked"] div.add-row {
+        margin-top: 15px;
+        border: 1px solid var(--hairline-color);
+        border-radius: 4px;
+    }
+
+    .inline-group div.add-row,
+    .inline-group .tabular tr.add-row td {
+        padding: 0;
+    }
+
+    .inline-group div.add-row a,
+    .inline-group .tabular tr.add-row td a {
+        display: block;
+        padding: 8px 10px 8px 26px;
+        background-position: 8px 9px;
+    }
+
+    /* Submit row */
+
+    .submit-row {
+        padding: 10px;
+        margin: 0 0 15px;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .submit-row input, .submit-row input.default, .submit-row a {
+        text-align: center;
+    }
+
+    .submit-row a.closelink {
+        padding: 10px 0;
+        text-align: center;
+    }
+
+    .submit-row a.deletelink {
+        margin: 0;
+    }
+
+    /* Messages */
+
+    ul.messagelist li {
+        padding-left: 40px;
+        background-position: 15px 12px;
+    }
+
+    ul.messagelist li.error {
+        background-position: 15px 12px;
+    }
+
+    ul.messagelist li.warning {
+        background-position: 15px 14px;
+    }
+
+    /* Paginator */
+
+    .paginator .this-page, .paginator a:link, .paginator a:visited {
+        padding: 4px 10px;
+    }
+
+    /* Login */
+
+    body.login {
+        padding: 0 15px;
+    }
+
+    .login #container {
+        width: auto;
+        max-width: 480px;
+        margin: 50px auto;
+    }
+
+    .login #header,
+    .login #content {
+        padding: 15px;
+    }
+
+    .login #content-main {
+        float: none;
+    }
+
+    .login .form-row {
+        padding: 0;
+    }
+
+    .login .form-row + .form-row {
+        margin-top: 15px;
+    }
+
+    .login .form-row label {
+        margin: 0 0 5px;
+        line-height: 1.2;
+    }
+
+    .login .submit-row {
+        padding: 15px 0 0;
+    }
+
+    .login br {
+        display: none;
+    }
+
+    .login .submit-row input {
+        margin: 0;
+        text-transform: uppercase;
+    }
+
+    .errornote {
+        margin: 0 0 20px;
+        padding: 8px 12px;
+        font-size: 0.8125rem;
+    }
+
+    /* Calendar and clock */
+
+    .calendarbox, .clockbox {
+        position: fixed !important;
+        top: 50% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%);
+        margin: 0;
+        border: none;
+        overflow: visible;
+    }
+
+    .calendarbox:before, .clockbox:before {
+        content: '';
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.75);
+        transform: translate(-50%, -50%);
+    }
+
+    .calendarbox > *, .clockbox > * {
+        position: relative;
+        z-index: 1;
+    }
+
+    .calendarbox > div:first-child {
+        z-index: 2;
+    }
+
+    .calendarbox .calendar, .clockbox h2 {
+        border-radius: 4px 4px 0 0;
+        overflow: hidden;
+    }
+
+    .calendarbox .calendar-cancel, .clockbox .calendar-cancel {
+        border-radius: 0 0 4px 4px;
+        overflow: hidden;
+    }
+
+    .calendar-shortcuts {
+        padding: 10px 0;
+        font-size: 0.75rem;
+        line-height: 0.75rem;
+    }
+
+    .calendar-shortcuts a {
+        margin: 0 4px;
+    }
+
+    .timelist a {
+        background: var(--body-bg);
+        padding: 4px;
+    }
+
+    .calendar-cancel {
+        padding: 8px 10px;
+    }
+
+    .clockbox h2 {
+        padding: 8px 15px;
+    }
+
+    .calendar caption {
+        padding: 10px;
+    }
+
+    .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
+        z-index: 1;
+        top: 10px;
+    }
+
+    /* History */
+
+    table#change-history tbody th, table#change-history tbody td {
+        font-size: 0.8125rem;
+        word-break: break-word;
+    }
+
+    table#change-history tbody th {
+        width: auto;
+    }
+
+    /* Docs */
+
+    table.model tbody th, table.model tbody td {
+        font-size: 0.8125rem;
+        word-break: break-word;
+    }
+}

static/admin/css/responsive_rtl.css

@@ -0,0 +1,89 @@
+/* TABLETS */
+
+@media (max-width: 1024px) {
+    [dir="rtl"] .colMS {
+        margin-right: 0;
+    }
+
+    [dir="rtl"] #user-tools {
+        text-align: right;
+    }
+
+    [dir="rtl"] #changelist .actions label {
+        padding-left: 10px;
+        padding-right: 0;
+    }
+
+    [dir="rtl"] #changelist .actions select {
+        margin-left: 0;
+        margin-right: 15px;
+    }
+
+    [dir="rtl"] .change-list .filtered .results,
+    [dir="rtl"] .change-list .filtered .paginator,
+    [dir="rtl"] .filtered #toolbar,
+    [dir="rtl"] .filtered div.xfull,
+    [dir="rtl"] .filtered .actions,
+    [dir="rtl"] #changelist-filter {
+        margin-left: 0;
+    }
+
+    [dir="rtl"] .inline-group div.add-row a,
+    [dir="rtl"] .inline-group .tabular tr.add-row td a {
+        padding: 8px 26px 8px 10px;
+        background-position: calc(100% - 8px) 9px;
+    }
+
+    [dir="rtl"] .object-tools li {
+        float: right;
+    }
+
+    [dir="rtl"] .object-tools li + li {
+        margin-left: 0;
+        margin-right: 15px;
+    }
+
+    [dir="rtl"] .dashboard .module table td a {
+        padding-left: 0;
+        padding-right: 16px;
+    }
+}
+
+/* MOBILE */
+
+@media (max-width: 767px) {
+    [dir="rtl"] .aligned .related-lookup,
+    [dir="rtl"] .aligned .datetimeshortcuts {
+        margin-left: 0;
+        margin-right: 15px;
+    }
+
+    [dir="rtl"] .aligned ul,
+    [dir="rtl"] form .aligned ul.errorlist {
+        margin-right: 0;
+    }
+
+    [dir="rtl"] #changelist-filter {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    [dir="rtl"] .aligned .vCheckboxLabel {
+        padding: 1px 5px 0 0;
+    }
+
+    [dir="rtl"] .selector-remove {
+        background-position: 0 0;
+    }
+
+    [dir="rtl"] :enabled.selector-remove:focus, :enabled.selector-remove:hover {
+        background-position: 0 -24px;
+    }
+
+    [dir="rtl"] .selector-add  {
+        background-position: 0 -48px;
+    }
+
+    [dir="rtl"] :enabled.selector-add:focus, :enabled.selector-add:hover {
+        background-position: 0 -72px;
+    }
+}

static/admin/css/rtl.css

@@ -0,0 +1,293 @@
+/* GLOBAL */
+
+th {
+    text-align: right;
+}
+
+.module h2, .module caption {
+    text-align: right;
+}
+
+.module ul, .module ol {
+    margin-left: 0;
+    margin-right: 1.5em;
+}
+
+.viewlink, .addlink, .changelink, .hidelink {
+    padding-left: 0;
+    padding-right: 16px;
+    background-position: 100% 1px;
+}
+
+.deletelink {
+    padding-left: 0;
+    padding-right: 16px;
+    background-position: 100% 1px;
+}
+
+.object-tools {
+    float: left;
+}
+
+thead th:first-child,
+tfoot td:first-child {
+    border-left: none;
+}
+
+/* LAYOUT */
+
+#user-tools {
+    right: auto;
+    left: 0;
+    text-align: left;
+}
+
+div.breadcrumbs {
+    text-align: right;
+}
+
+#content-main {
+    float: right;
+}
+
+#content-related {
+    float: left;
+    margin-left: -300px;
+    margin-right: auto;
+}
+
+.colMS {
+    margin-left: 300px;
+    margin-right: 0;
+}
+
+/* SORTABLE TABLES */
+
+table thead th.sorted .sortoptions {
+   float: left;
+}
+
+thead th.sorted .text {
+    padding-right: 0;
+    padding-left: 42px;
+}
+
+/* dashboard styles */
+
+.dashboard .module table td a {
+    padding-left: .6em;
+    padding-right: 16px;
+}
+
+/* changelists styles */
+
+.change-list .filtered table {
+    border-left: none;
+    border-right: 0px none;
+}
+
+#changelist-filter {
+    border-left: none;
+    border-right: none;
+    margin-left: 0;
+    margin-right: 30px;
+}
+
+#changelist-filter li.selected {
+    border-left: none;
+    padding-left: 10px;
+    margin-left: 0;
+    border-right: 5px solid var(--hairline-color);
+    padding-right: 10px;
+    margin-right: -15px;
+}
+
+#changelist table tbody td:first-child, #changelist table tbody th:first-child {
+    border-right: none;
+    border-left: none;
+}
+
+.paginator .end {
+    margin-left: 6px;
+    margin-right: 0;
+}
+
+.paginator input {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+/* FORMS */
+
+.aligned label {
+    padding: 0 0 3px 1em;
+}
+
+.submit-row a.deletelink {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+.vDateField, .vTimeField {
+    margin-left: 2px;
+}
+
+.aligned .form-row input {
+    margin-left: 5px;
+}
+
+form .aligned ul {
+    margin-right: 163px;
+    padding-right: 10px;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+form ul.inline li {
+    float: right;
+    padding-right: 0;
+    padding-left: 7px;
+}
+
+form .aligned p.help,
+form .aligned div.help {
+    margin-left: 0;
+    margin-right: 160px;
+    padding-right: 10px;
+}
+
+form div.help ul,
+form .aligned .checkbox-row + .help,
+form .aligned p.date div.help.timezonewarning,
+form .aligned p.datetime div.help.timezonewarning,
+form .aligned p.time div.help.timezonewarning {
+    margin-right: 0;
+    padding-right: 0;
+}
+
+form .wide p.help,
+form .wide ul.errorlist,
+form .wide div.help {
+    padding-left: 0;
+    padding-right: 50px;
+}
+
+.submit-row {
+    text-align: right;
+}
+
+fieldset .fieldBox {
+    margin-left: 20px;
+    margin-right: 0;
+}
+
+.errorlist li {
+    background-position: 100% 12px;
+    padding: 0;
+}
+
+.errornote {
+    background-position: 100% 12px;
+    padding: 10px 12px;
+}
+
+/* WIDGETS */
+
+.calendarnav-previous {
+    top: 0;
+    left: auto;
+    right: 10px;
+    background: url(../img/calendar-icons.svg) 0 -15px no-repeat;
+}
+
+.calendarnav-next {
+    top: 0;
+    right: auto;
+    left: 10px;
+    background: url(../img/calendar-icons.svg) 0 0 no-repeat;
+}
+
+.calendar caption, .calendarbox h2 {
+    text-align: center;
+}
+
+.selector {
+    float: right;
+}
+
+.selector .selector-filter {
+    text-align: right;
+}
+
+.selector-add {
+    background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+    background-size: 24px auto;
+}
+
+:enabled.selector-add:focus, :enabled.selector-add:hover {
+    background-position: 0 -120px;
+}
+
+.selector-remove {
+    background: url(../img/selector-icons.svg) 0 -144px no-repeat;
+    background-size: 24px auto;
+}
+
+:enabled.selector-remove:focus, :enabled.selector-remove:hover {
+    background-position: 0 -168px;
+}
+
+.selector-chooseall {
+    background: url(../img/selector-icons.svg) right -128px no-repeat;
+}
+
+:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover {
+    background-position: 100% -144px;
+}
+
+.selector-clearall {
+    background: url(../img/selector-icons.svg) 0 -160px no-repeat;
+}
+
+:enabled.selector-clearall:focus, :enabled.selector-clearall:hover {
+    background-position: 0 -176px;
+}
+
+.inline-deletelink {
+    float: left;
+}
+
+form .form-row p.datetime {
+    overflow: hidden;
+}
+
+.related-widget-wrapper {
+    float: right;
+}
+
+/* MISC */
+
+.inline-related h2, .inline-group h2 {
+    text-align: right
+}
+
+.inline-related h3 span.delete {
+    padding-right: 20px;
+    padding-left: inherit;
+    left: 10px;
+    right: inherit;
+    float:left;
+}
+
+.inline-related h3 span.delete label {
+    margin-left: inherit;
+    margin-right: 2px;
+}
+
+.inline-group .tabular td.original p {
+    right: 0;
+}
+
+.selector .selector-chooser {
+    margin: 0;
+}

static/admin/css/unusable_password_field.css

@@ -0,0 +1,19 @@
+/* Hide warnings fields if usable password is selected */
+form:has(#id_usable_password input[value="true"]:checked) .messagelist {
+    display: none;
+}
+
+/* Hide password fields if unusable password is selected */
+form:has(#id_usable_password input[value="false"]:checked) .field-password1,
+form:has(#id_usable_password input[value="false"]:checked) .field-password2 {
+    display: none;
+}
+
+/* Select appropriate submit button */
+form:has(#id_usable_password input[value="true"]:checked) input[type="submit"].unset-password {
+    display: none;
+}
+
+form:has(#id_usable_password input[value="false"]:checked) input[type="submit"].set-password {
+    display: none;
+}

static/admin/css/vendor/select2/LICENSE-SELECT2.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2012-2017 Kevin Brown, Igor Vaynberg, and Select2 contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

static/admin/css/vendor/select2/select2.css

@@ -0,0 +1,481 @@
+.select2-container {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  position: relative;
+  vertical-align: middle; }
+  .select2-container .select2-selection--single {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: block;
+    height: 28px;
+    user-select: none;
+    -webkit-user-select: none; }
+    .select2-container .select2-selection--single .select2-selection__rendered {
+      display: block;
+      padding-left: 8px;
+      padding-right: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+    .select2-container .select2-selection--single .select2-selection__clear {
+      position: relative; }
+  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
+    padding-right: 8px;
+    padding-left: 20px; }
+  .select2-container .select2-selection--multiple {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: block;
+    min-height: 32px;
+    user-select: none;
+    -webkit-user-select: none; }
+    .select2-container .select2-selection--multiple .select2-selection__rendered {
+      display: inline-block;
+      overflow: hidden;
+      padding-left: 8px;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+  .select2-container .select2-search--inline {
+    float: left; }
+    .select2-container .select2-search--inline .select2-search__field {
+      box-sizing: border-box;
+      border: none;
+      font-size: 100%;
+      margin-top: 5px;
+      padding: 0; }
+      .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
+        -webkit-appearance: none; }
+
+.select2-dropdown {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  left: -100000px;
+  width: 100%;
+  z-index: 1051; }
+
+.select2-results {
+  display: block; }
+
+.select2-results__options {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
+.select2-results__option {
+  padding: 6px;
+  user-select: none;
+  -webkit-user-select: none; }
+  .select2-results__option[aria-selected] {
+    cursor: pointer; }
+
+.select2-container--open .select2-dropdown {
+  left: 0; }
+
+.select2-container--open .select2-dropdown--above {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container--open .select2-dropdown--below {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
+.select2-search--dropdown {
+  display: block;
+  padding: 4px; }
+  .select2-search--dropdown .select2-search__field {
+    padding: 4px;
+    width: 100%;
+    box-sizing: border-box; }
+    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
+      -webkit-appearance: none; }
+  .select2-search--dropdown.select2-search--hide {
+    display: none; }
+
+.select2-close-mask {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  min-width: 100%;
+  height: auto;
+  width: auto;
+  opacity: 0;
+  z-index: 99;
+  background-color: #fff;
+  filter: alpha(opacity=0); }
+
+.select2-hidden-accessible {
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; }
+
+.select2-container--default .select2-selection--single {
+  background-color: #fff;
+  border: 1px solid #aaa;
+  border-radius: 4px; }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: #444;
+    line-height: 28px; }
+  .select2-container--default .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold; }
+  .select2-container--default .select2-selection--single .select2-selection__placeholder {
+    color: #999; }
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px; }
+    .select2-container--default .select2-selection--single .select2-selection__arrow b {
+      border-color: #888 transparent transparent transparent;
+      border-style: solid;
+      border-width: 5px 4px 0 4px;
+      height: 0;
+      left: 50%;
+      margin-left: -4px;
+      margin-top: -2px;
+      position: absolute;
+      top: 50%;
+      width: 0; }
+
+.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
+  float: left; }
+
+.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+  left: 1px;
+  right: auto; }
+
+.select2-container--default.select2-container--disabled .select2-selection--single {
+  background-color: #eee;
+  cursor: default; }
+  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
+    display: none; }
+
+.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+  border-color: transparent transparent #888 transparent;
+  border-width: 0 4px 5px 4px; }
+
+.select2-container--default .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: text; }
+  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
+    box-sizing: border-box;
+    list-style: none;
+    margin: 0;
+    padding: 0 5px;
+    width: 100%; }
+    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
+      list-style: none; }
+  .select2-container--default .select2-selection--multiple .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-top: 5px;
+    margin-right: 10px;
+    padding: 1px; }
+  .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #e4e4e4;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px; }
+  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+    color: #999;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px; }
+    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+      color: #333; }
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
+  float: right; }
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+  margin-left: 5px;
+  margin-right: auto; }
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+  margin-left: 2px;
+  margin-right: auto; }
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: solid black 1px;
+  outline: 0; }
+
+.select2-container--default.select2-container--disabled .select2-selection--multiple {
+  background-color: #eee;
+  cursor: default; }
+
+.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
+  display: none; }
+
+.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
+.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container--default .select2-search--dropdown .select2-search__field {
+  border: 1px solid #aaa; }
+
+.select2-container--default .select2-search--inline .select2-search__field {
+  background: transparent;
+  border: none;
+  outline: 0;
+  box-shadow: none;
+  -webkit-appearance: textfield; }
+
+.select2-container--default .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto; }
+
+.select2-container--default .select2-results__option[role=group] {
+  padding: 0; }
+
+.select2-container--default .select2-results__option[aria-disabled=true] {
+  color: #999; }
+
+.select2-container--default .select2-results__option[aria-selected=true] {
+  background-color: #ddd; }
+
+.select2-container--default .select2-results__option .select2-results__option {
+  padding-left: 1em; }
+  .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
+    padding-left: 0; }
+  .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -1em;
+    padding-left: 2em; }
+    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+      margin-left: -2em;
+      padding-left: 3em; }
+      .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+        margin-left: -3em;
+        padding-left: 4em; }
+        .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+          margin-left: -4em;
+          padding-left: 5em; }
+          .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+            margin-left: -5em;
+            padding-left: 6em; }
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: #5897fb;
+  color: white; }
+
+.select2-container--default .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px; }
+
+.select2-container--classic .select2-selection--single {
+  background-color: #f7f7f7;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  outline: 0;
+  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
+  .select2-container--classic .select2-selection--single:focus {
+    border: 1px solid #5897fb; }
+  .select2-container--classic .select2-selection--single .select2-selection__rendered {
+    color: #444;
+    line-height: 28px; }
+  .select2-container--classic .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-right: 10px; }
+  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
+    color: #999; }
+  .select2-container--classic .select2-selection--single .select2-selection__arrow {
+    background-color: #ddd;
+    border: none;
+    border-left: 1px solid #aaa;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px;
+    background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+    background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+    background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
+    .select2-container--classic .select2-selection--single .select2-selection__arrow b {
+      border-color: #888 transparent transparent transparent;
+      border-style: solid;
+      border-width: 5px 4px 0 4px;
+      height: 0;
+      left: 50%;
+      margin-left: -4px;
+      margin-top: -2px;
+      position: absolute;
+      top: 50%;
+      width: 0; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
+  float: left; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+  border: none;
+  border-right: 1px solid #aaa;
+  border-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  left: 1px;
+  right: auto; }
+
+.select2-container--classic.select2-container--open .select2-selection--single {
+  border: 1px solid #5897fb; }
+  .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
+    background: transparent;
+    border: none; }
+    .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
+      border-color: transparent transparent #888 transparent;
+      border-width: 0 4px 5px 4px; }
+
+.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
+
+.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
+
+.select2-container--classic .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: text;
+  outline: 0; }
+  .select2-container--classic .select2-selection--multiple:focus {
+    border: 1px solid #5897fb; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
+    list-style: none;
+    margin: 0;
+    padding: 0 5px; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__clear {
+    display: none; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
+    background-color: #e4e4e4;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
+    color: #888;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px; }
+    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
+      color: #555; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+  float: right;
+  margin-left: 5px;
+  margin-right: auto; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+  margin-left: 2px;
+  margin-right: auto; }
+
+.select2-container--classic.select2-container--open .select2-selection--multiple {
+  border: 1px solid #5897fb; }
+
+.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
+.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container--classic .select2-search--dropdown .select2-search__field {
+  border: 1px solid #aaa;
+  outline: 0; }
+
+.select2-container--classic .select2-search--inline .select2-search__field {
+  outline: 0;
+  box-shadow: none; }
+
+.select2-container--classic .select2-dropdown {
+  background-color: white;
+  border: 1px solid transparent; }
+
+.select2-container--classic .select2-dropdown--above {
+  border-bottom: none; }
+
+.select2-container--classic .select2-dropdown--below {
+  border-top: none; }
+
+.select2-container--classic .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto; }
+
+.select2-container--classic .select2-results__option[role=group] {
+  padding: 0; }
+
+.select2-container--classic .select2-results__option[aria-disabled=true] {
+  color: grey; }
+
+.select2-container--classic .select2-results__option--highlighted[aria-selected] {
+  background-color: #3875d7;
+  color: white; }
+
+.select2-container--classic .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px; }
+
+.select2-container--classic.select2-container--open .select2-dropdown {
+  border-color: #5897fb; }

static/admin/css/vendor/select2/select2.min.css

@@ -0,0 +1 @@
+.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;bordeLine truncated

static/admin/css/widgets.css

@@ -0,0 +1,613 @@
+/* SELECTOR (FILTER INTERFACE) */
+
+.selector {
+    display: flex;
+    flex: 1;
+    gap: 0 10px;
+}
+
+.selector select {
+    height: 17.2em;
+    flex: 1 0 auto;
+    overflow: scroll;
+    width: 100%;
+}
+
+.selector-available, .selector-chosen {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1;
+}
+
+.selector-available-title, .selector-chosen-title {
+    border: 1px solid var(--border-color);
+    border-radius: 4px 4px 0 0;
+}
+
+.selector .helptext {
+    font-size: 0.6875rem;
+}
+
+.selector-chosen .list-footer-display {
+    border: 1px solid var(--border-color);
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    margin: 0 0 10px;
+    padding: 8px;
+    text-align: center;
+    background: var(--primary);
+    color: var(--header-link-color);
+    cursor: pointer;
+}
+.selector-chosen .list-footer-display__clear {
+    color: var(--breadcrumbs-fg);
+}
+
+.selector-chosen-title {
+    background: var(--secondary);
+    color: var(--header-link-color);
+    padding: 8px;
+}
+
+.selector-chosen-title label {
+    color: var(--header-link-color);
+    width: 100%;
+}
+
+.selector-available-title {
+    background: var(--darkened-bg);
+    color: var(--body-quiet-color);
+    padding: 8px;
+}
+
+.selector-available-title label {
+    width: 100%;
+}
+
+.selector .selector-filter {
+    border: 1px solid var(--border-color);
+    border-width: 0 1px;
+    padding: 8px;
+    color: var(--body-quiet-color);
+    font-size: 0.625rem;
+    margin: 0;
+    text-align: left;
+    display: flex;
+    gap: 8px;
+}
+
+.selector .selector-filter label,
+.inline-group .aligned .selector .selector-filter label {
+    float: left;
+    margin: 7px 0 0;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    overflow: hidden;
+    line-height: 1;
+    min-width: auto;
+}
+
+.selector-filter input {
+    flex-grow: 1;
+}
+
+.selector ul.selector-chooser {
+    align-self: center;
+    width: 30px;
+    background-color: var(--selected-bg);
+    border-radius: 10px;
+    margin: 0;
+    padding: 0;
+    transform: translateY(-17px);
+}
+
+.selector-chooser li {
+    margin: 0;
+    padding: 3px;
+    list-style-type: none;
+}
+
+.selector select {
+    padding: 0 10px;
+    margin: 0 0 10px;
+    border-radius: 0 0 4px 4px;
+}
+.selector .selector-chosen--with-filtered select {
+    margin: 0;
+    border-radius: 0;
+    height: 14em;
+}
+
+.selector .selector-chosen:not(.selector-chosen--with-filtered) .list-footer-display {
+    display: none;
+}
+
+.selector-add, .selector-remove {
+    width: 24px;
+    height: 24px;
+    display: block;
+    text-indent: -3000px;
+    overflow: hidden;
+    cursor: default;
+    opacity: 0.55;
+    border: none;
+}
+
+:enabled.selector-add, :enabled.selector-remove {
+    opacity: 1;
+}
+
+:enabled.selector-add:hover, :enabled.selector-remove:hover {
+    cursor: pointer;
+}
+
+.selector-add {
+    background: url(../img/selector-icons.svg) 0 -144px no-repeat;
+    background-size: 24px auto;
+}
+
+:enabled.selector-add:focus, :enabled.selector-add:hover {
+    background-position: 0 -168px;
+}
+
+.selector-remove {
+    background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+    background-size: 24px auto;
+}
+
+:enabled.selector-remove:focus, :enabled.selector-remove:hover {
+    background-position: 0 -120px;
+}
+
+.selector-chooseall, .selector-clearall {
+    display: inline-block;
+    height: 16px;
+    text-align: left;
+    margin: 0 auto;
+    overflow: hidden;
+    font-weight: bold;
+    line-height: 16px;
+    color: var(--body-quiet-color);
+    text-decoration: none;
+    opacity: 0.55;
+    border: none;
+}
+
+:enabled.selector-chooseall:focus, :enabled.selector-clearall:focus,
+:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover {
+    color: var(--link-fg);
+}
+
+:enabled.selector-chooseall, :enabled.selector-clearall {
+    opacity: 1;
+}
+
+:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover {
+    cursor: pointer;
+}
+
+.selector-chooseall {
+    padding: 0 18px 0 0;
+    background: url(../img/selector-icons.svg) right -160px no-repeat;
+    cursor: default;
+}
+
+:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover {
+    background-position: 100% -176px;
+}
+
+.selector-clearall {
+    padding: 0 0 0 18px;
+    background: url(../img/selector-icons.svg) 0 -128px no-repeat;
+    cursor: default;
+}
+
+:enabled.selector-clearall:focus, :enabled.selector-clearall:hover {
+    background-position: 0 -144px;
+}
+
+/* STACKED SELECTORS */
+
+.stacked {
+    float: left;
+    width: 490px;
+    display: block;
+}
+
+.stacked select {
+    width: 480px;
+    height: 10.1em;
+}
+
+.stacked .selector-available, .stacked .selector-chosen {
+    width: 480px;
+}
+
+.stacked .selector-available {
+    margin-bottom: 0;
+}
+
+.stacked .selector-available input {
+    width: 422px;
+}
+
+.stacked ul.selector-chooser {
+    display: flex;
+    height: 30px;
+    width: 64px;
+    margin: 0 0 10px 40%;
+    background-color: #eee;
+    border-radius: 10px;
+    transform: none;
+}
+
+.stacked .selector-chooser li {
+    float: left;
+    padding: 3px 3px 3px 5px;
+}
+
+.stacked .selector-chooseall, .stacked .selector-clearall {
+    display: none;
+}
+
+.stacked .selector-add {
+    background: url(../img/selector-icons.svg) 0 -48px no-repeat;
+    background-size: 24px auto;
+    cursor: default;
+}
+
+.stacked :enabled.selector-add {
+    background-position: 0 -48px;
+    cursor: pointer;
+}
+
+.stacked :enabled.selector-add:focus, .stacked :enabled.selector-add:hover {
+    background-position: 0 -72px;
+    cursor: pointer;
+}
+
+.stacked .selector-remove {
+    background: url(../img/selector-icons.svg) 0 0 no-repeat;
+    background-size: 24px auto;
+    cursor: default;
+}
+
+.stacked :enabled.selector-remove {
+    background-position: 0 0px;
+    cursor: pointer;
+}
+
+.stacked :enabled.selector-remove:focus, .stacked :enabled.selector-remove:hover {
+    background-position: 0 -24px;
+    cursor: pointer;
+}
+
+.selector .help-icon {
+    background: url(../img/icon-unknown.svg) 0 0 no-repeat;
+    display: inline-block;
+    vertical-align: middle;
+    margin: -2px 0 0 2px;
+    width: 13px;
+    height: 13px;
+}
+
+.selector .selector-chosen .help-icon {
+    background: url(../img/icon-unknown-alt.svg) 0 0 no-repeat;
+}
+
+.selector .search-label-icon {
+    background: url(../img/search.svg) 0 0 no-repeat;
+    display: inline-block;
+    height: 1.125rem;
+    width: 1.125rem;
+}
+
+/* DATE AND TIME */
+
+p.datetime {
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+    color: var(--body-quiet-color);
+    font-weight: bold;
+}
+
+.datetime span {
+    white-space: nowrap;
+    font-weight: normal;
+    font-size: 0.6875rem;
+    color: var(--body-quiet-color);
+}
+
+.datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
+    margin-left: 5px;
+    margin-bottom: 4px;
+}
+
+table p.datetime {
+    font-size: 0.6875rem;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    height: 24px;
+    width: 24px;
+    overflow: hidden;
+}
+
+.datetimeshortcuts .clock-icon {
+    background: url(../img/icon-clock.svg) 0 0 no-repeat;
+    background-size: 24px auto;
+}
+
+.datetimeshortcuts a:focus .clock-icon,
+.datetimeshortcuts a:hover .clock-icon {
+    background-position: 0 -24px;
+}
+
+.datetimeshortcuts .date-icon {
+    background: url(../img/icon-calendar.svg) 0 0 no-repeat;
+    background-size: 24px auto;
+    top: -1px;
+}
+
+.datetimeshortcuts a:focus .date-icon,
+.datetimeshortcuts a:hover .date-icon {
+    background-position: 0 -24px;
+}
+
+.timezonewarning {
+    font-size: 0.6875rem;
+    color: var(--body-quiet-color);
+}
+
+/* URL */
+
+p.url {
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+    color: var(--body-quiet-color);
+    font-size: 0.6875rem;
+    font-weight: bold;
+}
+
+.url a {
+    font-weight: normal;
+}
+
+/* FILE UPLOADS */
+
+p.file-upload {
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+    color: var(--body-quiet-color);
+    font-size: 0.6875rem;
+    font-weight: bold;
+}
+
+.file-upload a {
+    font-weight: normal;
+}
+
+.file-upload .deletelink {
+    margin-left: 5px;
+}
+
+span.clearable-file-input label {
+    color: var(--body-fg);
+    font-size: 0.6875rem;
+    display: inline;
+    float: none;
+}
+
+/* CALENDARS & CLOCKS */
+
+.calendarbox, .clockbox {
+    margin: 5px auto;
+    font-size: 0.75rem;
+    width: 19em;
+    text-align: center;
+    background: var(--body-bg);
+    color: var(--body-fg);
+    border: 1px solid var(--hairline-color);
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    position: relative;
+}
+
+.clockbox {
+    width: auto;
+}
+
+.calendar {
+    margin: 0;
+    padding: 0;
+}
+
+.calendar table {
+    margin: 0;
+    padding: 0;
+    border-collapse: collapse;
+    background: white;
+    width: 100%;
+}
+
+.calendar caption, .calendarbox h2 {
+    margin: 0;
+    text-align: center;
+    border-top: none;
+    font-weight: 700;
+    font-size: 0.75rem;
+    color: #333;
+    background: var(--accent);
+}
+
+.calendar th {
+    padding: 8px 5px;
+    background: var(--darkened-bg);
+    border-bottom: 1px solid var(--border-color);
+    font-weight: 400;
+    font-size: 0.75rem;
+    text-align: center;
+    color: var(--body-quiet-color);
+}
+
+.calendar td {
+    font-weight: 400;
+    font-size: 0.75rem;
+    text-align: center;
+    padding: 0;
+    border-top: 1px solid var(--hairline-color);
+    border-bottom: none;
+}
+
+.calendar td.selected a {
+    background: var(--secondary);
+    color: var(--button-fg);
+}
+
+.calendar td.nonday {
+    background: var(--darkened-bg);
+}
+
+.calendar td.today a {
+    font-weight: 700;
+}
+
+.calendar td a, .timelist a {
+    display: block;
+    font-weight: 400;
+    padding: 6px;
+    text-decoration: none;
+    color: var(--body-quiet-color);
+}
+
+.calendar td a:focus, .timelist a:focus,
+.calendar td a:hover, .timelist a:hover {
+    background: var(--primary);
+    color: white;
+}
+
+.calendar td a:active, .timelist a:active {
+    background: var(--header-bg);
+    color: white;
+}
+
+.calendarnav {
+    font-size: 0.625rem;
+    text-align: center;
+    color: #ccc;
+    margin: 0;
+    padding: 1px 3px;
+}
+
+.calendarnav a:link, #calendarnav a:visited,
+#calendarnav a:focus, #calendarnav a:hover {
+    color: var(--body-quiet-color);
+}
+
+.calendar-shortcuts {
+    background: var(--body-bg);
+    color: var(--body-quiet-color);
+    font-size: 0.6875rem;
+    line-height: 0.6875rem;
+    border-top: 1px solid var(--hairline-color);
+    padding: 8px 0;
+}
+
+.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
+    display: block;
+    position: absolute;
+    top: 8px;
+    width: 15px;
+    height: 15px;
+    text-indent: -9999px;
+    padding: 0;
+}
+
+.calendarnav-previous {
+    left: 10px;
+    background: url(../img/calendar-icons.svg) 0 0 no-repeat;
+}
+
+.calendarnav-next {
+    right: 10px;
+    background: url(../img/calendar-icons.svg) 0 -15px no-repeat;
+}
+
+.calendar-cancel {
+    margin: 0;
+    padding: 4px 0;
+    font-size: 0.75rem;
+    background: var(--close-button-bg);
+    border-top: 1px solid var(--border-color);
+    color: var(--button-fg);
+}
+
+.calendar-cancel:focus, .calendar-cancel:hover {
+    background: var(--close-button-hover-bg);
+}
+
+.calendar-cancel a {
+    color: var(--button-fg);
+    display: block;
+}
+
+ul.timelist, .timelist li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.timelist a {
+    padding: 2px;
+}
+
+/* EDIT INLINE */
+
+.inline-deletelink {
+    float: right;
+    text-indent: -9999px;
+    background: url(../img/inline-delete.svg) 0 0 no-repeat;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 0px none;
+    margin-bottom: .25rem;
+}
+
+.inline-deletelink:focus, .inline-deletelink:hover {
+    cursor: pointer;
+}
+
+/* RELATED WIDGET WRAPPER */
+.related-widget-wrapper {
+    display: flex;
+    gap: 0 10px;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    margin-bottom: 5px;
+}
+
+.related-widget-wrapper-link {
+    opacity: .6;
+    filter: grayscale(1);
+}
+
+.related-widget-wrapper-link:link {
+    opacity: 1;
+    filter: grayscale(0);
+}
+
+/* GIS MAPS */
+.dj_map {
+    width: 600px;
+    height: 400px;
+}

static/admin/img/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Code Charm Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

static/admin/img/README.txt

@@ -0,0 +1,7 @@
+All icons are taken from Font Awesome (https://fontawesome.com/) project.
+The Font Awesome font is licensed under the SIL OFL 1.1:
+- https://scripts.sil.org/OFL
+
+SVG icons source: https://github.com/encharm/Font-Awesome-SVG-PNG
+Font-Awesome-SVG-PNG is licensed under the MIT license (see file license
+in current folder).

static/admin/img/calendar-icons.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="15"
+   height="30"
+   viewBox="0 0 1792 3584"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="calendar-icons.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview5"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="13.3"
+     inkscape:cx="15.526316"
+     inkscape:cy="20.977444"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg5" />
+  <defs
+     id="defs2">
+    <g
+       id="previous">
+      <path
+         d="m 1037,1395 102,-102 q 19,-19 19,-45 0,-26 -19,-45 L 832,896 1139,589 q 19,-19 19,-45 0,-26 -19,-45 L 1037,397 q -19,-19 -45,-19 -26,0 -45,19 L 493,851 q -19,19 -19,45 0,26 19,45 l 454,454 q 19,19 45,19 26,0 45,-19 z m 627,-499 q 0,209 -103,385.5 Q 1458,1458 1281.5,1561 1105,1664 896,1664 687,1664 510.5,1561 334,1458 231,1281.5 128,1105 128,896 128,687 231,510.5 334,334 510.5,231 687,128 896,128 1105,128 1281.5,231 1458,334 1561,510.5 1664,687 1664,896 Z"
+         id="path1" />
+    </g>
+    <g
+       id="next">
+      <path
+         d="m 845,1395 454,-454 q 19,-19 19,-45 0,-26 -19,-45 L 845,397 q -19,-19 -45,-19 -26,0 -45,19 L 653,499 q -19,19 -19,45 0,26 19,45 l 307,307 -307,307 q -19,19 -19,45 0,26 19,45 l 102,102 q 19,19 45,19 26,0 45,-19 z m 819,-499 q 0,209 -103,385.5 Q 1458,1458 1281.5,1561 1105,1664 896,1664 687,1664 510.5,1561 334,1458 231,1281.5 128,1105 128,896 128,687 231,510.5 334,334 510.5,231 687,128 896,128 1105,128 1281.5,231 1458,334 1561,510.5 1664,687 1664,896 Z"
+         id="path2" />
+    </g>
+  </defs>
+  <use
+     xlink:href="#next"
+     x="0"
+     y="5376"
+     fill="#000000"
+     id="use5"
+     transform="translate(0,-3584)" />
+  <use
+     xlink:href="#previous"
+     x="0"
+     y="0"
+     fill="#333333"
+     id="use2"
+     style="fill:#000000;fill-opacity:1" />
+</svg>

static/admin/img/gis/move_vertex_off.svg

@@ -0,0 +1 @@
+<svg width="24" height="22" viewBox="0 0 847 779" xmlns="http://www.w3.org/2000/svg"><g><path fill="#EBECE6" d="M120 1h607c66 0 120 54 120 120v536c0 66-54 120-120 120h-607c-66 0-120-54-120-120v-536c0-66 54-120 120-120z"/><path fill="#9E9E93" d="M120 1h607c66 0 120 54 120 120v536c0 66-54 120-120 120h-607c-66 0-120-54-120-120v-536c0-66 54-120 120-120zm607 25h-607c-26 0-50 11-67 28-17 18-28 41-28 67v536c0 27 11 50 28 68 17 17 41 27 67 27h607c26 0 49-10 67-27 17-18 28-41 28-68v-536c0-26-11-49-28-67-18-17-41-28-67-28z"/><path stroke="#A9A8A4" stroke-width="20" d="M706 295l-68 281"/><path stroke="#E47474" stroke-width="20" d="M316 648l390-353M141 435l175 213"/><path stroke="#C9C9C9" stroke-width="20" d="M319 151l-178 284M706 295l-387-144"/><g fill="#040405"><path d="M319 111c22 0 40 18 40 40s-18 40-40 40-40-18-40-40 18-40 40-40zM141 395c22 0 40 18 40 40s-18 40-40 40c-23 0-41-18-41-40s18-40 41-40zM316 608c22 0 40 18 40 40 0 23-18 41-40 41s-40-18-40-41c0-22 18-40 40-40zM706 254c22 0 40 18 40 41 0 22-18 40-40 40s-40-18-40-40c0-23 18-41 40-41zM638 536c22 0 40 18 40 40s-18 40-40 40-40-18-40-40 18-40 40-40z"/></g></g></svg>

static/admin/img/gis/move_vertex_on.svg

@@ -0,0 +1 @@
+<svg width="24" height="22" viewBox="0 0 847 779" xmlns="http://www.w3.org/2000/svg"><g><path fill="#F1C02A" d="M120 1h607c66 0 120 54 120 120v536c0 66-54 120-120 120h-607c-66 0-120-54-120-120v-536c0-66 54-120 120-120z"/><path fill="#9E9E93" d="M120 1h607c66 0 120 54 120 120v536c0 66-54 120-120 120h-607c-66 0-120-54-120-120v-536c0-66 54-120 120-120zm607 25h-607c-26 0-50 11-67 28-17 18-28 41-28 67v536c0 27 11 50 28 68 17 17 41 27 67 27h607c26 0 49-10 67-27 17-18 28-41 28-68v-536c0-26-11-49-28-67-18-17-41-28-67-28z"/><path stroke="#A9A8A4" stroke-width="20" d="M706 295l-68 281"/><path stroke="#E47474" stroke-width="20" d="M316 648l390-353M141 435l175 213"/><path stroke="#C9A741" stroke-width="20" d="M319 151l-178 284M706 295l-387-144"/><g fill="#040405"><path d="M319 111c22 0 40 18 40 40s-18 40-40 40-40-18-40-40 18-40 40-40zM141 395c22 0 40 18 40 40s-18 40-40 40c-23 0-41-18-41-40s18-40 41-40zM316 608c22 0 40 18 40 40 0 23-18 41-40 41s-40-18-40-41c0-22 18-40 40-40zM706 254c22 0 40 18 40 41 0 22-18 40-40 40s-40-18-40-40c0-23 18-41 40-41zM638 536c22 0 40 18 40 40s-18 40-40 40-40-18-40-40 18-40 40-40z"/></g></g></svg>

static/admin/img/icon-addlink.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#5fa225" d="M1600 796v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/>
+</svg>

static/admin/img/icon-alert.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#efb80b" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/>
+</svg>

static/admin/img/icon-calendar.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="32" viewBox="0 0 1792 3584" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="icon">
+      <path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z"/>
+    </g>
+  </defs>
+  <use xlink:href="#icon" x="0" y="0" fill="#447e9b" />
+  <use xlink:href="#icon" x="0" y="1792" fill="#003366" />
+</svg>

static/admin/img/icon-changelink.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#b48c08" d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"/>
+</svg>

static/admin/img/icon-clock.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="32" viewBox="0 0 1792 3584" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="icon">
+      <path d="M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+  </defs>
+  <use xlink:href="#icon" x="0" y="0" fill="#447e9b" />
+  <use xlink:href="#icon" x="0" y="1792" fill="#003366" />
+</svg>

static/admin/img/icon-deletelink.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#dd4646" d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
+</svg>

static/admin/img/icon-hidelink.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#2b70bf" d="m555 1335 78-141q-87-63-136-159t-49-203q0-121 61-225-229 117-381 353 167 258 427 375zm389-759q0-20-14-34t-34-14q-125 0-214.5 89.5T592 832q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm363-191q0 7-1 9-105 188-315 566t-316 567l-49 89q-10 16-28 16-12 0-134-70-16-10-16-28 0-12 44-87-143-65-263.5-173T20 1029Q0 998 0 960t20-69q153-235 380-371t496-136q89 0 180 17l54-97q10-16 28-16 5 0 18 6t31 15.5 33 18.5 31.5 18.5T1291 358q16 10 16 27zm37 447q0 139-79 253.5T1056 1250l280-502q8 45 8 84zm448 128q0 35-20 69-39 64-109 145-150 172-347.5 267T896 1536l74-132q212-18 392.5-137T1664 960q-115-179-282-294l63-112q95 64 182.5 153T1772 891q20 34 20 69z"/>
+</svg>

static/admin/img/icon-no.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#dd4646" d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>

static/admin/img/icon-unknown-alt.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>

static/admin/img/icon-unknown.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#666666" d="M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>

static/admin/img/icon-viewlink.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#2b70bf" d="M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z"/>
+</svg>

static/admin/img/icon-yes.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#70bf2b" d="M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>

static/admin/img/inline-delete.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#999999" d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+</svg>

static/admin/img/search.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#555555" d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"/>
+</svg>

static/admin/img/selector-icons.svg

@@ -0,0 +1,34 @@
+<svg width="16" height="192" viewBox="0 0 1792 21504" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="up">
+      <path d="M1412 895q0-27-18-45l-362-362-91-91q-18-18-45-18t-45 18l-91 91-362 362q-18 18-18 45t18 45l91 91q18 18 45 18t45-18l189-189v502q0 26 19 45t45 19h128q26 0 45-19t19-45v-502l189 189q19 19 45 19t45-19l91-91q18-18 18-45zm252 1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="down">
+      <path d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="left">
+      <path d="M1408 960v-128q0-26-19-45t-45-19h-502l189-189q19-19 19-45t-19-45l-91-91q-18-18-45-18t-45 18l-362 362-91 91q-18 18-18 45t18 45l91 91 362 362q18 18 45 18t45-18l91-91q18-18 18-45t-18-45l-189-189h502q26 0 45-19t19-45zm256-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="right">
+      <path d="M1413 896q0-27-18-45l-91-91-362-362q-18-18-45-18t-45 18l-91 91q-18 18-18 45t18 45l189 189h-502q-26 0-45 19t-19 45v128q0 26 19 45t45 19h502l-189 189q-19 19-19 45t19 45l91 91q18 18 45 18t45-18l362-362 91-91q18-18 18-45zm251 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="clearall">
+      <path transform="translate(336, 336) scale(0.75)" d="M1037 1395l102-102q19-19 19-45t-19-45l-307-307 307-307q19-19 19-45t-19-45l-102-102q-19-19-45-19t-45 19l-454 454q-19 19-19 45t19 45l454 454q19 19 45 19t45-19zm627-499q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+    <g id="chooseall">
+      <path transform="translate(336, 336) scale(0.75)" d="M845 1395l454-454q19-19 19-45t-19-45l-454-454q-19-19-45-19t-45 19l-102 102q-19 19-19 45t19 45l307 307-307 307q-19 19-19 45t19 45l102 102q19 19 45 19t45-19zm819-499q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </g>
+  </defs>
+  <use xlink:href="#up" x="0" y="0" fill="#666666" />
+  <use xlink:href="#up" x="0" y="1792" fill="#447e9b" />
+  <use xlink:href="#down" x="0" y="3584" fill="#666666" />
+  <use xlink:href="#down" x="0" y="5376" fill="#447e9b" />
+  <use xlink:href="#left" x="0" y="7168" fill="#666666" />
+  <use xlink:href="#left" x="0" y="8960" fill="#447e9b" />
+  <use xlink:href="#right" x="0" y="10752" fill="#666666" />
+  <use xlink:href="#right" x="0" y="12544" fill="#447e9b" />
+  <use xlink:href="#clearall" x="0" y="14336" fill="#666666" />
+  <use xlink:href="#clearall" x="0" y="16128" fill="#447e9b" />
+  <use xlink:href="#chooseall" x="0" y="17920" fill="#666666" />
+  <use xlink:href="#chooseall" x="0" y="19712" fill="#447e9b" />
+</svg>

static/admin/img/sorting-icons.svg

@@ -0,0 +1,19 @@
+<svg width="14" height="84" viewBox="0 0 1792 10752" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="sort">
+      <path d="M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45zm0-384q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
+    </g>
+    <g id="ascending">
+      <path d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
+    </g>
+    <g id="descending">
+      <path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+    </g>
+  </defs>
+  <use xlink:href="#sort" x="0" y="0" fill="#999999" />
+  <use xlink:href="#sort" x="0" y="1792" fill="#447e9b" />
+  <use xlink:href="#ascending" x="0" y="3584" fill="#999999" />
+  <use xlink:href="#ascending" x="0" y="5376" fill="#447e9b" />
+  <use xlink:href="#descending" x="0" y="7168" fill="#999999" />
+  <use xlink:href="#descending" x="0" y="8960" fill="#447e9b" />
+</svg>

static/admin/img/tooltag-add.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/>
+</svg>

static/admin/img/tooltag-arrowright.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"/>
+</svg>

static/admin/js/SelectBox.js

@@ -0,0 +1,116 @@
+'use strict';
+{
+    const SelectBox = {
+        cache: {},
+        init: function(id) {
+            const box = document.getElementById(id);
+            SelectBox.cache[id] = [];
+            const cache = SelectBox.cache[id];
+            for (const node of box.options) {
+                cache.push({value: node.value, text: node.text, displayed: 1});
+            }
+        },
+        redisplay: function(id) {
+            // Repopulate HTML select box from cache
+            const box = document.getElementById(id);
+            const scroll_value_from_top = box.scrollTop;
+            box.innerHTML = '';
+            for (const node of SelectBox.cache[id]) {
+                if (node.displayed) {
+                    const new_option = new Option(node.text, node.value, false, false);
+                    // Shows a tooltip when hovering over the option
+                    new_option.title = node.text;
+                    box.appendChild(new_option);
+                }
+            }
+            box.scrollTop = scroll_value_from_top;
+        },
+        filter: function(id, text) {
+            // Redisplay the HTML select box, displaying only the choices containing ALL
+            // the words in text. (It's an AND search.)
+            const tokens = text.toLowerCase().split(/\s+/);
+            for (const node of SelectBox.cache[id]) {
+                node.displayed = 1;
+                const node_text = node.text.toLowerCase();
+                for (const token of tokens) {
+                    if (!node_text.includes(token)) {
+                        node.displayed = 0;
+                        break; // Once the first token isn't found we're done
+                    }
+                }
+            }
+            SelectBox.redisplay(id);
+        },
+        get_hidden_node_count(id) {
+            const cache = SelectBox.cache[id] || [];
+            return cache.filter(node => node.displayed === 0).length;
+        },
+        delete_from_cache: function(id, value) {
+            let delete_index = null;
+            const cache = SelectBox.cache[id];
+            for (const [i, node] of cache.entries()) {
+                if (node.value === value) {
+                    delete_index = i;
+                    break;
+                }
+            }
+            cache.splice(delete_index, 1);
+        },
+        add_to_cache: function(id, option) {
+            SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1});
+        },
+        cache_contains: function(id, value) {
+            // Check if an item is contained in the cache
+            for (const node of SelectBox.cache[id]) {
+                if (node.value === value) {
+                    return true;
+                }
+            }
+            return false;
+        },
+        move: function(from, to) {
+            const from_box = document.getElementById(from);
+            for (const option of from_box.options) {
+                const option_value = option.value;
+                if (option.selected && SelectBox.cache_contains(from, option_value)) {
+                    SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
+                    SelectBox.delete_from_cache(from, option_value);
+                }
+            }
+            SelectBox.redisplay(from);
+            SelectBox.redisplay(to);
+        },
+        move_all: function(from, to) {
+            const from_box = document.getElementById(from);
+            for (const option of from_box.options) {
+                const option_value = option.value;
+                if (SelectBox.cache_contains(from, option_value)) {
+                    SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
+                    SelectBox.delete_from_cache(from, option_value);
+                }
+            }
+            SelectBox.redisplay(from);
+            SelectBox.redisplay(to);
+        },
+        sort: function(id) {
+            SelectBox.cache[id].sort(function(a, b) {
+                a = a.text.toLowerCase();
+                b = b.text.toLowerCase();
+                if (a > b) {
+                    return 1;
+                }
+                if (a < b) {
+                    return -1;
+                }
+                return 0;
+            } );
+        },
+        select_all: function(id) {
+            const box = document.getElementById(id);
+            for (const option of box.options) {
+                option.selected = true;
+            }
+        }
+    };
+    window.SelectBox = SelectBox;
+}

static/admin/js/SelectFilter2.js

@@ -0,0 +1,311 @@
+/*global SelectBox, gettext, ngettext, interpolate, quickElement, SelectFilter*/
+/*
+SelectFilter2 - Turns a multiple-select box into a filter interface.
+
+Requires core.js and SelectBox.js.
+*/
+'use strict';
+{
+    window.SelectFilter = {
+        init: function(field_id, field_name, is_stacked) {
+            if (field_id.match(/__prefix__/)) {
+                // Don't initialize on empty forms.
+                return;
+            }
+            const from_box = document.getElementById(field_id);
+            from_box.id += '_from'; // change its ID
+            from_box.className = 'filtered';
+            from_box.setAttribute('aria-labelledby', field_id + '_from_title');
+
+            for (const p of from_box.parentNode.getElementsByTagName('p')) {
+                if (p.classList.contains("info")) {
+                    // Remove <p class="info">, because it just gets in the way.
+                    from_box.parentNode.removeChild(p);
+                } else if (p.classList.contains("help")) {
+                    // Move help text up to the top so it isn't below the select
+                    // boxes or wrapped off on the side to the right of the add
+                    // button:
+                    from_box.parentNode.insertBefore(p, from_box.parentNode.firstChild);
+                }
+            }
+
+            // <div class="selector"> or <div class="selector stacked">
+            const selector_div = quickElement('div', from_box.parentNode);
+            // Make sure the selector div is at the beginning so that the
+            // add link would be displayed to the right of the widget.
+            from_box.parentNode.prepend(selector_div);
+            selector_div.className = is_stacked ? 'selector stacked' : 'selector';
+
+            // <div class="selector-available">
+            const selector_available = quickElement('div', selector_div);
+            selector_available.className = 'selector-available';
+            const selector_available_title = quickElement('div', selector_available);
+            selector_available_title.id = field_id + '_from_title';
+            selector_available_title.className = 'selector-available-title';
+            quickElement('label', selector_available_title, interpolate(gettext('Available %s') + ' ', [field_name]), 'for', field_id + '_from');
+            quickElement(
+                'p',
+                selector_available_title,
+                interpolate(gettext('Choose %s by selecting them and then select the "Choose" arrow button.'), [field_name]),
+                'class', 'helptext'
+            );
+
+            const filter_p = quickElement('p', selector_available, '', 'id', field_id + '_filter');
+            filter_p.className = 'selector-filter';
+
+            const search_filter_label = quickElement('label', filter_p, '', 'for', field_id + '_input');
+
+            quickElement(
+                'span', search_filter_label, '',
+                'class', 'help-tooltip search-label-icon',
+                'aria-label', interpolate(gettext("Type into this box to filter down the list of available %s."), [field_name])
+            );
+
+            filter_p.appendChild(document.createTextNode(' '));
+
+            const filter_input = quickElement('input', filter_p, '', 'type', 'text', 'placeholder', gettext("Filter"));
+            filter_input.id = field_id + '_input';
+
+            selector_available.appendChild(from_box);
+            const choose_all = quickElement(
+                'button',
+                selector_available,
+                interpolate(gettext('Choose all %s'), [field_name]),
+                'id', field_id + '_add_all',
+                'class', 'selector-chooseall',
+                'type', 'button'
+            );
+
+            // <ul class="selector-chooser">
+            const selector_chooser = quickElement('ul', selector_div);
+            selector_chooser.className = 'selector-chooser';
+            const add_button = quickElement(
+                'button',
+                quickElement('li', selector_chooser),
+                interpolate(gettext('Choose selected %s'), [field_name]),
+                'id', field_id + '_add',
+                'class', 'selector-add',
+                'type', 'button'
+            );
+            const remove_button = quickElement(
+                'button',
+                quickElement('li', selector_chooser),
+                interpolate(gettext('Remove selected %s'), [field_name]),
+                'id', field_id + '_remove',
+                'class', 'selector-remove',
+                'type', 'button'
+            );
+
+            // <div class="selector-chosen">
+            const selector_chosen = quickElement('div', selector_div, '', 'id', field_id + '_selector_chosen');
+            selector_chosen.className = 'selector-chosen';
+            const selector_chosen_title = quickElement('div', selector_chosen);
+            selector_chosen_title.className = 'selector-chosen-title';
+            selector_chosen_title.id = field_id + '_to_title';
+            quickElement('label', selector_chosen_title, interpolate(gettext('Chosen %s') + ' ', [field_name]), 'for', field_id + '_to');
+            quickElement(
+                'p',
+                selector_chosen_title,
+                interpolate(gettext('Remove %s by selecting them and then select the "Remove" arrow button.'), [field_name]),
+                'class', 'helptext'
+            );
+            
+            const filter_selected_p = quickElement('p', selector_chosen, '', 'id', field_id + '_filter_selected');
+            filter_selected_p.className = 'selector-filter';
+
+            const search_filter_selected_label = quickElement('label', filter_selected_p, '', 'for', field_id + '_selected_input');
+
+            quickElement(
+                'span', search_filter_selected_label, '',
+                'class', 'help-tooltip search-label-icon',
+                'aria-label', interpolate(gettext("Type into this box to filter down the list of selected %s."), [field_name])
+            );
+
+            filter_selected_p.appendChild(document.createTextNode(' '));
+
+            const filter_selected_input = quickElement('input', filter_selected_p, '', 'type', 'text', 'placeholder', gettext("Filter"));
+            filter_selected_input.id = field_id + '_selected_input';
+
+            quickElement(
+                'select',
+                selector_chosen,
+                '',
+                'id', field_id + '_to',
+                'multiple', '',
+                'size', from_box.size,
+                'name', from_box.name,
+                'aria-labelledby', field_id + '_to_title',
+                'class', 'filtered'
+            );
+            const warning_footer = quickElement('div', selector_chosen, '', 'class', 'list-footer-display');
+            quickElement('span', warning_footer, '', 'id', field_id + '_list-footer-display-text');
+            quickElement('span', warning_footer, ' ' + gettext('(click to clear)'), 'class', 'list-footer-display__clear');
+            const clear_all = quickElement(
+                'button',
+                selector_chosen,
+                interpolate(gettext('Remove all %s'), [field_name]),
+                'id', field_id + '_remove_all',
+                'class', 'selector-clearall',
+                'type', 'button'
+            );
+
+            from_box.name = from_box.name + '_old';
+
+            // Set up the JavaScript event handlers for the select box filter interface
+            const move_selection = function(e, elem, move_func, from, to) {
+                if (!elem.hasAttribute('disabled')) {
+                    move_func(from, to);
+                    SelectFilter.refresh_icons(field_id);
+                    SelectFilter.refresh_filtered_selects(field_id);
+                    SelectFilter.refresh_filtered_warning(field_id);
+                }
+                e.preventDefault();
+            };
+            choose_all.addEventListener('click', function(e) {
+                move_selection(e, this, SelectBox.move_all, field_id + '_from', field_id + '_to');
+            });
+            add_button.addEventListener('click', function(e) {
+                move_selection(e, this, SelectBox.move, field_id + '_from', field_id + '_to');
+            });
+            remove_button.addEventListener('click', function(e) {
+                move_selection(e, this, SelectBox.move, field_id + '_to', field_id + '_from');
+            });
+            clear_all.addEventListener('click', function(e) {
+                move_selection(e, this, SelectBox.move_all, field_id + '_to', field_id + '_from');
+            });
+            warning_footer.addEventListener('click', function(e) {
+                filter_selected_input.value = '';
+                SelectBox.filter(field_id + '_to', '');
+                SelectFilter.refresh_filtered_warning(field_id);
+                SelectFilter.refresh_icons(field_id);
+            });
+            filter_input.addEventListener('keypress', function(e) {
+                SelectFilter.filter_key_press(e, field_id, '_from', '_to');
+            });
+            filter_input.addEventListener('keyup', function(e) {
+                SelectFilter.filter_key_up(e, field_id, '_from');
+            });
+            filter_input.addEventListener('keydown', function(e) {
+                SelectFilter.filter_key_down(e, field_id, '_from', '_to');
+            });
+            filter_selected_input.addEventListener('keypress', function(e) {
+                SelectFilter.filter_key_press(e, field_id, '_to', '_from');
+            });
+            filter_selected_input.addEventListener('keyup', function(e) {
+                SelectFilter.filter_key_up(e, field_id, '_to', '_selected_input');
+            });
+            filter_selected_input.addEventListener('keydown', function(e) {
+                SelectFilter.filter_key_down(e, field_id, '_to', '_from');
+            });
+            selector_div.addEventListener('change', function(e) {
+                if (e.target.tagName === 'SELECT') {
+                    SelectFilter.refresh_icons(field_id);
+                }
+            });
+            selector_div.addEventListener('dblclick', function(e) {
+                if (e.target.tagName === 'OPTION') {
+                    if (e.target.closest('select').id === field_id + '_to') {
+                        SelectBox.move(field_id + '_to', field_id + '_from');
+                    } else {
+                        SelectBox.move(field_id + '_from', field_id + '_to');
+                    }
+                    SelectFilter.refresh_icons(field_id);
+                }
+            });
+            from_box.closest('form').addEventListener('submit', function() {
+                SelectBox.filter(field_id + '_to', '');
+                SelectBox.select_all(field_id + '_to');
+            });
+            SelectBox.init(field_id + '_from');
+            SelectBox.init(field_id + '_to');
+            // Move selected from_box options to to_box
+            SelectBox.move(field_id + '_from', field_id + '_to');
+
+            // Initial icon refresh
+            SelectFilter.refresh_icons(field_id);
+        },
+        any_selected: function(field) {
+            // Temporarily add the required attribute and check validity.
+            field.required = true;
+            const any_selected = field.checkValidity();
+            field.required = false;
+            return any_selected;
+        },
+        refresh_filtered_warning: function(field_id) {
+            const count = SelectBox.get_hidden_node_count(field_id + '_to');
+            const selector = document.getElementById(field_id + '_selector_chosen');
+            const warning = document.getElementById(field_id + '_list-footer-display-text');
+            selector.className = selector.className.replace('selector-chosen--with-filtered', '');
+            warning.textContent = interpolate(ngettext(
+                '%s selected option not visible',
+                '%s selected options not visible',
+                count
+            ), [count]);
+            if(count > 0) {
+                selector.className += ' selector-chosen--with-filtered';
+            }
+        },
+        refresh_filtered_selects: function(field_id) {
+            SelectBox.filter(field_id + '_from', document.getElementById(field_id + "_input").value);
+            SelectBox.filter(field_id + '_to', document.getElementById(field_id + "_selected_input").value);
+        },
+        refresh_icons: function(field_id) {
+            const from = document.getElementById(field_id + '_from');
+            const to = document.getElementById(field_id + '_to');
+            // Disabled if no items are selected.
+            document.getElementById(field_id + '_add').disabled = !SelectFilter.any_selected(from);
+            document.getElementById(field_id + '_remove').disabled = !SelectFilter.any_selected(to);
+            // Disabled if the corresponding box is empty.
+            document.getElementById(field_id + '_add_all').disabled = !from.querySelector('option');
+            document.getElementById(field_id + '_remove_all').disabled = !to.querySelector('option');
+        },
+        filter_key_press: function(event, field_id, source, target) {
+            const source_box = document.getElementById(field_id + source);
+            // don't submit form if user pressed Enter
+            if ((event.which && event.which === 13) || (event.keyCode && event.keyCode === 13)) {
+                source_box.selectedIndex = 0;
+                SelectBox.move(field_id + source, field_id + target);
+                source_box.selectedIndex = 0;
+                event.preventDefault();
+            }
+        },
+        filter_key_up: function(event, field_id, source, filter_input) {
+            const input = filter_input || '_input';
+            const source_box = document.getElementById(field_id + source);
+            const temp = source_box.selectedIndex;
+            SelectBox.filter(field_id + source, document.getElementById(field_id + input).value);
+            source_box.selectedIndex = temp;
+            SelectFilter.refresh_filtered_warning(field_id);
+            SelectFilter.refresh_icons(field_id);
+        },
+        filter_key_down: function(event, field_id, source, target) {
+            const source_box = document.getElementById(field_id + source);
+            // right key (39) or left key (37)
+            const direction = source === '_from' ? 39 : 37;
+            // right arrow -- move across
+            if ((event.which && event.which === direction) || (event.keyCode && event.keyCode === direction)) {
+                const old_index = source_box.selectedIndex;
+                SelectBox.move(field_id + source, field_id + target);
+                SelectFilter.refresh_filtered_selects(field_id);
+                SelectFilter.refresh_filtered_warning(field_id);
+                source_box.selectedIndex = (old_index === source_box.length) ? source_box.length - 1 : old_index;
+                return;
+            }
+            // down arrow -- wrap around
+            if ((event.which && event.which === 40) || (event.keyCode && event.keyCode === 40)) {
+                source_box.selectedIndex = (source_box.length === source_box.selectedIndex + 1) ? 0 : source_box.selectedIndex + 1;
+            }
+            // up arrow -- wrap around
+            if ((event.which && event.which === 38) || (event.keyCode && event.keyCode === 38)) {
+                source_box.selectedIndex = (source_box.selectedIndex === 0) ? source_box.length - 1 : source_box.selectedIndex - 1;
+            }
+        }
+    };
+
+    window.addEventListener('load', function(e) {
+        document.querySelectorAll('select.selectfilter, select.selectfilterstacked').forEach(function(el) {
+            const data = el.dataset;
+            SelectFilter.init(el.id, data.fieldName, parseInt(data.isStacked, 10));
+        });
+    });
+}

static/admin/js/actions.js

@@ -0,0 +1,204 @@
+/*global gettext, interpolate, ngettext, Actions*/
+'use strict';
+{
+    function show(selector) {
+        document.querySelectorAll(selector).forEach(function(el) {
+            el.classList.remove('hidden');
+        });
+    }
+
+    function hide(selector) {
+        document.querySelectorAll(selector).forEach(function(el) {
+            el.classList.add('hidden');
+        });
+    }
+
+    function showQuestion(options) {
+        hide(options.acrossClears);
+        show(options.acrossQuestions);
+        hide(options.allContainer);
+    }
+
+    function showClear(options) {
+        show(options.acrossClears);
+        hide(options.acrossQuestions);
+        document.querySelector(options.actionContainer).classList.remove(options.selectedClass);
+        show(options.allContainer);
+        hide(options.counterContainer);
+    }
+
+    function reset(options) {
+        hide(options.acrossClears);
+        hide(options.acrossQuestions);
+        hide(options.allContainer);
+        show(options.counterContainer);
+    }
+
+    function clearAcross(options) {
+        reset(options);
+        const acrossInputs = document.querySelectorAll(options.acrossInput);
+        acrossInputs.forEach(function(acrossInput) {
+            acrossInput.value = 0;
+        });
+        document.querySelector(options.actionContainer).classList.remove(options.selectedClass);
+    }
+
+    function checker(actionCheckboxes, options, checked) {
+        if (checked) {
+            showQuestion(options);
+        } else {
+            reset(options);
+        }
+        actionCheckboxes.forEach(function(el) {
+            el.checked = checked;
+            el.closest('tr').classList.toggle(options.selectedClass, checked);
+        });
+    }
+
+    function updateCounter(actionCheckboxes, options) {
+        const sel = Array.from(actionCheckboxes).filter(function(el) {
+            return el.checked;
+        }).length;
+        const counter = document.querySelector(options.counterContainer);
+        // data-actions-icnt is defined in the generated HTML
+        // and contains the total amount of objects in the queryset
+        const actions_icnt = Number(counter.dataset.actionsIcnt);
+        counter.textContent = interpolate(
+            ngettext('%(sel)s of %(cnt)s selected', '%(sel)s of %(cnt)s selected', sel), {
+                sel: sel,
+                cnt: actions_icnt
+            }, true);
+        const allToggle = document.getElementById(options.allToggleId);
+        allToggle.checked = sel === actionCheckboxes.length;
+        if (allToggle.checked) {
+            showQuestion(options);
+        } else {
+            clearAcross(options);
+        }
+    }
+
+    const defaults = {
+        actionContainer: "div.actions",
+        counterContainer: "span.action-counter",
+        allContainer: "div.actions span.all",
+        acrossInput: "div.actions input.select-across",
+        acrossQuestions: "div.actions span.question",
+        acrossClears: "div.actions span.clear",
+        allToggleId: "action-toggle",
+        selectedClass: "selected"
+    };
+
+    window.Actions = function(actionCheckboxes, options) {
+        options = Object.assign({}, defaults, options);
+        let list_editable_changed = false;
+        let lastChecked = null;
+        let shiftPressed = false;
+
+        document.addEventListener('keydown', (event) => {
+            shiftPressed = event.shiftKey;
+        });
+
+        document.addEventListener('keyup', (event) => {
+            shiftPressed = event.shiftKey;
+        });
+
+        document.getElementById(options.allToggleId).addEventListener('click', function(event) {
+            checker(actionCheckboxes, options, this.checked);
+            updateCounter(actionCheckboxes, options);
+        });
+
+        document.querySelectorAll(options.acrossQuestions + " a").forEach(function(el) {
+            el.addEventListener('click', function(event) {
+                event.preventDefault();
+                const acrossInputs = document.querySelectorAll(options.acrossInput);
+                acrossInputs.forEach(function(acrossInput) {
+                    acrossInput.value = 1;
+                });
+                showClear(options);
+            });
+        });
+
+        document.querySelectorAll(options.acrossClears + " a").forEach(function(el) {
+            el.addEventListener('click', function(event) {
+                event.preventDefault();
+                document.getElementById(options.allToggleId).checked = false;
+                clearAcross(options);
+                checker(actionCheckboxes, options, false);
+                updateCounter(actionCheckboxes, options);
+            });
+        });
+
+        function affectedCheckboxes(target, withModifier) {
+            const multiSelect = (lastChecked && withModifier && lastChecked !== target);
+            if (!multiSelect) {
+                return [target];
+            }
+            const checkboxes = Array.from(actionCheckboxes);
+            const targetIndex = checkboxes.findIndex(el => el === target);
+            const lastCheckedIndex = checkboxes.findIndex(el => el === lastChecked);
+            const startIndex = Math.min(targetIndex, lastCheckedIndex);
+            const endIndex = Math.max(targetIndex, lastCheckedIndex);
+            const filtered = checkboxes.filter((el, index) => (startIndex <= index) && (index <= endIndex));
+            return filtered;
+        };
+
+        Array.from(document.getElementById('result_list').tBodies).forEach(function(el) {
+            el.addEventListener('change', function(event) {
+                const target = event.target;
+                if (target.classList.contains('action-select')) {
+                    const checkboxes = affectedCheckboxes(target, shiftPressed);
+                    checker(checkboxes, options, target.checked);
+                    updateCounter(actionCheckboxes, options);
+                    lastChecked = target;
+                } else {
+                    list_editable_changed = true;
+                }
+            });
+        });
+
+        document.querySelector('#changelist-form button[name=index]').addEventListener('click', function(event) {
+            if (list_editable_changed) {
+                const confirmed = confirm(gettext("You have unsaved changes on individual editable fields. If you run an action, your unsaved changes will be lost."));
+                if (!confirmed) {
+                    event.preventDefault();
+                }
+            }
+        });
+
+        const el = document.querySelector('#changelist-form input[name=_save]');
+        // The button does not exist if no fields are editable.
+        if (el) {
+            el.addEventListener('click', function(event) {
+                if (document.querySelector('[name=action]').value) {
+                    const text = list_editable_changed
+                        ? gettext("You have selected an action, but you haven’t saved your changes to individual fields yet. Please click OK to save. You’ll need to re-run the action.")
+                        : gettext("You have selected an action, and you haven’t made any changes on individual fields. You’re probably looking for the Go button rather than the Save button.");
+                    if (!confirm(text)) {
+                        event.preventDefault();
+                    }
+                }
+            });
+        }
+        // Sync counter when navigating to the page, such as through the back
+        // button.
+        window.addEventListener('pageshow', (event) => updateCounter(actionCheckboxes, options));
+    };
+
+    // Call function fn when the DOM is loaded and ready. If it is already
+    // loaded, call the function now.
+    // http://youmightnotneedjquery.com/#ready
+    function ready(fn) {
+        if (document.readyState !== 'loading') {
+            fn();
+        } else {
+            document.addEventListener('DOMContentLoaded', fn);
+        }
+    }
+
+    ready(function() {
+        const actionsEls = document.querySelectorAll('tr input.action-select');
+        if (actionsEls.length > 0) {
+            Actions(actionsEls);
+        }
+    });
+}

static/admin/js/admin/DateTimeShortcuts.js

@@ -0,0 +1,408 @@
+/*global Calendar, findPosX, findPosY, get_format, gettext, gettext_noop, interpolate, ngettext, quickElement*/
+// Inserts shortcut buttons after all of the following:
+//     <input type="text" class="vDateField">
+//     <input type="text" class="vTimeField">
+'use strict';
+{
+    const DateTimeShortcuts = {
+        calendars: [],
+        calendarInputs: [],
+        clockInputs: [],
+        clockHours: {
+            default_: [
+                [gettext_noop('Now'), -1],
+                [gettext_noop('Midnight'), 0],
+                [gettext_noop('6 a.m.'), 6],
+                [gettext_noop('Noon'), 12],
+                [gettext_noop('6 p.m.'), 18]
+            ]
+        },
+        dismissClockFunc: [],
+        dismissCalendarFunc: [],
+        calendarDivName1: 'calendarbox', // name of calendar <div> that gets toggled
+        calendarDivName2: 'calendarin', // name of <div> that contains calendar
+        calendarLinkName: 'calendarlink', // name of the link that is used to toggle
+        clockDivName: 'clockbox', // name of clock <div> that gets toggled
+        clockLinkName: 'clocklink', // name of the link that is used to toggle
+        shortCutsClass: 'datetimeshortcuts', // class of the clock and cal shortcuts
+        timezoneWarningClass: 'timezonewarning', // class of the warning for timezone mismatch
+        timezoneOffset: 0,
+        init: function() {
+            const serverOffset = document.body.dataset.adminUtcOffset;
+            if (serverOffset) {
+                const localOffset = new Date().getTimezoneOffset() * -60;
+                DateTimeShortcuts.timezoneOffset = localOffset - serverOffset;
+            }
+
+            for (const inp of document.getElementsByTagName('input')) {
+                if (inp.type === 'text' && inp.classList.contains('vTimeField')) {
+                    DateTimeShortcuts.addClock(inp);
+                    DateTimeShortcuts.addTimezoneWarning(inp);
+                }
+                else if (inp.type === 'text' && inp.classList.contains('vDateField')) {
+                    DateTimeShortcuts.addCalendar(inp);
+                    DateTimeShortcuts.addTimezoneWarning(inp);
+                }
+            }
+        },
+        // Return the current time while accounting for the server timezone.
+        now: function() {
+            const serverOffset = document.body.dataset.adminUtcOffset;
+            if (serverOffset) {
+                const localNow = new Date();
+                const localOffset = localNow.getTimezoneOffset() * -60;
+                localNow.setTime(localNow.getTime() + 1000 * (serverOffset - localOffset));
+                return localNow;
+            } else {
+                return new Date();
+            }
+        },
+        // Add a warning when the time zone in the browser and backend do not match.
+        addTimezoneWarning: function(inp) {
+            const warningClass = DateTimeShortcuts.timezoneWarningClass;
+            let timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600;
+
+            // Only warn if there is a time zone mismatch.
+            if (!timezoneOffset) {
+                return;
+            }
+
+            // Check if warning is already there.
+            if (inp.parentNode.querySelectorAll('.' + warningClass).length) {
+                return;
+            }
+
+            let message;
+            if (timezoneOffset > 0) {
+                message = ngettext(
+                    'Note: You are %s hour ahead of server time.',
+                    'Note: You are %s hours ahead of server time.',
+                    timezoneOffset
+                );
+            }
+            else {
+                timezoneOffset *= -1;
+                message = ngettext(
+                    'Note: You are %s hour behind server time.',
+                    'Note: You are %s hours behind server time.',
+                    timezoneOffset
+                );
+            }
+            message = interpolate(message, [timezoneOffset]);
+
+            const warning = document.createElement('div');
+            warning.classList.add('help', warningClass);
+            warning.textContent = message;
+            inp.parentNode.appendChild(warning);
+        },
+        // Add clock widget to a given field
+        addClock: function(inp) {
+            const num = DateTimeShortcuts.clockInputs.length;
+            DateTimeShortcuts.clockInputs[num] = inp;
+            DateTimeShortcuts.dismissClockFunc[num] = function() { DateTimeShortcuts.dismissClock(num); return true; };
+
+            // Shortcut links (clock icon and "Now" link)
+            const shortcuts_span = document.createElement('span');
+            shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
+            inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
+            const now_link = document.createElement('a');
+            now_link.href = "#";
+            now_link.textContent = gettext('Now');
+            now_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleClockQuicklink(num, -1);
+            });
+            const clock_link = document.createElement('a');
+            clock_link.href = '#';
+            clock_link.id = DateTimeShortcuts.clockLinkName + num;
+            clock_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                // avoid triggering the document click handler to dismiss the clock
+                e.stopPropagation();
+                DateTimeShortcuts.openClock(num);
+            });
+
+            quickElement(
+                'span', clock_link, '',
+                'class', 'clock-icon',
+                'title', gettext('Choose a Time')
+            );
+            shortcuts_span.appendChild(document.createTextNode('\u00A0'));
+            shortcuts_span.appendChild(now_link);
+            shortcuts_span.appendChild(document.createTextNode('\u00A0|\u00A0'));
+            shortcuts_span.appendChild(clock_link);
+
+            // Create clock link div
+            //
+            // Markup looks like:
+            // <div id="clockbox1" class="clockbox module">
+            //     <h2>Choose a time</h2>
+            //     <ul class="timelist">
+            //         <li><a href="#">Now</a></li>
+            //         <li><a href="#">Midnight</a></li>
+            //         <li><a href="#">6 a.m.</a></li>
+            //         <li><a href="#">Noon</a></li>
+            //         <li><a href="#">6 p.m.</a></li>
+            //     </ul>
+            //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
+            // </div>
+
+            const clock_box = document.createElement('div');
+            clock_box.style.display = 'none';
+            clock_box.style.position = 'absolute';
+            clock_box.className = 'clockbox module';
+            clock_box.id = DateTimeShortcuts.clockDivName + num;
+            document.body.appendChild(clock_box);
+            clock_box.addEventListener('click', function(e) { e.stopPropagation(); });
+
+            quickElement('h2', clock_box, gettext('Choose a time'));
+            const time_list = quickElement('ul', clock_box);
+            time_list.className = 'timelist';
+            // The list of choices can be overridden in JavaScript like this:
+            // DateTimeShortcuts.clockHours.name = [['3 a.m.', 3]];
+            // where name is the name attribute of the <input>.
+            const name = typeof DateTimeShortcuts.clockHours[inp.name] === 'undefined' ? 'default_' : inp.name;
+            DateTimeShortcuts.clockHours[name].forEach(function(element) {
+                const time_link = quickElement('a', quickElement('li', time_list), gettext(element[0]), 'href', '#');
+                time_link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    DateTimeShortcuts.handleClockQuicklink(num, element[1]);
+                });
+            });
+
+            const cancel_p = quickElement('p', clock_box);
+            cancel_p.className = 'calendar-cancel';
+            const cancel_link = quickElement('a', cancel_p, gettext('Cancel'), 'href', '#');
+            cancel_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.dismissClock(num);
+            });
+
+            document.addEventListener('keyup', function(event) {
+                if (event.which === 27) {
+                    // ESC key closes popup
+                    DateTimeShortcuts.dismissClock(num);
+                    event.preventDefault();
+                }
+            });
+        },
+        openClock: function(num) {
+            const clock_box = document.getElementById(DateTimeShortcuts.clockDivName + num);
+            const clock_link = document.getElementById(DateTimeShortcuts.clockLinkName + num);
+
+            // Recalculate the clockbox position
+            // is it left-to-right or right-to-left layout ?
+            if (window.getComputedStyle(document.body).direction !== 'rtl') {
+                clock_box.style.left = findPosX(clock_link) + 17 + 'px';
+            }
+            else {
+                // since style's width is in em, it'd be tough to calculate
+                // px value of it. let's use an estimated px for now
+                clock_box.style.left = findPosX(clock_link) - 110 + 'px';
+            }
+            clock_box.style.top = Math.max(0, findPosY(clock_link) - 30) + 'px';
+
+            // Show the clock box
+            clock_box.style.display = 'block';
+            document.addEventListener('click', DateTimeShortcuts.dismissClockFunc[num]);
+        },
+        dismissClock: function(num) {
+            document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
+            document.removeEventListener('click', DateTimeShortcuts.dismissClockFunc[num]);
+        },
+        handleClockQuicklink: function(num, val) {
+            let d;
+            if (val === -1) {
+                d = DateTimeShortcuts.now();
+            }
+            else {
+                d = new Date(1970, 1, 1, val, 0, 0, 0);
+            }
+            DateTimeShortcuts.clockInputs[num].value = d.strftime(get_format('TIME_INPUT_FORMATS')[0]);
+            DateTimeShortcuts.clockInputs[num].focus();
+            DateTimeShortcuts.dismissClock(num);
+        },
+        // Add calendar widget to a given field.
+        addCalendar: function(inp) {
+            const num = DateTimeShortcuts.calendars.length;
+
+            DateTimeShortcuts.calendarInputs[num] = inp;
+            DateTimeShortcuts.dismissCalendarFunc[num] = function() { DateTimeShortcuts.dismissCalendar(num); return true; };
+
+            // Shortcut links (calendar icon and "Today" link)
+            const shortcuts_span = document.createElement('span');
+            shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
+            inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
+            const today_link = document.createElement('a');
+            today_link.href = '#';
+            today_link.appendChild(document.createTextNode(gettext('Today')));
+            today_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleCalendarQuickLink(num, 0);
+            });
+            const cal_link = document.createElement('a');
+            cal_link.href = '#';
+            cal_link.id = DateTimeShortcuts.calendarLinkName + num;
+            cal_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                // avoid triggering the document click handler to dismiss the calendar
+                e.stopPropagation();
+                DateTimeShortcuts.openCalendar(num);
+            });
+            quickElement(
+                'span', cal_link, '',
+                'class', 'date-icon',
+                'title', gettext('Choose a Date')
+            );
+            shortcuts_span.appendChild(document.createTextNode('\u00A0'));
+            shortcuts_span.appendChild(today_link);
+            shortcuts_span.appendChild(document.createTextNode('\u00A0|\u00A0'));
+            shortcuts_span.appendChild(cal_link);
+
+            // Create calendarbox div.
+            //
+            // Markup looks like:
+            //
+            // <div id="calendarbox3" class="calendarbox module">
+            //     <h2>
+            //           <a href="#" class="link-previous">&lsaquo;</a>
+            //           <a href="#" class="link-next">&rsaquo;</a> February 2003
+            //     </h2>
+            //     <div class="calendar" id="calendarin3">
+            //         <!-- (cal) -->
+            //     </div>
+            //     <div class="calendar-shortcuts">
+            //          <a href="#">Yesterday</a> | <a href="#">Today</a> | <a href="#">Tomorrow</a>
+            //     </div>
+            //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
+            // </div>
+            const cal_box = document.createElement('div');
+            cal_box.style.display = 'none';
+            cal_box.style.position = 'absolute';
+            cal_box.className = 'calendarbox module';
+            cal_box.id = DateTimeShortcuts.calendarDivName1 + num;
+            document.body.appendChild(cal_box);
+            cal_box.addEventListener('click', function(e) { e.stopPropagation(); });
+
+            // next-prev links
+            const cal_nav = quickElement('div', cal_box);
+            const cal_nav_prev = quickElement('a', cal_nav, '<', 'href', '#');
+            cal_nav_prev.className = 'calendarnav-previous';
+            cal_nav_prev.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.drawPrev(num);
+            });
+
+            const cal_nav_next = quickElement('a', cal_nav, '>', 'href', '#');
+            cal_nav_next.className = 'calendarnav-next';
+            cal_nav_next.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.drawNext(num);
+            });
+
+            // main box
+            const cal_main = quickElement('div', cal_box, '', 'id', DateTimeShortcuts.calendarDivName2 + num);
+            cal_main.className = 'calendar';
+            DateTimeShortcuts.calendars[num] = new Calendar(DateTimeShortcuts.calendarDivName2 + num, DateTimeShortcuts.handleCalendarCallback(num));
+            DateTimeShortcuts.calendars[num].drawCurrent();
+
+            // calendar shortcuts
+            const shortcuts = quickElement('div', cal_box);
+            shortcuts.className = 'calendar-shortcuts';
+            let day_link = quickElement('a', shortcuts, gettext('Yesterday'), 'href', '#');
+            day_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleCalendarQuickLink(num, -1);
+            });
+            shortcuts.appendChild(document.createTextNode('\u00A0|\u00A0'));
+            day_link = quickElement('a', shortcuts, gettext('Today'), 'href', '#');
+            day_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleCalendarQuickLink(num, 0);
+            });
+            shortcuts.appendChild(document.createTextNode('\u00A0|\u00A0'));
+            day_link = quickElement('a', shortcuts, gettext('Tomorrow'), 'href', '#');
+            day_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleCalendarQuickLink(num, +1);
+            });
+
+            // cancel bar
+            const cancel_p = quickElement('p', cal_box);
+            cancel_p.className = 'calendar-cancel';
+            const cancel_link = quickElement('a', cancel_p, gettext('Cancel'), 'href', '#');
+            cancel_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.dismissCalendar(num);
+            });
+            document.addEventListener('keyup', function(event) {
+                if (event.which === 27) {
+                    // ESC key closes popup
+                    DateTimeShortcuts.dismissCalendar(num);
+                    event.preventDefault();
+                }
+            });
+        },
+        openCalendar: function(num) {
+            const cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1 + num);
+            const cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName + num);
+            const inp = DateTimeShortcuts.calendarInputs[num];
+
+            // Determine if the current value in the input has a valid date.
+            // If so, draw the calendar with that date's year and month.
+            if (inp.value) {
+                const format = get_format('DATE_INPUT_FORMATS')[0];
+                const selected = inp.value.strptime(format);
+                const year = selected.getUTCFullYear();
+                const month = selected.getUTCMonth() + 1;
+                const re = /\d{4}/;
+                if (re.test(year.toString()) && month >= 1 && month <= 12) {
+                    DateTimeShortcuts.calendars[num].drawDate(month, year, selected);
+                }
+            }
+
+            // Recalculate the clockbox position
+            // is it left-to-right or right-to-left layout ?
+            if (window.getComputedStyle(document.body).direction !== 'rtl') {
+                cal_box.style.left = findPosX(cal_link) + 17 + 'px';
+            }
+            else {
+                // since style's width is in em, it'd be tough to calculate
+                // px value of it. let's use an estimated px for now
+                cal_box.style.left = findPosX(cal_link) - 180 + 'px';
+            }
+            cal_box.style.top = Math.max(0, findPosY(cal_link) - 75) + 'px';
+
+            cal_box.style.display = 'block';
+            document.addEventListener('click', DateTimeShortcuts.dismissCalendarFunc[num]);
+        },
+        dismissCalendar: function(num) {
+            document.getElementById(DateTimeShortcuts.calendarDivName1 + num).style.display = 'none';
+            document.removeEventListener('click', DateTimeShortcuts.dismissCalendarFunc[num]);
+        },
+        drawPrev: function(num) {
+            DateTimeShortcuts.calendars[num].drawPreviousMonth();
+        },
+        drawNext: function(num) {
+            DateTimeShortcuts.calendars[num].drawNextMonth();
+        },
+        handleCalendarCallback: function(num) {
+            const format = get_format('DATE_INPUT_FORMATS')[0];
+            return function(y, m, d) {
+                DateTimeShortcuts.calendarInputs[num].value = new Date(y, m - 1, d).strftime(format);
+                DateTimeShortcuts.calendarInputs[num].focus();
+                document.getElementById(DateTimeShortcuts.calendarDivName1 + num).style.display = 'none';
+            };
+        },
+        handleCalendarQuickLink: function(num, offset) {
+            const d = DateTimeShortcuts.now();
+            d.setDate(d.getDate() + offset);
+            DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]);
+            DateTimeShortcuts.calendarInputs[num].focus();
+            DateTimeShortcuts.dismissCalendar(num);
+        }
+    };
+
+    window.addEventListener('load', DateTimeShortcuts.init);
+    window.DateTimeShortcuts = DateTimeShortcuts;
+}

static/admin/js/admin/RelatedObjectLookups.js

@@ -0,0 +1,252 @@
+/*global SelectBox, interpolate*/
+// Handles related-objects functionality: lookup link for raw_id_fields
+// and Add Another links.
+'use strict';
+{
+    const $ = django.jQuery;
+    let popupIndex = 0;
+    const relatedWindows = [];
+
+    function dismissChildPopups() {
+        relatedWindows.forEach(function(win) {
+            if(!win.closed) {
+                win.dismissChildPopups();
+                win.close();    
+            }
+        });
+    }
+
+    function setPopupIndex() {
+        if(document.getElementsByName("_popup").length > 0) {
+            const index = window.name.lastIndexOf("__") + 2;
+            popupIndex = parseInt(window.name.substring(index));   
+        } else {
+            popupIndex = 0;
+        }
+    }
+
+    function addPopupIndex(name) {
+        return name + "__" + (popupIndex + 1);
+    }
+
+    function removePopupIndex(name) {
+        return name.replace(new RegExp("__" + (popupIndex + 1) + "$"), '');
+    }
+
+    function showAdminPopup(triggeringLink, name_regexp, add_popup) {
+        const name = addPopupIndex(triggeringLink.id.replace(name_regexp, ''));
+        const href = new URL(triggeringLink.href);
+        if (add_popup) {
+            href.searchParams.set('_popup', 1);
+        }
+        const win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
+        relatedWindows.push(win);
+        win.focus();
+        return false;
+    }
+
+    function showRelatedObjectLookupPopup(triggeringLink) {
+        return showAdminPopup(triggeringLink, /^lookup_/, true);
+    }
+
+    function dismissRelatedLookupPopup(win, chosenId) {
+        const name = removePopupIndex(win.name);
+        const elem = document.getElementById(name);
+        if (elem.classList.contains('vManyToManyRawIdAdminField') && elem.value) {
+            elem.value += ',' + chosenId;
+        } else {
+            elem.value = chosenId;
+        }
+        $(elem).trigger('change');
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
+        win.close();
+    }
+
+    function showRelatedObjectPopup(triggeringLink) {
+        return showAdminPopup(triggeringLink, /^(change|add|delete)_/, false);
+    }
+
+    function updateRelatedObjectLinks(triggeringLink) {
+        const $this = $(triggeringLink);
+        const siblings = $this.nextAll('.view-related, .change-related, .delete-related');
+        if (!siblings.length) {
+            return;
+        }
+        const value = $this.val();
+        if (value) {
+            siblings.each(function() {
+                const elm = $(this);
+                elm.attr('href', elm.attr('data-href-template').replace('__fk__', value));
+                elm.removeAttr('aria-disabled');
+            });
+        } else {
+            siblings.removeAttr('href');
+            siblings.attr('aria-disabled', true);
+        }
+    }
+
+    function updateRelatedSelectsOptions(currentSelect, win, objId, newRepr, newId, skipIds = []) {
+        // After create/edit a model from the options next to the current
+        // select (+ or :pencil:) update ForeignKey PK of the rest of selects
+        // in the page.
+
+        const path = win.location.pathname;
+        // Extract the model from the popup url '.../<model>/add/' or
+        // '.../<model>/<id>/change/' depending the action (add or change).
+        const modelName = path.split('/')[path.split('/').length - (objId ? 4 : 3)];
+        // Select elements with a specific model reference and context of "available-source".
+        const selectsRelated = document.querySelectorAll(`[data-model-ref="${modelName}"] [data-context="available-source"]`);
+
+        selectsRelated.forEach(function(select) {
+            if (currentSelect === select || skipIds && skipIds.includes(select.id)) {
+                return;
+            }
+
+            let option = select.querySelector(`option[value="${objId}"]`);
+
+            if (!option) {
+                option = new Option(newRepr, newId);
+                select.options.add(option);
+                // Update SelectBox cache for related fields.
+                if (window.SelectBox !== undefined && !SelectBox.cache[currentSelect.id]) {
+                    SelectBox.add_to_cache(select.id, option);
+                    SelectBox.redisplay(select.id);
+                }
+                return;
+            }
+
+            option.textContent = newRepr;
+            option.value = newId;
+        });
+    }
+
+    function dismissAddRelatedObjectPopup(win, newId, newRepr) {
+        const name = removePopupIndex(win.name);
+        const elem = document.getElementById(name);
+        if (elem) {
+            const elemName = elem.nodeName.toUpperCase();
+            if (elemName === 'SELECT') {
+                elem.options[elem.options.length] = new Option(newRepr, newId, true, true);
+                updateRelatedSelectsOptions(elem, win, null, newRepr, newId);
+            } else if (elemName === 'INPUT') {
+                if (elem.classList.contains('vManyToManyRawIdAdminField') && elem.value) {
+                    elem.value += ',' + newId;
+                } else {
+                    elem.value = newId;
+                }
+            }
+            // Trigger a change event to update related links if required.
+            $(elem).trigger('change');
+        } else {
+            const toId = name + "_to";
+            const toElem = document.getElementById(toId);
+            const o = new Option(newRepr, newId);
+            SelectBox.add_to_cache(toId, o);
+            SelectBox.redisplay(toId);
+            if (toElem && toElem.nodeName.toUpperCase() === 'SELECT') {
+                const skipIds = [name + "_from"];
+                updateRelatedSelectsOptions(toElem, win, null, newRepr, newId, skipIds);
+            }
+        }
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
+        win.close();
+    }
+
+    function dismissChangeRelatedObjectPopup(win, objId, newRepr, newId) {
+        const id = removePopupIndex(win.name.replace(/^edit_/, ''));
+        const selectsSelector = interpolate('#%s, #%s_from, #%s_to', [id, id, id]);
+        const selects = $(selectsSelector);
+        selects.find('option').each(function() {
+            if (this.value === objId) {
+                this.textContent = newRepr;
+                this.value = newId;
+            }
+        }).trigger('change');
+        updateRelatedSelectsOptions(selects[0], win, objId, newRepr, newId);
+        selects.next().find('.select2-selection__rendered').each(function() {
+            // The element can have a clear button as a child.
+            // Use the lastChild to modify only the displayed value.
+            this.lastChild.textContent = newRepr;
+            this.title = newRepr;
+        });
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
+        win.close();
+    }
+
+    function dismissDeleteRelatedObjectPopup(win, objId) {
+        const id = removePopupIndex(win.name.replace(/^delete_/, ''));
+        const selectsSelector = interpolate('#%s, #%s_from, #%s_to', [id, id, id]);
+        const selects = $(selectsSelector);
+        selects.find('option').each(function() {
+            if (this.value === objId) {
+                $(this).remove();
+            }
+        }).trigger('change');
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
+        win.close();
+    }
+
+    window.showRelatedObjectLookupPopup = showRelatedObjectLookupPopup;
+    window.dismissRelatedLookupPopup = dismissRelatedLookupPopup;
+    window.showRelatedObjectPopup = showRelatedObjectPopup;
+    window.updateRelatedObjectLinks = updateRelatedObjectLinks;
+    window.dismissAddRelatedObjectPopup = dismissAddRelatedObjectPopup;
+    window.dismissChangeRelatedObjectPopup = dismissChangeRelatedObjectPopup;
+    window.dismissDeleteRelatedObjectPopup = dismissDeleteRelatedObjectPopup;
+    window.dismissChildPopups = dismissChildPopups;
+    window.relatedWindows = relatedWindows;
+
+    // Kept for backward compatibility
+    window.showAddAnotherPopup = showRelatedObjectPopup;
+    window.dismissAddAnotherPopup = dismissAddRelatedObjectPopup;
+
+    window.addEventListener('unload', function(evt) {
+        window.dismissChildPopups();
+    });
+
+    $(document).ready(function() {
+        setPopupIndex();
+        $("a[data-popup-opener]").on('click', function(event) {
+            event.preventDefault();
+            opener.dismissRelatedLookupPopup(window, $(this).data("popup-opener"));
+        });
+        $('body').on('click', '.related-widget-wrapper-link[data-popup="yes"]', function(e) {
+            e.preventDefault();
+            if (this.href) {
+                const event = $.Event('django:show-related', {href: this.href});
+                $(this).trigger(event);
+                if (!event.isDefaultPrevented()) {
+                    showRelatedObjectPopup(this);
+                }
+            }
+        });
+        $('body').on('change', '.related-widget-wrapper select', function(e) {
+            const event = $.Event('django:update-related');
+            $(this).trigger(event);
+            if (!event.isDefaultPrevented()) {
+                updateRelatedObjectLinks(this);
+            }
+        });
+        $('.related-widget-wrapper select').trigger('change');
+        $('body').on('click', '.related-lookup', function(e) {
+            e.preventDefault();
+            const event = $.Event('django:lookup-related');
+            $(this).trigger(event);
+            if (!event.isDefaultPrevented()) {
+                showRelatedObjectLookupPopup(this);
+            }
+        });
+    });
+}

static/admin/js/autocomplete.js

@@ -0,0 +1,33 @@
+'use strict';
+{
+    const $ = django.jQuery;
+
+    $.fn.djangoAdminSelect2 = function() {
+        $.each(this, function(i, element) {
+            $(element).select2({
+                ajax: {
+                    data: (params) => {
+                        return {
+                            term: params.term,
+                            page: params.page,
+                            app_label: element.dataset.appLabel,
+                            model_name: element.dataset.modelName,
+                            field_name: element.dataset.fieldName
+                        };
+                    }
+                }
+            });
+        });
+        return this;
+    };
+
+    $(function() {
+        // Initialize all autocomplete widgets except the one in the template
+        // form used when a new formset is added.
+        $('.admin-autocomplete').not('[name*=__prefix__]').djangoAdminSelect2();
+    });
+
+    document.addEventListener('formset:added', (event) => {
+        $(event.target).find('.admin-autocomplete').djangoAdminSelect2();
+    });
+}

static/admin/js/calendar.js

@@ -0,0 +1,239 @@
+/*global gettext, pgettext, get_format, quickElement, removeChildren*/
+/*
+calendar.js - Calendar functions by Adrian Holovaty
+depends on core.js for utility functions like removeChildren or quickElement
+*/
+'use strict';
+{
+    // CalendarNamespace -- Provides a collection of HTML calendar-related helper functions
+    const CalendarNamespace = {
+        monthsOfYear: [
+            gettext('January'),
+            gettext('February'),
+            gettext('March'),
+            gettext('April'),
+            gettext('May'),
+            gettext('June'),
+            gettext('July'),
+            gettext('August'),
+            gettext('September'),
+            gettext('October'),
+            gettext('November'),
+            gettext('December')
+        ],
+        monthsOfYearAbbrev: [
+            pgettext('abbrev. month January', 'Jan'),
+            pgettext('abbrev. month February', 'Feb'),
+            pgettext('abbrev. month March', 'Mar'),
+            pgettext('abbrev. month April', 'Apr'),
+            pgettext('abbrev. month May', 'May'),
+            pgettext('abbrev. month June', 'Jun'),
+            pgettext('abbrev. month July', 'Jul'),
+            pgettext('abbrev. month August', 'Aug'),
+            pgettext('abbrev. month September', 'Sep'),
+            pgettext('abbrev. month October', 'Oct'),
+            pgettext('abbrev. month November', 'Nov'),
+            pgettext('abbrev. month December', 'Dec')
+        ],
+        daysOfWeek: [
+            gettext('Sunday'),
+            gettext('Monday'),
+            gettext('Tuesday'),
+            gettext('Wednesday'),
+            gettext('Thursday'),
+            gettext('Friday'),
+            gettext('Saturday')
+        ],
+        daysOfWeekAbbrev: [
+            pgettext('abbrev. day Sunday', 'Sun'),
+            pgettext('abbrev. day Monday', 'Mon'),
+            pgettext('abbrev. day Tuesday', 'Tue'),
+            pgettext('abbrev. day Wednesday', 'Wed'),
+            pgettext('abbrev. day Thursday', 'Thur'),
+            pgettext('abbrev. day Friday', 'Fri'),
+            pgettext('abbrev. day Saturday', 'Sat')
+        ],
+        daysOfWeekInitial: [
+            pgettext('one letter Sunday', 'S'),
+            pgettext('one letter Monday', 'M'),
+            pgettext('one letter Tuesday', 'T'),
+            pgettext('one letter Wednesday', 'W'),
+            pgettext('one letter Thursday', 'T'),
+            pgettext('one letter Friday', 'F'),
+            pgettext('one letter Saturday', 'S')
+        ],
+        firstDayOfWeek: parseInt(get_format('FIRST_DAY_OF_WEEK')),
+        isLeapYear: function(year) {
+            return (((year % 4) === 0) && ((year % 100) !== 0 ) || ((year % 400) === 0));
+        },
+        getDaysInMonth: function(month, year) {
+            let days;
+            if (month === 1 || month === 3 || month === 5 || month === 7 || month === 8 || month === 10 || month === 12) {
+                days = 31;
+            }
+            else if (month === 4 || month === 6 || month === 9 || month === 11) {
+                days = 30;
+            }
+            else if (month === 2 && CalendarNamespace.isLeapYear(year)) {
+                days = 29;
+            }
+            else {
+                days = 28;
+            }
+            return days;
+        },
+        draw: function(month, year, div_id, callback, selected) { // month = 1-12, year = 1-9999
+            const today = new Date();
+            const todayDay = today.getDate();
+            const todayMonth = today.getMonth() + 1;
+            const todayYear = today.getFullYear();
+            let todayClass = '';
+
+            // Use UTC functions here because the date field does not contain time
+            // and using the UTC function variants prevent the local time offset
+            // from altering the date, specifically the day field.  For example:
+            //
+            // ```
+            // var x = new Date('2013-10-02');
+            // var day = x.getDate();
+            // ```
+            //
+            // The day variable above will be 1 instead of 2 in, say, US Pacific time
+            // zone.
+            let isSelectedMonth = false;
+            if (typeof selected !== 'undefined') {
+                isSelectedMonth = (selected.getUTCFullYear() === year && (selected.getUTCMonth() + 1) === month);
+            }
+
+            month = parseInt(month);
+            year = parseInt(year);
+            const calDiv = document.getElementById(div_id);
+            removeChildren(calDiv);
+            const calTable = document.createElement('table');
+            quickElement('caption', calTable, CalendarNamespace.monthsOfYear[month - 1] + ' ' + year);
+            const tableBody = quickElement('tbody', calTable);
+
+            // Draw days-of-week header
+            let tableRow = quickElement('tr', tableBody);
+            for (let i = 0; i < 7; i++) {
+                quickElement('th', tableRow, CalendarNamespace.daysOfWeekInitial[(i + CalendarNamespace.firstDayOfWeek) % 7]);
+            }
+
+            const startingPos = new Date(year, month - 1, 1 - CalendarNamespace.firstDayOfWeek).getDay();
+            const days = CalendarNamespace.getDaysInMonth(month, year);
+
+            let nonDayCell;
+
+            // Draw blanks before first of month
+            tableRow = quickElement('tr', tableBody);
+            for (let i = 0; i < startingPos; i++) {
+                nonDayCell = quickElement('td', tableRow, ' ');
+                nonDayCell.className = "nonday";
+            }
+
+            function calendarMonth(y, m) {
+                function onClick(e) {
+                    e.preventDefault();
+                    callback(y, m, this.textContent);
+                }
+                return onClick;
+            }
+
+            // Draw days of month
+            let currentDay = 1;
+            for (let i = startingPos; currentDay <= days; i++) {
+                if (i % 7 === 0 && currentDay !== 1) {
+                    tableRow = quickElement('tr', tableBody);
+                }
+                if ((currentDay === todayDay) && (month === todayMonth) && (year === todayYear)) {
+                    todayClass = 'today';
+                } else {
+                    todayClass = '';
+                }
+
+                // use UTC function; see above for explanation.
+                if (isSelectedMonth && currentDay === selected.getUTCDate()) {
+                    if (todayClass !== '') {
+                        todayClass += " ";
+                    }
+                    todayClass += "selected";
+                }
+
+                const cell = quickElement('td', tableRow, '', 'class', todayClass);
+                const link = quickElement('a', cell, currentDay, 'href', '#');
+                link.addEventListener('click', calendarMonth(year, month));
+                currentDay++;
+            }
+
+            // Draw blanks after end of month (optional, but makes for valid code)
+            while (tableRow.childNodes.length < 7) {
+                nonDayCell = quickElement('td', tableRow, ' ');
+                nonDayCell.className = "nonday";
+            }
+
+            calDiv.appendChild(calTable);
+        }
+    };
+
+    // Calendar -- A calendar instance
+    function Calendar(div_id, callback, selected) {
+        // div_id (string) is the ID of the element in which the calendar will
+        //     be displayed
+        // callback (string) is the name of a JavaScript function that will be
+        //     called with the parameters (year, month, day) when a day in the
+        //     calendar is clicked
+        this.div_id = div_id;
+        this.callback = callback;
+        this.today = new Date();
+        this.currentMonth = this.today.getMonth() + 1;
+        this.currentYear = this.today.getFullYear();
+        if (typeof selected !== 'undefined') {
+            this.selected = selected;
+        }
+    }
+    Calendar.prototype = {
+        drawCurrent: function() {
+            CalendarNamespace.draw(this.currentMonth, this.currentYear, this.div_id, this.callback, this.selected);
+        },
+        drawDate: function(month, year, selected) {
+            this.currentMonth = month;
+            this.currentYear = year;
+
+            if(selected) {
+                this.selected = selected;
+            }
+
+            this.drawCurrent();
+        },
+        drawPreviousMonth: function() {
+            if (this.currentMonth === 1) {
+                this.currentMonth = 12;
+                this.currentYear--;
+            }
+            else {
+                this.currentMonth--;
+            }
+            this.drawCurrent();
+        },
+        drawNextMonth: function() {
+            if (this.currentMonth === 12) {
+                this.currentMonth = 1;
+                this.currentYear++;
+            }
+            else {
+                this.currentMonth++;
+            }
+            this.drawCurrent();
+        },
+        drawPreviousYear: function() {
+            this.currentYear--;
+            this.drawCurrent();
+        },
+        drawNextYear: function() {
+            this.currentYear++;
+            this.drawCurrent();
+        }
+    };
+    window.Calendar = Calendar;
+    window.CalendarNamespace = CalendarNamespace;
+}

static/admin/js/cancel.js

@@ -0,0 +1,29 @@
+'use strict';
+{
+    // Call function fn when the DOM is loaded and ready. If it is already
+    // loaded, call the function now.
+    // http://youmightnotneedjquery.com/#ready
+    function ready(fn) {
+        if (document.readyState !== 'loading') {
+            fn();
+        } else {
+            document.addEventListener('DOMContentLoaded', fn);
+        }
+    }
+
+    ready(function() {
+        function handleClick(event) {
+            event.preventDefault();
+            const params = new URLSearchParams(window.location.search);
+            if (params.has('_popup')) {
+                window.close(); // Close the popup.
+            } else {
+                window.history.back(); // Otherwise, go back.
+            }
+        }
+
+        document.querySelectorAll('.cancel-link').forEach(function(el) {
+            el.addEventListener('click', handleClick);
+        });
+    });
+}

static/admin/js/change_form.js

@@ -0,0 +1,16 @@
+'use strict';
+{
+    const inputTags = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
+    const modelName = document.getElementById('django-admin-form-add-constants').dataset.modelName;
+    if (modelName) {
+        const form = document.getElementById(modelName + '_form');
+        for (const element of form.elements) {
+            // HTMLElement.offsetParent returns null when the element is not
+            // rendered.
+            if (inputTags.includes(element.tagName) && !element.disabled && element.offsetParent) {
+                element.focus();
+                break;
+            }
+        }
+    }
+}

static/admin/js/core.js

@@ -0,0 +1,184 @@
+// Core JavaScript helper functions
+'use strict';
+
+// quickElement(tagType, parentReference [, textInChildNode, attribute, attributeValue ...]);
+function quickElement() {
+    const obj = document.createElement(arguments[0]);
+    if (arguments[2]) {
+        const textNode = document.createTextNode(arguments[2]);
+        obj.appendChild(textNode);
+    }
+    const len = arguments.length;
+    for (let i = 3; i < len; i += 2) {
+        obj.setAttribute(arguments[i], arguments[i + 1]);
+    }
+    arguments[1].appendChild(obj);
+    return obj;
+}
+
+// "a" is reference to an object
+function removeChildren(a) {
+    while (a.hasChildNodes()) {
+        a.removeChild(a.lastChild);
+    }
+}
+
+// ----------------------------------------------------------------------------
+// Find-position functions by PPK
+// See https://www.quirksmode.org/js/findpos.html
+// ----------------------------------------------------------------------------
+function findPosX(obj) {
+    let curleft = 0;
+    if (obj.offsetParent) {
+        while (obj.offsetParent) {
+            curleft += obj.offsetLeft - obj.scrollLeft;
+            obj = obj.offsetParent;
+        }
+    } else if (obj.x) {
+        curleft += obj.x;
+    }
+    return curleft;
+}
+
+function findPosY(obj) {
+    let curtop = 0;
+    if (obj.offsetParent) {
+        while (obj.offsetParent) {
+            curtop += obj.offsetTop - obj.scrollTop;
+            obj = obj.offsetParent;
+        }
+    } else if (obj.y) {
+        curtop += obj.y;
+    }
+    return curtop;
+}
+
+//-----------------------------------------------------------------------------
+// Date object extensions
+// ----------------------------------------------------------------------------
+{
+    Date.prototype.getTwelveHours = function() {
+        return this.getHours() % 12 || 12;
+    };
+
+    Date.prototype.getTwoDigitMonth = function() {
+        return (this.getMonth() < 9) ? '0' + (this.getMonth() + 1) : (this.getMonth() + 1);
+    };
+
+    Date.prototype.getTwoDigitDate = function() {
+        return (this.getDate() < 10) ? '0' + this.getDate() : this.getDate();
+    };
+
+    Date.prototype.getTwoDigitTwelveHour = function() {
+        return (this.getTwelveHours() < 10) ? '0' + this.getTwelveHours() : this.getTwelveHours();
+    };
+
+    Date.prototype.getTwoDigitHour = function() {
+        return (this.getHours() < 10) ? '0' + this.getHours() : this.getHours();
+    };
+
+    Date.prototype.getTwoDigitMinute = function() {
+        return (this.getMinutes() < 10) ? '0' + this.getMinutes() : this.getMinutes();
+    };
+
+    Date.prototype.getTwoDigitSecond = function() {
+        return (this.getSeconds() < 10) ? '0' + this.getSeconds() : this.getSeconds();
+    };
+
+    Date.prototype.getAbbrevDayName = function() {
+        return typeof window.CalendarNamespace === "undefined"
+            ? '0' + this.getDay()
+            : window.CalendarNamespace.daysOfWeekAbbrev[this.getDay()];
+    };
+
+    Date.prototype.getFullDayName = function() {
+        return typeof window.CalendarNamespace === "undefined"
+            ? '0' + this.getDay()
+            : window.CalendarNamespace.daysOfWeek[this.getDay()];
+    };
+
+    Date.prototype.getAbbrevMonthName = function() {
+        return typeof window.CalendarNamespace === "undefined"
+            ? this.getTwoDigitMonth()
+            : window.CalendarNamespace.monthsOfYearAbbrev[this.getMonth()];
+    };
+
+    Date.prototype.getFullMonthName = function() {
+        return typeof window.CalendarNamespace === "undefined"
+            ? this.getTwoDigitMonth()
+            : window.CalendarNamespace.monthsOfYear[this.getMonth()];
+    };
+
+    Date.prototype.strftime = function(format) {
+        const fields = {
+            a: this.getAbbrevDayName(),
+            A: this.getFullDayName(),
+            b: this.getAbbrevMonthName(),
+            B: this.getFullMonthName(),
+            c: this.toString(),
+            d: this.getTwoDigitDate(),
+            H: this.getTwoDigitHour(),
+            I: this.getTwoDigitTwelveHour(),
+            m: this.getTwoDigitMonth(),
+            M: this.getTwoDigitMinute(),
+            p: (this.getHours() >= 12) ? 'PM' : 'AM',
+            S: this.getTwoDigitSecond(),
+            w: '0' + this.getDay(),
+            x: this.toLocaleDateString(),
+            X: this.toLocaleTimeString(),
+            y: ('' + this.getFullYear()).substr(2, 4),
+            Y: '' + this.getFullYear(),
+            '%': '%'
+        };
+        let result = '', i = 0;
+        while (i < format.length) {
+            if (format.charAt(i) === '%') {
+                result += fields[format.charAt(i + 1)];
+                ++i;
+            }
+            else {
+                result += format.charAt(i);
+            }
+            ++i;
+        }
+        return result;
+    };
+
+    // ----------------------------------------------------------------------------
+    // String object extensions
+    // ----------------------------------------------------------------------------
+    String.prototype.strptime = function(format) {
+        const split_format = format.split(/[.\-/]/);
+        const date = this.split(/[.\-/]/);
+        let i = 0;
+        let day, month, year;
+        while (i < split_format.length) {
+            switch (split_format[i]) {
+            case "%d":
+                day = date[i];
+                break;
+            case "%m":
+                month = date[i] - 1;
+                break;
+            case "%Y":
+                year = date[i];
+                break;
+            case "%y":
+                // A %y value in the range of [00, 68] is in the current
+                // century, while [69, 99] is in the previous century,
+                // according to the Open Group Specification.
+                if (parseInt(date[i], 10) >= 69) {
+                    year = date[i];
+                } else {
+                    year = (new Date(Date.UTC(date[i], 0))).getUTCFullYear() + 100;
+                }
+                break;
+            }
+            ++i;
+        }
+        // Create Date object from UTC since the parsed value is supposed to be
+        // in UTC, not local time. Also, the calendar uses UTC functions for
+        // date extraction.
+        return new Date(Date.UTC(year, month, day));
+    };
+}

static/admin/js/filters.js

@@ -0,0 +1,30 @@
+/**
+ * Persist changelist filters state (collapsed/expanded).
+ */
+'use strict';
+{
+    // Init filters.
+    let filters = JSON.parse(sessionStorage.getItem('django.admin.filtersState'));
+
+    if (!filters) {
+        filters = {};
+    }
+
+    Object.entries(filters).forEach(([key, value]) => {
+        const detailElement = document.querySelector(`[data-filter-title='${CSS.escape(key)}']`);
+
+        // Check if the filter is present, it could be from other view.
+        if (detailElement) {
+            value ? detailElement.setAttribute('open', '') : detailElement.removeAttribute('open');
+        }
+    });
+
+    // Save filter state when clicks.
+    const details = document.querySelectorAll('details');
+    details.forEach(detail => {
+        detail.addEventListener('toggle', event => {
+            filters[`${event.target.dataset.filterTitle}`] = detail.open;
+            sessionStorage.setItem('django.admin.filtersState', JSON.stringify(filters));
+        });
+    });
+}

static/admin/js/inlines.js

@@ -0,0 +1,359 @@
+/*global DateTimeShortcuts, SelectFilter*/
+/**
+ * Django admin inlines
+ *
+ * Based on jQuery Formset 1.1
+ * @author Stanislaus Madueke (stan DOT madueke AT gmail DOT com)
+ * @requires jQuery 1.2.6 or later
+ *
+ * Copyright (c) 2009, Stanislaus Madueke
+ * All rights reserved.
+ *
+ * Spiced up with Code from Zain Memon's GSoC project 2009
+ * and modified for Django by Jannis Leidel, Travis Swicegood and Julien Phalip.
+ *
+ * Licensed under the New BSD License
+ * See: https://opensource.org/licenses/bsd-license.php
+ */
+'use strict';
+{
+    const $ = django.jQuery;
+    $.fn.formset = function(opts) {
+        const options = $.extend({}, $.fn.formset.defaults, opts);
+        const $this = $(this);
+        const $parent = $this.parent();
+        const updateElementIndex = function(el, prefix, ndx) {
+            const id_regex = new RegExp("(" + prefix + "-(\\d+|__prefix__))");
+            const replacement = prefix + "-" + ndx;
+            if ($(el).prop("for")) {
+                $(el).prop("for", $(el).prop("for").replace(id_regex, replacement));
+            }
+            if (el.id) {
+                el.id = el.id.replace(id_regex, replacement);
+            }
+            if (el.name) {
+                el.name = el.name.replace(id_regex, replacement);
+            }
+        };
+        const totalForms = $("#id_" + options.prefix + "-TOTAL_FORMS").prop("autocomplete", "off");
+        let nextIndex = parseInt(totalForms.val(), 10);
+        const maxForms = $("#id_" + options.prefix + "-MAX_NUM_FORMS").prop("autocomplete", "off");
+        const minForms = $("#id_" + options.prefix + "-MIN_NUM_FORMS").prop("autocomplete", "off");
+        let addButton;
+
+        /**
+         * The "Add another MyModel" button below the inline forms.
+         */
+        const addInlineAddButton = function() {
+            if (addButton === null) {
+                if ($this.prop("tagName") === "TR") {
+                    // If forms are laid out as table rows, insert the
+                    // "add" button in a new table row:
+                    const numCols = $this.eq(-1).children().length;
+                    $parent.append('<tr class="' + options.addCssClass + '"><td colspan="' + numCols + '"><a role="button" class="addlink" href="#">' + options.addText + "</a></tr>");
+                    addButton = $parent.find("tr:last a");
+                } else {
+                    // Otherwise, insert it immediately after the last form:
+                    $this.filter(":last").after('<div class="' + options.addCssClass + '"><a role="button" class="addlink" href="#">' + options.addText + "</a></div>");
+                    addButton = $this.filter(":last").next().find("a");
+                }
+            }
+            addButton.on('click', addInlineClickHandler);
+        };
+
+        const addInlineClickHandler = function(e) {
+            e.preventDefault();
+            const template = $("#" + options.prefix + "-empty");
+            const row = template.clone(true);
+            row.removeClass(options.emptyCssClass)
+                .addClass(options.formCssClass)
+                .attr("id", options.prefix + "-" + nextIndex);
+            addInlineDeleteButton(row);
+            row.find("*").each(function() {
+                updateElementIndex(this, options.prefix, totalForms.val());
+            });
+            // Insert the new form when it has been fully edited.
+            row.insertBefore($(template));
+            // Update number of total forms.
+            $(totalForms).val(parseInt(totalForms.val(), 10) + 1);
+            nextIndex += 1;
+            // Hide the add button if there's a limit and it's been reached.
+            if ((maxForms.val() !== '') && (maxForms.val() - totalForms.val()) <= 0) {
+                addButton.parent().hide();
+            }
+            // Show the remove buttons if there are more than min_num.
+            toggleDeleteButtonVisibility(row.closest('.inline-group'));
+
+            // Pass the new form to the post-add callback, if provided.
+            if (options.added) {
+                options.added(row);
+            }
+            row.get(0).dispatchEvent(new CustomEvent("formset:added", {
+                bubbles: true,
+                detail: {
+                    formsetName: options.prefix
+                }
+            }));
+        };
+
+        /**
+         * The "X" button that is part of every unsaved inline.
+         * (When saved, it is replaced with a "Delete" checkbox.)
+         */
+        const addInlineDeleteButton = function(row) {
+            if (row.is("tr")) {
+                // If the forms are laid out in table rows, insert
+                // the remove button into the last table cell:
+                row.children(":last").append('<div><a role="button" class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></div>");
+            } else if (row.is("ul") || row.is("ol")) {
+                // If they're laid out as an ordered/unordered list,
+                // insert an <li> after the last list item:
+                row.append('<li><a role="button" class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></li>");
+            } else {
+                // Otherwise, just insert the remove button as the
+                // last child element of the form's container:
+                row.children(":first").append('<span><a role="button" class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></span>");
+            }
+            // Add delete handler for each row.
+            row.find("a." + options.deleteCssClass).on('click', inlineDeleteHandler.bind(this));
+        };
+
+        const inlineDeleteHandler = function(e1) {
+            e1.preventDefault();
+            const deleteButton = $(e1.target);
+            const row = deleteButton.closest('.' + options.formCssClass);
+            const inlineGroup = row.closest('.inline-group');
+            // Remove the parent form containing this button,
+            // and also remove the relevant row with non-field errors:
+            const prevRow = row.prev();
+            if (prevRow.length && prevRow.hasClass('row-form-errors')) {
+                prevRow.remove();
+            }
+            row.remove();
+            nextIndex -= 1;
+            // Pass the deleted form to the post-delete callback, if provided.
+            if (options.removed) {
+                options.removed(row);
+            }
+            document.dispatchEvent(new CustomEvent("formset:removed", {
+                detail: {
+                    formsetName: options.prefix
+                }
+            }));
+            // Update the TOTAL_FORMS form count.
+            const forms = $("." + options.formCssClass);
+            $("#id_" + options.prefix + "-TOTAL_FORMS").val(forms.length);
+            // Show add button again once below maximum number.
+            if ((maxForms.val() === '') || (maxForms.val() - forms.length) > 0) {
+                addButton.parent().show();
+            }
+            // Hide the remove buttons if at min_num.
+            toggleDeleteButtonVisibility(inlineGroup);
+            // Also, update names and ids for all remaining form controls so
+            // they remain in sequence:
+            let i, formCount;
+            const updateElementCallback = function() {
+                updateElementIndex(this, options.prefix, i);
+            };
+            for (i = 0, formCount = forms.length; i < formCount; i++) {
+                updateElementIndex($(forms).get(i), options.prefix, i);
+                $(forms.get(i)).find("*").each(updateElementCallback);
+            }
+        };
+
+        const toggleDeleteButtonVisibility = function(inlineGroup) {
+            if ((minForms.val() !== '') && (minForms.val() - totalForms.val()) >= 0) {
+                inlineGroup.find('.inline-deletelink').hide();
+            } else {
+                inlineGroup.find('.inline-deletelink').show();
+            }
+        };
+
+        $this.each(function(i) {
+            $(this).not("." + options.emptyCssClass).addClass(options.formCssClass);
+        });
+
+        // Create the delete buttons for all unsaved inlines:
+        $this.filter('.' + options.formCssClass + ':not(.has_original):not(.' + options.emptyCssClass + ')').each(function() {
+            addInlineDeleteButton($(this));
+        });
+        toggleDeleteButtonVisibility($this);
+
+        // Create the add button, initially hidden.
+        addButton = options.addButton;
+        addInlineAddButton();
+
+        // Show the add button if allowed to add more items.
+        // Note that max_num = None translates to a blank string.
+        const showAddButton = maxForms.val() === '' || (maxForms.val() - totalForms.val()) > 0;
+        if ($this.length && showAddButton) {
+            addButton.parent().show();
+        } else {
+            addButton.parent().hide();
+        }
+
+        return this;
+    };
+
+    /* Setup plugin defaults */
+    $.fn.formset.defaults = {
+        prefix: "form", // The form prefix for your django formset
+        addText: "add another", // Text for the add link
+        deleteText: "remove", // Text for the delete link
+        addCssClass: "add-row", // CSS class applied to the add link
+        deleteCssClass: "delete-row", // CSS class applied to the delete link
+        emptyCssClass: "empty-row", // CSS class applied to the empty row
+        formCssClass: "dynamic-form", // CSS class applied to each form in a formset
+        added: null, // Function called each time a new form is added
+        removed: null, // Function called each time a form is deleted
+        addButton: null // Existing add button to use
+    };
+
+
+    // Tabular inlines ---------------------------------------------------------
+    $.fn.tabularFormset = function(selector, options) {
+        const $rows = $(this);
+
+        const reinitDateTimeShortCuts = function() {
+            // Reinitialize the calendar and clock widgets by force
+            if (typeof DateTimeShortcuts !== "undefined") {
+                $(".datetimeshortcuts").remove();
+                DateTimeShortcuts.init();
+            }
+        };
+
+        const updateSelectFilter = function() {
+            // If any SelectFilter widgets are a part of the new form,
+            // instantiate a new SelectFilter instance for it.
+            if (typeof SelectFilter !== 'undefined') {
+                $('.selectfilter').each(function(index, value) {
+                    SelectFilter.init(value.id, this.dataset.fieldName, false);
+                });
+                $('.selectfilterstacked').each(function(index, value) {
+                    SelectFilter.init(value.id, this.dataset.fieldName, true);
+                });
+            }
+        };
+
+        const initPrepopulatedFields = function(row) {
+            row.find('.prepopulated_field').each(function() {
+                const field = $(this),
+                    input = field.find('input, select, textarea'),
+                    dependency_list = input.data('dependency_list') || [],
+                    dependencies = [];
+                $.each(dependency_list, function(i, field_name) {
+                    dependencies.push('#' + row.find('.field-' + field_name).find('input, select, textarea').attr('id'));
+                });
+                if (dependencies.length) {
+                    input.prepopulate(dependencies, input.attr('maxlength'));
+                }
+            });
+        };
+
+        $rows.formset({
+            prefix: options.prefix,
+            addText: options.addText,
+            formCssClass: "dynamic-" + options.prefix,
+            deleteCssClass: "inline-deletelink",
+            deleteText: options.deleteText,
+            emptyCssClass: "empty-form",
+            added: function(row) {
+                initPrepopulatedFields(row);
+                reinitDateTimeShortCuts();
+                updateSelectFilter();
+            },
+            addButton: options.addButton
+        });
+
+        return $rows;
+    };
+
+    // Stacked inlines ---------------------------------------------------------
+    $.fn.stackedFormset = function(selector, options) {
+        const $rows = $(this);
+        const updateInlineLabel = function(row) {
+            $(selector).find(".inline_label").each(function(i) {
+                const count = i + 1;
+                $(this).html($(this).html().replace(/(#\d+)/g, "#" + count));
+            });
+        };
+
+        const reinitDateTimeShortCuts = function() {
+            // Reinitialize the calendar and clock widgets by force, yuck.
+            if (typeof DateTimeShortcuts !== "undefined") {
+                $(".datetimeshortcuts").remove();
+                DateTimeShortcuts.init();
+            }
+        };
+
+        const updateSelectFilter = function() {
+            // If any SelectFilter widgets were added, instantiate a new instance.
+            if (typeof SelectFilter !== "undefined") {
+                $(".selectfilter").each(function(index, value) {
+                    SelectFilter.init(value.id, this.dataset.fieldName, false);
+                });
+                $(".selectfilterstacked").each(function(index, value) {
+                    SelectFilter.init(value.id, this.dataset.fieldName, true);
+                });
+            }
+        };
+
+        const initPrepopulatedFields = function(row) {
+            row.find('.prepopulated_field').each(function() {
+                const field = $(this),
+                    input = field.find('input, select, textarea'),
+                    dependency_list = input.data('dependency_list') || [],
+                    dependencies = [];
+                $.each(dependency_list, function(i, field_name) {
+                    // Dependency in a fieldset.
+                    let field_element = row.find('.form-row .field-' + field_name);
+                    // Dependency without a fieldset.
+                    if (!field_element.length) {
+                        field_element = row.find('.form-row.field-' + field_name);
+                    }
+                    dependencies.push('#' + field_element.find('input, select, textarea').attr('id'));
+                });
+                if (dependencies.length) {
+                    input.prepopulate(dependencies, input.attr('maxlength'));
+                }
+            });
+        };
+
+        $rows.formset({
+            prefix: options.prefix,
+            addText: options.addText,
+            formCssClass: "dynamic-" + options.prefix,
+            deleteCssClass: "inline-deletelink",
+            deleteText: options.deleteText,
+            emptyCssClass: "empty-form",
+            removed: updateInlineLabel,
+            added: function(row) {
+                initPrepopulatedFields(row);
+                reinitDateTimeShortCuts();
+                updateSelectFilter();
+                updateInlineLabel(row);
+            },
+            addButton: options.addButton
+        });
+
+        return $rows;
+    };
+
+    $(document).ready(function() {
+        $(".js-inline-admin-formset").each(function() {
+            const data = $(this).data(),
+                inlineOptions = data.inlineFormset;
+            let selector;
+            switch(data.inlineType) {
+            case "stacked":
+                selector = inlineOptions.name + "-group .inline-related";
+                $(selector).stackedFormset(selector, inlineOptions.options);
+                break;
+            case "tabular":
+                selector = inlineOptions.name + "-group .tabular.inline-related tbody:first > tr.form-row";
+                $(selector).tabularFormset(selector, inlineOptions.options);
+                break;
+            }
+        });
+    });
+}

static/admin/js/jquery.init.js

@@ -0,0 +1,8 @@
+/*global jQuery:false*/
+'use strict';
+/* Puts the included jQuery into our own namespace using noConflict and passing
+ * it 'true'. This ensures that the included jQuery doesn't pollute the global
+ * namespace (i.e. this preserves pre-existing values for both window.$ and
+ * window.jQuery).
+ */
+window.django = {jQuery: jQuery.noConflict(true)};

static/admin/js/nav_sidebar.js

@@ -0,0 +1,79 @@
+'use strict';
+{
+    const toggleNavSidebar = document.getElementById('toggle-nav-sidebar');
+    if (toggleNavSidebar !== null) {
+        const navSidebar = document.getElementById('nav-sidebar');
+        const main = document.getElementById('main');
+        let navSidebarIsOpen = localStorage.getItem('django.admin.navSidebarIsOpen');
+        if (navSidebarIsOpen === null) {
+            navSidebarIsOpen = 'true';
+        }
+        main.classList.toggle('shifted', navSidebarIsOpen === 'true');
+        navSidebar.setAttribute('aria-expanded', navSidebarIsOpen);
+
+        toggleNavSidebar.addEventListener('click', function() {
+            if (navSidebarIsOpen === 'true') {
+                navSidebarIsOpen = 'false';
+            } else {
+                navSidebarIsOpen = 'true';
+            }
+            localStorage.setItem('django.admin.navSidebarIsOpen', navSidebarIsOpen);
+            main.classList.toggle('shifted');
+            navSidebar.setAttribute('aria-expanded', navSidebarIsOpen);
+        });
+    }
+
+    function initSidebarQuickFilter() {
+        const options = [];
+        const navSidebar = document.getElementById('nav-sidebar');
+        if (!navSidebar) {
+            return;
+        }
+        navSidebar.querySelectorAll('th[scope=row] a').forEach((container) => {
+            options.push({title: container.innerHTML, node: container});
+        });
+
+        function checkValue(event) {
+            let filterValue = event.target.value;
+            if (filterValue) {
+                filterValue = filterValue.toLowerCase();
+            }
+            if (event.key === 'Escape') {
+                filterValue = '';
+                event.target.value = ''; // clear input
+            }
+            let matches = false;
+            for (const o of options) {
+                let displayValue = '';
+                if (filterValue) {
+                    if (o.title.toLowerCase().indexOf(filterValue) === -1) {
+                        displayValue = 'none';
+                    } else {
+                        matches = true;
+                    }
+                }
+                // show/hide parent <TR>
+                o.node.parentNode.parentNode.style.display = displayValue;
+            }
+            if (!filterValue || matches) {
+                event.target.classList.remove('no-results');
+            } else {
+                event.target.classList.add('no-results');
+            }
+            sessionStorage.setItem('django.admin.navSidebarFilterValue', filterValue);
+        }
+
+        const nav = document.getElementById('nav-filter');
+        nav.addEventListener('change', checkValue, false);
+        nav.addEventListener('input', checkValue, false);
+        nav.addEventListener('keyup', checkValue, false);
+
+        const storedValue = sessionStorage.getItem('django.admin.navSidebarFilterValue');
+        if (storedValue) {
+            nav.value = storedValue;
+            checkValue({target: nav, key: ''});
+        }
+    }
+    window.initSidebarQuickFilter = initSidebarQuickFilter;
+    initSidebarQuickFilter();
+}

static/admin/js/popup_response.js

@@ -0,0 +1,15 @@
+'use strict';
+{
+    const initData = JSON.parse(document.getElementById('django-admin-popup-response-constants').dataset.popupResponse);
+    switch(initData.action) {
+    case 'change':
+        opener.dismissChangeRelatedObjectPopup(window, initData.value, initData.obj, initData.new_value);
+        break;
+    case 'delete':
+        opener.dismissDeleteRelatedObjectPopup(window, initData.value);
+        break;
+    default:
+        opener.dismissAddRelatedObjectPopup(window, initData.value, initData.obj);
+        break;
+    }
+}

static/admin/js/prepopulate.js

@@ -0,0 +1,43 @@
+/*global URLify*/
+'use strict';
+{
+    const $ = django.jQuery;
+    $.fn.prepopulate = function(dependencies, maxLength, allowUnicode) {
+        /*
+            Depends on urlify.js
+            Populates a selected field with the values of the dependent fields,
+            URLifies and shortens the string.
+            dependencies - array of dependent fields ids
+            maxLength - maximum length of the URLify'd string
+            allowUnicode - Unicode support of the URLify'd string
+        */
+        return this.each(function() {
+            const prepopulatedField = $(this);
+
+            const populate = function() {
+                // Bail if the field's value has been changed by the user
+                if (prepopulatedField.data('_changed')) {
+                    return;
+                }
+
+                const values = [];
+                $.each(dependencies, function(i, field) {
+                    field = $(field);
+                    if (field.val().length > 0) {
+                        values.push(field.val());
+                    }
+                });
+                prepopulatedField.val(URLify(values.join(' '), maxLength, allowUnicode));
+            };
+
+            prepopulatedField.data('_changed', false);
+            prepopulatedField.on('change', function() {
+                prepopulatedField.data('_changed', true);
+            });
+
+            if (!prepopulatedField.val()) {
+                $(dependencies.join(',')).on('keyup change focus', populate);
+            }
+        });
+    };
+}

static/admin/js/prepopulate_init.js

@@ -0,0 +1,15 @@
+'use strict';
+{
+    const $ = django.jQuery;
+    const fields = $('#django-admin-prepopulated-fields-constants').data('prepopulatedFields');
+    $.each(fields, function(index, field) {
+        $(
+            '.empty-form .form-row .field-' + field.name +
+            ', .empty-form.form-row .field-' + field.name +
+            ', .empty-form .form-row.field-' + field.name
+        ).addClass('prepopulated_field');
+        $(field.id).data('dependency_list', field.dependency_list).prepopulate(
+            field.dependency_ids, field.maxLength, field.allowUnicode
+        );
+    });
+}

static/admin/js/theme.js

@@ -0,0 +1,51 @@
+'use strict';
+{
+    function setTheme(mode) {
+        if (mode !== "light" && mode !== "dark" && mode !== "auto") {
+            console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`);
+            mode = "auto";
+        }
+        document.documentElement.dataset.theme = mode;
+        localStorage.setItem("theme", mode);
+    }
+
+    function cycleTheme() {
+        const currentTheme = localStorage.getItem("theme") || "auto";
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+        if (prefersDark) {
+            // Auto (dark) -> Light -> Dark
+            if (currentTheme === "auto") {
+                setTheme("light");
+            } else if (currentTheme === "light") {
+                setTheme("dark");
+            } else {
+                setTheme("auto");
+            }
+        } else {
+            // Auto (light) -> Dark -> Light
+            if (currentTheme === "auto") {
+                setTheme("dark");
+            } else if (currentTheme === "dark") {
+                setTheme("light");
+            } else {
+                setTheme("auto");
+            }
+        }
+    }
+
+    function initTheme() {
+        // set theme defined in localStorage if there is one, or fallback to auto mode
+        const currentTheme = localStorage.getItem("theme");
+        currentTheme ? setTheme(currentTheme) : setTheme("auto");
+    }
+
+    window.addEventListener('load', function(_) {
+        const buttons = document.getElementsByClassName("theme-toggle");
+        Array.from(buttons).forEach((btn) => {
+            btn.addEventListener("click", cycleTheme);
+        });
+    });
+
+    initTheme();
+}

static/admin/js/unusable_password_field.js

@@ -0,0 +1,29 @@
+"use strict";
+// Fallback JS for browsers which do not support :has selector used in
+// admin/css/unusable_password_fields.css
+// Remove file once all supported browsers support :has selector
+try {
+    // If browser does not support :has selector this will raise an error
+    document.querySelector("form:has(input)");
+} catch (error) {
+    console.log("Defaulting to javascript for usable password form management: " + error);
+    // JS replacement for unsupported :has selector
+    document.querySelectorAll('input[name="usable_password"]').forEach(option => {
+        option.addEventListener('change', function() {
+            const usablePassword = (this.value === "true" ? this.checked : !this.checked);
+            const submit1 = document.querySelector('input[type="submit"].set-password');
+            const submit2 = document.querySelector('input[type="submit"].unset-password');
+            const messages = document.querySelector('#id_unusable_warning');
+            document.getElementById('id_password1').closest('.form-row').hidden = !usablePassword;
+            document.getElementById('id_password2').closest('.form-row').hidden = !usablePassword;
+            if (messages) {
+                messages.hidden = usablePassword;
+            }
+            if (submit1 && submit2) {
+                submit1.hidden = !usablePassword;
+                submit2.hidden = usablePassword;
+            }
+        });
+        option.dispatchEvent(new Event('change'));
+    });
+}

static/admin/js/urlify.js

@@ -0,0 +1,169 @@
+/*global XRegExp*/
+'use strict';
+{
+    const LATIN_MAP = {
+        'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE',
+        'Ç': 'C', 'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I',
+        'Î': 'I', 'Ï': 'I', 'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O',
+        'Õ': 'O', 'Ö': 'O', 'Ő': 'O', 'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U',
+        'Ü': 'U', 'Ű': 'U', 'Ý': 'Y', 'Þ': 'TH', 'Ÿ': 'Y', 'ß': 'ss', 'à': 'a',
+        'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c',
+        'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i',
+        'ï': 'i', 'ð': 'd', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o',
+        'ö': 'o', 'ő': 'o', 'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u',
+        'ű': 'u', 'ý': 'y', 'þ': 'th', 'ÿ': 'y'
+    };
+    const LATIN_SYMBOLS_MAP = {
+        '©': '(c)'
+    };
+    const GREEK_MAP = {
+        'α': 'a', 'β': 'b', 'γ': 'g', 'δ': 'd', 'ε': 'e', 'ζ': 'z', 'η': 'h',
+        'θ': '8', 'ι': 'i', 'κ': 'k', 'λ': 'l', 'μ': 'm', 'ν': 'n', 'ξ': '3',
+        'ο': 'o', 'π': 'p', 'ρ': 'r', 'σ': 's', 'τ': 't', 'υ': 'y', 'φ': 'f',
+        'χ': 'x', 'ψ': 'ps', 'ω': 'w', 'ά': 'a', 'έ': 'e', 'ί': 'i', 'ό': 'o',
+        'ύ': 'y', 'ή': 'h', 'ώ': 'w', 'ς': 's', 'ϊ': 'i', 'ΰ': 'y', 'ϋ': 'y',
+        'ΐ': 'i', 'Α': 'A', 'Β': 'B', 'Γ': 'G', 'Δ': 'D', 'Ε': 'E', 'Ζ': 'Z',
+        'Η': 'H', 'Θ': '8', 'Ι': 'I', 'Κ': 'K', 'Λ': 'L', 'Μ': 'M', 'Ν': 'N',
+        'Ξ': '3', 'Ο': 'O', 'Π': 'P', 'Ρ': 'R', 'Σ': 'S', 'Τ': 'T', 'Υ': 'Y',
+        'Φ': 'F', 'Χ': 'X', 'Ψ': 'PS', 'Ω': 'W', 'Ά': 'A', 'Έ': 'E', 'Ί': 'I',
+        'Ό': 'O', 'Ύ': 'Y', 'Ή': 'H', 'Ώ': 'W', 'Ϊ': 'I', 'Ϋ': 'Y'
+    };
+    const TURKISH_MAP = {
+        'ş': 's', 'Ş': 'S', 'ı': 'i', 'İ': 'I', 'ç': 'c', 'Ç': 'C', 'ü': 'u',
+        'Ü': 'U', 'ö': 'o', 'Ö': 'O', 'ğ': 'g', 'Ğ': 'G'
+    };
+    const ROMANIAN_MAP = {
+        'ă': 'a', 'î': 'i', 'ș': 's', 'ț': 't', 'â': 'a',
+        'Ă': 'A', 'Î': 'I', 'Ș': 'S', 'Ț': 'T', 'Â': 'A'
+    };
+    const RUSSIAN_MAP = {
+        'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo',
+        'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm',
+        'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u',
+        'ф': 'f', 'х': 'h', 'ц': 'c', 'ч': 'ch', 'ш': 'sh', 'щ': 'sh', 'ъ': '',
+        'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya',
+        'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'Yo',
+        'Ж': 'Zh', 'З': 'Z', 'И': 'I', 'Й': 'J', 'К': 'K', 'Л': 'L', 'М': 'M',
+        'Н': 'N', 'О': 'O', 'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U',
+        'Ф': 'F', 'Х': 'H', 'Ц': 'C', 'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sh', 'Ъ': '',
+        'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu', 'Я': 'Ya'
+    };
+    const UKRAINIAN_MAP = {
+        'Є': 'Ye', 'І': 'I', 'Ї': 'Yi', 'Ґ': 'G', 'є': 'ye', 'і': 'i',
+        'ї': 'yi', 'ґ': 'g'
+    };
+    const CZECH_MAP = {
+        'č': 'c', 'ď': 'd', 'ě': 'e', 'ň': 'n', 'ř': 'r', 'š': 's', 'ť': 't',
+        'ů': 'u', 'ž': 'z', 'Č': 'C', 'Ď': 'D', 'Ě': 'E', 'Ň': 'N', 'Ř': 'R',
+        'Š': 'S', 'Ť': 'T', 'Ů': 'U', 'Ž': 'Z'
+    };
+    const SLOVAK_MAP = {
+        'á': 'a', 'ä': 'a', 'č': 'c', 'ď': 'd', 'é': 'e', 'í': 'i', 'ľ': 'l',
+        'ĺ': 'l', 'ň': 'n', 'ó': 'o', 'ô': 'o', 'ŕ': 'r', 'š': 's', 'ť': 't',
+        'ú': 'u', 'ý': 'y', 'ž': 'z',
+        'Á': 'a', 'Ä': 'A', 'Č': 'C', 'Ď': 'D', 'É': 'E', 'Í': 'I', 'Ľ': 'L',
+        'Ĺ': 'L', 'Ň': 'N', 'Ó': 'O', 'Ô': 'O', 'Ŕ': 'R', 'Š': 'S', 'Ť': 'T',
+        'Ú': 'U', 'Ý': 'Y', 'Ž': 'Z'
+    };
+    const POLISH_MAP = {
+        'ą': 'a', 'ć': 'c', 'ę': 'e', 'ł': 'l', 'ń': 'n', 'ó': 'o', 'ś': 's',
+        'ź': 'z', 'ż': 'z',
+        'Ą': 'A', 'Ć': 'C', 'Ę': 'E', 'Ł': 'L', 'Ń': 'N', 'Ó': 'O', 'Ś': 'S',
+        'Ź': 'Z', 'Ż': 'Z'
+    };
+    const LATVIAN_MAP = {
+        'ā': 'a', 'č': 'c', 'ē': 'e', 'ģ': 'g', 'ī': 'i', 'ķ': 'k', 'ļ': 'l',
+        'ņ': 'n', 'š': 's', 'ū': 'u', 'ž': 'z',
+        'Ā': 'A', 'Č': 'C', 'Ē': 'E', 'Ģ': 'G', 'Ī': 'I', 'Ķ': 'K', 'Ļ': 'L',
+        'Ņ': 'N', 'Š': 'S', 'Ū': 'U', 'Ž': 'Z'
+    };
+    const ARABIC_MAP = {
+        'أ': 'a', 'ب': 'b', 'ت': 't', 'ث': 'th', 'ج': 'g', 'ح': 'h', 'خ': 'kh', 'د': 'd',
+        'ذ': 'th', 'ر': 'r', 'ز': 'z', 'س': 's', 'ش': 'sh', 'ص': 's', 'ض': 'd', 'ط': 't',
+        'ظ': 'th', 'ع': 'aa', 'غ': 'gh', 'ف': 'f', 'ق': 'k', 'ك': 'k', 'ل': 'l', 'م': 'm',
+        'ن': 'n', 'ه': 'h', 'و': 'o', 'ي': 'y'
+    };
+    const LITHUANIAN_MAP = {
+        'ą': 'a', 'č': 'c', 'ę': 'e', 'ė': 'e', 'į': 'i', 'š': 's', 'ų': 'u',
+        'ū': 'u', 'ž': 'z',
+        'Ą': 'A', 'Č': 'C', 'Ę': 'E', 'Ė': 'E', 'Į': 'I', 'Š': 'S', 'Ų': 'U',
+        'Ū': 'U', 'Ž': 'Z'
+    };
+    const SERBIAN_MAP = {
+        'ђ': 'dj', 'ј': 'j', 'љ': 'lj', 'њ': 'nj', 'ћ': 'c', 'џ': 'dz',
+        'đ': 'dj', 'Ђ': 'Dj', 'Ј': 'j', 'Љ': 'Lj', 'Њ': 'Nj', 'Ћ': 'C',
+        'Џ': 'Dz', 'Đ': 'Dj'
+    };
+    const AZERBAIJANI_MAP = {
+        'ç': 'c', 'ə': 'e', 'ğ': 'g', 'ı': 'i', 'ö': 'o', 'ş': 's', 'ü': 'u',
+        'Ç': 'C', 'Ə': 'E', 'Ğ': 'G', 'İ': 'I', 'Ö': 'O', 'Ş': 'S', 'Ü': 'U'
+    };
+    const GEORGIAN_MAP = {
+        'ა': 'a', 'ბ': 'b', 'გ': 'g', 'დ': 'd', 'ე': 'e', 'ვ': 'v', 'ზ': 'z',
+        'თ': 't', 'ი': 'i', 'კ': 'k', 'ლ': 'l', 'მ': 'm', 'ნ': 'n', 'ო': 'o',
+        'პ': 'p', 'ჟ': 'j', 'რ': 'r', 'ს': 's', 'ტ': 't', 'უ': 'u', 'ფ': 'f',
+        'ქ': 'q', 'ღ': 'g', 'ყ': 'y', 'შ': 'sh', 'ჩ': 'ch', 'ც': 'c', 'ძ': 'dz',
+        'წ': 'w', 'ჭ': 'ch', 'ხ': 'x', 'ჯ': 'j', 'ჰ': 'h'
+    };
+
+    const ALL_DOWNCODE_MAPS = [
+        LATIN_MAP,
+        LATIN_SYMBOLS_MAP,
+        GREEK_MAP,
+        TURKISH_MAP,
+        ROMANIAN_MAP,
+        RUSSIAN_MAP,
+        UKRAINIAN_MAP,
+        CZECH_MAP,
+        SLOVAK_MAP,
+        POLISH_MAP,
+        LATVIAN_MAP,
+        ARABIC_MAP,
+        LITHUANIAN_MAP,
+        SERBIAN_MAP,
+        AZERBAIJANI_MAP,
+        GEORGIAN_MAP
+    ];
+
+    const Downcoder = {
+        'Initialize': function() {
+            if (Downcoder.map) { // already made
+                return;
+            }
+            Downcoder.map = {};
+            for (const lookup of ALL_DOWNCODE_MAPS) {
+                Object.assign(Downcoder.map, lookup);
+            }
+            Downcoder.regex = new RegExp(Object.keys(Downcoder.map).join('|'), 'g');
+        }
+    };
+
+    function downcode(slug) {
+        Downcoder.Initialize();
+        return slug.replace(Downcoder.regex, function(m) {
+            return Downcoder.map[m];
+        });
+    }
+
+
+    function URLify(s, num_chars, allowUnicode) {
+        // changes, e.g., "Petty theft" to "petty-theft"
+        if (!allowUnicode) {
+            s = downcode(s);
+        }
+        s = s.toLowerCase(); // convert to lowercase
+        // if downcode doesn't hit, the char will be stripped here
+        if (allowUnicode) {
+            // Keep Unicode letters including both lowercase and uppercase
+            // characters, whitespace, and dash; remove other characters.
+            s = XRegExp.replace(s, XRegExp('[^-_\\p{L}\\p{N}\\s]', 'g'), '');
+        } else {
+            s = s.replace(/[^-\w\s]/g, ''); // remove unneeded chars
+        }
+        s = s.replace(/^\s+|\s+$/g, ''); // trim leading/trailing spaces
+        s = s.replace(/[-\s]+/g, '-'); // convert spaces to hyphens
+        s = s.substring(0, num_chars); // trim to first num_chars chars
+        return s.replace(/-+$/g, ''); // trim any trailing hyphens
+    }
+    window.URLify = URLify;
+}

static/admin/js/vendor/jquery/LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright OpenJS Foundation and other contributors, https://openjsf.org/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.