Admin Changes

Added django admin static css and removed baton.

.gitignore

@@ -1,3 +1,6 @@
+# Compressed / cached static files
+src/static/CACHE/
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

.vscode/launch.json

@@ -1,19 +1,19 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Python: Django",
-            "type": "python",
-            "request": "launch",
-            "program": "${workspaceFolder}\\src\\manage.py",
-            "args": [
-                "runserver"
-            ],
-            "django": true,
-            "justMyCode": true
-        }
-    ]
-}
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Python: Django",
+      "type": "python",
+      "request": "launch",
+      "program": "${workspaceFolder}/src/manage.py",
+      "args": ["runserver"],
+      "django": true,
+      "justMyCode": true,
+      "python": "${workspaceFolder}/venv/bin/python" // Linux
+      // "python": "${workspaceFolder}\\venv\\Scripts\\python",  // Windows
+    }
+  ]
+}

create_dummy_data.bat

@@ -1,4 +1,7 @@
 @echo off
+echo This file is outdated
+set /p dontCare=Do you want to continue? [y/n] 
+
 echo The purpose of this file is to populate the database with dummy data for testing. Running this WILL DELETE your current sqlite3 database.
 set /p confirm=Do you want to continue? [y/n] 
 

createsuperuser.bat

@@ -0,0 +1,11 @@
+@echo off
+cd %~dp0
+
+call venv/Scripts/activate.bat
+
+python src/manage.py migrate
+
+python src/manage.py create_superuser --username admin --password password --noinput --email "admin@mail.com"
+
+echo "A superuser has been created username='admin' and password='password'"
+pause

src/Results/settings.py

@@ -32,7 +32,6 @@ ALLOWED_HOSTS = ["*", "192.168.5.105"]
 # Application definition
 
 INSTALLED_APPS = [
-    'baton',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -41,7 +40,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
 #    'rest_framework_datatables'
     'mainapp',
-    'baton.autodiscover',
+    'compressor',
 ]
 
 MIDDLEWARE = [
@@ -122,6 +121,16 @@ USE_TZ = True
 
 STATIC_URL = 'static/'
 STATICFILES_DIRS = [BASE_DIR / 'static/']
+STATICFILES_FINDERS = ["compressor.finders.CompressorFinder"]
+
+# Compressors
+
+COMPRESS_OFFLINE = True
+LIBSASS_OUTPUT_STYLE = "compressed"
+COMPRESS_PRECOMPILERS = (
+    ("text/x-scss", "django_libsass.SassCompiler"),
+)
+COMPRESS_ROOT = BASE_DIR / 'static/'
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field

src/Results/urls.py

@@ -13,11 +13,10 @@ Including another URLconf
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
-from baton.autodiscover import admin
 from django.urls import path, include
+from django.contrib import admin
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path('baton/', include('baton.urls')),
     path('', include('mainapp.urls')),
 ]

src/mainapp/admin.py

@@ -2,40 +2,51 @@
 
 from django.contrib import admin
 
-from .models import Peg, Member, Team
+from .models import Venue, Waters
+# from .models import Member, Team, Section
 
 
-@admin.register(Peg)
-class PegAdmin(admin.ModelAdmin):
-    """Admin model for the Peg model."""
+@admin.register(Venue)
+class VenueAdmin(admin.ModelAdmin):
+    """Admin model for the Venue model."""
 
-    change_list_template = "entities/bulk_pegging.html"
-    readonly_fields = ("peg_number",)
-    list_display = ("peg_number",)
-    search_fields = ("peg_number",)
+@admin.register(Waters)
+class WatersAdmin(admin.ModelAdmin):
+    """Admin model for the Waters model"""
 
 
-@admin.register(Member)
-class MemberAdmin(admin.ModelAdmin):
-    """Admin model for the Member model."""
 
-    list_display = ("first_name", "last_name", "team")
-    search_fields = ("first_name", "last_name", "team")
-    list_filter = ("team",)
+# @admin.register(Peg)
+# class PegAdmin(admin.ModelAdmin):
+#     """Admin model for the Peg model."""
+
+#     change_list_template = "entities/bulk_pegging.html"
+#     readonly_fields = ("peg_number",)
+#     list_display = ("peg_number",)
+#     search_fields = ("peg_number",)
 
 
-@admin.register(Team)
-class TeamAdmin(admin.ModelAdmin):
-    """Admin model for the Team model."""
+# @admin.register(Member)
+# class MemberAdmin(admin.ModelAdmin):
+#     """Admin model for the Member model."""
 
-    readonly_fields = ("team_number",)
-    list_display = ("team_number",)
-    search_fields = ("team_number",)
+#     list_display = ("first_name", "last_name", "team")
+#     search_fields = ("first_name", "last_name", "team")
+#     list_filter = ("team",)
+
+
+# @admin.register(Team)
+# class TeamAdmin(admin.ModelAdmin):
+#     """Admin model for the Team model."""
+
+#     # readonly_fields = ("id", "number",)
+#     list_display = ("id", "number",)
+#     search_fields = ("number",)
 
 
 # @admin.register(Section)
 # class SectionAdmin(admin.ModelAdmin):
 #     """Admin model for the Section model."""
 
-#     list_display = ("character",)
+#     list_display = ("id", "character",)
 #     search_fields = ("character",)

src/mainapp/fixtures/members_fixture.json

@@ -1,302 +1,167 @@
 [
   {
     "model": "mainapp.member",
-    "pk": 1,
+    "pk": null,
     "fields": {
-      "first_name": "Robert",
-      "last_name": "Reid",
+      "first_name": "Duane",
+      "last_name": "Hamilton",
       "team": 1,
-      "peg_number": null
+      "section": 3,
+      "peg_number": 2
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 2,
+    "pk": null,
     "fields": {
-      "first_name": "Ronald",
-      "last_name": "Jones",
+      "first_name": "Stacey",
+      "last_name": "Strunk",
       "team": 1,
-      "peg_number": null
+      "section": 10,
+      "peg_number": 3
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 3,
+    "pk": null,
     "fields": {
-      "first_name": "Casey",
-      "last_name": "Cohen",
+      "first_name": "Leah",
+      "last_name": "Bishop",
       "team": 1,
-      "peg_number": null
+      "section": 6,
+      "peg_number": 4
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 4,
+    "pk": null,
     "fields": {
-      "first_name": "James",
-      "last_name": "Scudder",
+      "first_name": "Frances",
+      "last_name": "Day",
       "team": 2,
-      "peg_number": null
+      "section": 16,
+      "peg_number": 5
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 5,
+    "pk": null,
     "fields": {
-      "first_name": "Randall",
-      "last_name": "Young",
+      "first_name": "Hector",
+      "last_name": "Story",
       "team": 2,
-      "peg_number": null
+      "section": 8,
+      "peg_number": 6
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 6,
+    "pk": null,
     "fields": {
-      "first_name": "Helen",
-      "last_name": "Doak",
+      "first_name": "Deborah",
+      "last_name": "Groseclose",
       "team": 2,
-      "peg_number": null
+      "section": 11,
+      "peg_number": 7
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 7,
+    "pk": null,
     "fields": {
-      "first_name": "Brenda",
-      "last_name": "Powell",
+      "first_name": "Elaine",
+      "last_name": "Clarke",
       "team": 3,
-      "peg_number": null
+      "section": 10,
+      "peg_number": 8
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 8,
+    "pk": null,
     "fields": {
-      "first_name": "Constance",
-      "last_name": "Abild",
+      "first_name": "Minnie",
+      "last_name": "Stigall",
       "team": 3,
-      "peg_number": null
+      "section": 7,
+      "peg_number": 9
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 9,
+    "pk": null,
     "fields": {
-      "first_name": "Patsy",
-      "last_name": "Branham",
+      "first_name": "Dennis",
+      "last_name": "Stolar",
       "team": 3,
-      "peg_number": null
+      "section": 14,
+      "peg_number": 10
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 10,
+    "pk": null,
     "fields": {
-      "first_name": "Cheryl",
-      "last_name": "Sears",
+      "first_name": "Darlene",
+      "last_name": "Beckman",
       "team": 4,
-      "peg_number": null
+      "section": 5,
+      "peg_number": 11
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 11,
+    "pk": null,
     "fields": {
-      "first_name": "Justin",
-      "last_name": "Cramer",
+      "first_name": "Charles",
+      "last_name": "Boone",
       "team": 4,
-      "peg_number": null
+      "section": 12,
+      "peg_number": 12
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 12,
+    "pk": null,
     "fields": {
-      "first_name": "Theodore",
-      "last_name": "Wilson",
+      "first_name": "Cecil",
+      "last_name": "Lamus",
       "team": 4,
-      "peg_number": null
+      "section": 13,
+      "peg_number": 13
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 13,
+    "pk": null,
     "fields": {
-      "first_name": "Geneva",
-      "last_name": "Low",
+      "first_name": "Morton",
+      "last_name": "Quinn",
       "team": 5,
-      "peg_number": null
+      "section": 14,
+      "peg_number": 14
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 14,
+    "pk": null,
     "fields": {
-      "first_name": "John",
-      "last_name": "Burtt",
+      "first_name": "Stuart",
+      "last_name": "Bristol",
       "team": 5,
-      "peg_number": null
+      "section": 15,
+      "peg_number": 15
     }
   },
   {
     "model": "mainapp.member",
-    "pk": 15,
+    "pk": null,
     "fields": {
-      "first_name": "Alfred",
-      "last_name": "Diaz",
+      "first_name": "Jeffrey",
+      "last_name": "Ferretti",
       "team": 5,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 16,
-    "fields": {
-      "first_name": "Arthur",
-      "last_name": "Alton",
-      "team": 6,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 17,
-    "fields": {
-      "first_name": "Vicki",
-      "last_name": "Greer",
-      "team": 6,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 18,
-    "fields": {
-      "first_name": "Lewis",
-      "last_name": "Segovia",
-      "team": 6,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 19,
-    "fields": {
-      "first_name": "Vince",
-      "last_name": "Robinson",
-      "team": 7,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 20,
-    "fields": {
-      "first_name": "Blake",
-      "last_name": "Mueller",
-      "team": 7,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 21,
-    "fields": {
-      "first_name": "Luis",
-      "last_name": "Hazel",
-      "team": 7,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 22,
-    "fields": {
-      "first_name": "Diane",
-      "last_name": "Lloyd",
-      "team": 8,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 23,
-    "fields": {
-      "first_name": "Jamey",
-      "last_name": "Mendes",
-      "team": 8,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 24,
-    "fields": {
-      "first_name": "Virgilio",
-      "last_name": "Nixon",
-      "team": 8,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 25,
-    "fields": {
-      "first_name": "Rodney",
-      "last_name": "White",
-      "team": 9,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 26,
-    "fields": {
-      "first_name": "Kathleen",
-      "last_name": "Ashe",
-      "team": 9,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 27,
-    "fields": {
-      "first_name": "Stephanie",
-      "last_name": "Taylor",
-      "team": 9,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 28,
-    "fields": {
-      "first_name": "John",
-      "last_name": "Brennan",
-      "team": 10,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 29,
-    "fields": {
-      "first_name": "Kenneth",
-      "last_name": "Duff",
-      "team": 10,
-      "peg_number": null
-    }
-  },
-  {
-    "model": "mainapp.member",
-    "pk": 30,
-    "fields": {
-      "first_name": "Matthew",
-      "last_name": "Whitesell",
-      "team": 10,
-      "peg_number": null
+      "section": 10,
+      "peg_number": 16
     }
   }
 ]

src/mainapp/fixtures/teams_fixture.json

@@ -2,71 +2,151 @@
     {
         "model": "mainapp.team",
         "pk": 1,
-        "fields": {
-            "section_letter": "D"
-        }
+        "fields": {}
     },
     {
         "model": "mainapp.team",
         "pk": 2,
-        "fields": {
-            "section_letter": "P"
-        }
+        "fields": {}
     },
     {
         "model": "mainapp.team",
         "pk": 3,
-        "fields": {
-            "section_letter": "L"
-        }
+        "fields": {}
     },
     {
         "model": "mainapp.team",
         "pk": 4,
-        "fields": {
-            "section_letter": "M"
-        }
+        "fields": {}
     },
     {
         "model": "mainapp.team",
         "pk": 5,
-        "fields": {
-            "section_letter": "Z"
-        }
+        "fields": {}
     },
     {
         "model": "mainapp.team",
         "pk": 6,
-        "fields": {
-            "section_letter": "Y"
-        }
+        "fields": {}
     },
     {
         "model": "mainapp.team",
         "pk": 7,
-        "fields": {
-            "section_letter": "J"
-        }
+        "fields": {}
     },
     {
         "model": "mainapp.team",
         "pk": 8,
-        "fields": {
-            "section_letter": "W"
-        }
+        "fields": {}
     },
     {
         "model": "mainapp.team",
         "pk": 9,
-        "fields": {
-            "section_letter": "T"
-        }
+        "fields": {}
     },
     {
         "model": "mainapp.team",
         "pk": 10,
-        "fields": {
-            "section_letter": "F"
-        }
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 11,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 12,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 13,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 14,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 15,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 16,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 17,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 18,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 19,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 20,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 21,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 22,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 23,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 24,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 25,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 26,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 27,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 28,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 29,
+        "fields": {}
+    },
+    {
+        "model": "mainapp.team",
+        "pk": 30,
+        "fields": {}
     }
 ]

src/mainapp/management/commands/create_members_fixture.py

@@ -1,52 +1,117 @@
-import random
 import names
 import json
+import random
+from typing import Optional, List, Set
+from string import ascii_uppercase
+
 from django.core.management.base import BaseCommand
-from mainapp.models import Member, Team
+from django.db.models import Q, Count
+
+from mainapp.models import Member, Team, SectionValidator, Section
 
 
 # TODO: refactor this file like create_teams_fixtures.py
 
+
 class Command(BaseCommand):
     help = "Creates a fixture with randomly generated Member objects"
 
     def add_arguments(self, parser):
-        parser.add_argument("num_members", type=int)
+        parser.add_argument("members_per_team", type=int)
 
     def handle(self, *args, **options):
-        num_members = options["num_members"]
+        members_per_team = options["members_per_team"]
+
         teams = Team.objects.all()
+
         if not teams:
-            print("No teams found. Please create some teams first.")
-            return
+            raise Exception("no teams")
 
-        members = []
+        new_members = []
         for team in teams:
-            for _ in range(num_members):
-                first_name = names.get_first_name()
-                last_name = names.get_last_name()
-                member = Member(first_name=first_name, last_name=last_name, team=team)
-                members.append(member)
 
-        Member.objects.bulk_create(members)
+            i = members_per_team
+            while i > 0:
 
-        self.stdout.write(self.style.SUCCESS(f"Created {num_members} members."))
+                team_member_ids = team.members.values_list('id', flat=True)
 
-        # create a members fixture file
-        members_fixture = []
-        for member in members:
-            member_fixture = {
+                print(team_member_ids)
+
+                section = random.choice([
+                    sec for sec in 
+                    Section.objects.exclude(members__id__in=team_member_ids)
+                ])
+
+                member = Member.objects.create(
+                    first_name=names.get_first_name(),
+                    last_name=names.get_last_name(),
+                    section=section,
+                    team=team
+                )
+
+                # if not section.is_joinable(member):
+                #     member.delete()
+                #     i += 1
+                #     continue
+
+                new_members.append(member)
+                print(member)
+
+                i -= 1
+
+        fixtures = []
+        for member in new_members:
+            member.delete()
+
+            fixture = {
                 "model": "mainapp.member",
                 "pk": member.pk,
                 "fields": {
                     "first_name": member.first_name,
                     "last_name": member.last_name,
                     "team": member.team_id,
+                    "section": member.section_id,
                     "peg_number": member.peg_number
                 }
             }
-            members_fixture.append(member_fixture)
+            fixtures.append(fixture)
 
         with open("src/mainapp/fixtures/members_fixture.json", "w") as f:
-            f.write(json.dumps(members_fixture, indent=2))
+            f.write(json.dumps(fixtures, indent=2))
             self.stdout.write(self.style.SUCCESS("Created members_fixture.json."))
+
+    # def handle(self, *args, **options):
+    #     num_members = options["num_members"]
+    #     teams = Team.objects.all()
+    #     if not teams:
+    #         print("No teams found. Please create some teams first.")
+    #         return
+
+    #     members = []
+    #     for team in teams:
+    #         for _ in range(num_members):
+    #             first_name = names.get_first_name()
+    #             last_name = names.get_last_name()
+    #             member = Member.objects.create(first_name=first_name, last_name=last_name, team=team)
+    #             members.append(member)
+
+    #     self.stdout.write(self.style.SUCCESS(f"Created {num_members} members."))
+
+    #     # create a members fixture file
+    #     members_fixture = []
+    #     for member in members:
+    #         member_fixture = {
+    #             "model": "mainapp.member",
+    #             "pk": member.pk,
+    #             "fields": {
+    #                 "first_name": member.first_name,
+    #                 "last_name": member.last_name,
+    #                 "team": member.team_id,
+    #                 "peg_number": member.peg_number,
+    #             }
+    #         }
+    #         members_fixture.append(member_fixture)
+
+    #     with open("src/mainapp/fixtures/members_fixture.json", "w") as f:
+    #         f.write(json.dumps(members_fixture, indent=2))
+    #         self.stdout.write(self.style.SUCCESS("Created members_fixture.json."))

src/mainapp/management/commands/create_sections_fixture.py

@@ -0,0 +1,79 @@
+"""Command to create test data fixture for sections."""
+
+import json
+from string import ascii_uppercase
+
+from django.core.management.base import BaseCommand
+
+from mainapp.models import Section, SectionValidator
+
+
+def name_sort_key(name):
+    if len(name) == 1:
+        return (0, name)
+    else:
+        return (1, name[:-1], name[-1])
+
+
+class Command(BaseCommand):
+    help = "Creates a fixture file for Team objects"
+
+    def add_arguments(self, parser):
+        parser.add_argument("amount_of_sections", type=int, help="Number of sections to create")
+
+    def handle(self, *args, **options):
+        amount_of_sections = options["amount_of_sections"]
+
+        used_names = set()
+        last_name = ""
+
+        for i in range(amount_of_sections):
+            add_character = last_name.endswith("Z")
+            if add_character:
+                last_name = ""
+
+            new_name = last_name if add_character else ""
+            if not new_name.endswith("Z"):
+                new_name = new_name[:-1] if len(new_name) > 1 else new_name
+
+            try:
+                new_name += ascii_uppercase[i]
+            except IndexError:
+                quotient, remainder = divmod(i, 26)
+                new_name += ascii_uppercase[quotient - 1] + ascii_uppercase[remainder]
+
+            while new_name in used_names:
+                if new_name[-1] == "Z":
+                    idx = len(new_name) - 2
+                    while idx >= 0 and new_name[idx] == "Z":
+                        idx -= 1
+                    if idx < 0:
+                        new_name = "A" * (len(new_name) + 1)
+                    else:
+                        new_name = new_name[:idx] + chr(ord(new_name[idx]) + 1) + "A" * (len(new_name) - idx - 1)
+                else:
+                    new_name = new_name[:-1] + chr(ord(new_name[-1]) + 1)
+
+            used_names.add(new_name)
+            last_name = new_name
+
+        names = sorted([name for name in used_names], key=name_sort_key)
+
+        print([name for name in names])
+        sections = [Section(name=name) for name in names]
+        Section.objects.bulk_create(sections)
+
+        fixture = [{
+            "model": "mainapp.section",
+            "pk": section.pk,
+            "fields": {
+                "name": section.name
+            }
+        } for section in sections]
+
+        for section in sections:
+            section.delete()
+
+        with open("src/mainapp/fixtures/sections_fixture.json", "w") as file:
+            file.write(json.dumps(fixture, indent=4))
+            self.stdout.write(self.style.SUCCESS("Created sections_fixture.json."))

src/mainapp/management/commands/create_superuser.py

@@ -0,0 +1,28 @@
+from django.contrib.auth.management.commands import createsuperuser
+from django.core.management import CommandError
+
+
+class Command(createsuperuser.Command):
+    help = 'Crate a superuser, and allow password to be provided'
+
+    def add_arguments(self, parser):
+        super(Command, self).add_arguments(parser)
+        parser.add_argument(
+            '--password', dest='password', default=None,
+            help='Specifies the password for the superuser.',
+        )
+
+    def handle(self, *args, **options):
+        password = options.get('password')
+        username = options.get('username')
+        database = options.get('database')
+
+        if password and not username:
+            raise CommandError("--username is required if specifying --password")
+
+        super(Command, self).handle(*args, **options)
+
+        if password:
+            user = self.UserModel._default_manager.db_manager(database).get(username=username)
+            user.set_password(password)
+            user.save()

src/mainapp/management/commands/create_teams_fixture.py

@@ -1,12 +1,10 @@
 """Command to create test data fixture for teams."""
 
-import random
 import json
-from string import ascii_uppercase
 
 from django.core.management.base import BaseCommand
-from django.db.utils import IntegrityError
-from mainapp.models import Team, BLOCKED_SECTION_LETTERS
+
+from mainapp.models import Team
 
 
 class Command(BaseCommand):
@@ -16,43 +14,15 @@ class Command(BaseCommand):
         parser.add_argument("amount_of_teams", type=int, help="Number of teams to create")
 
     def handle(self, *args, **options):
-
-        existing_teams = Team.objects.all()
-
-        # Available sections
-        available_sections = [
-            char for char in [*ascii_uppercase]
-            if char.lower() not in BLOCKED_SECTION_LETTERS
-            and char not in [team.section_letter for team in existing_teams]
-        ]
-
-        if not available_sections:
-            self.stdout.write(self.style.ERROR(
-                f"There are no available sections for new teams."
-            ))
-            return
-
         teams_amount = options["amount_of_teams"]
-        max_teams = len(available_sections)
-
-        if teams_amount > max_teams:
-            self.stdout.write(self.style.ERROR(
-                f"Number of teams is too large [{teams_amount}/{max_teams}]."
-            ))
-            return
 
         # Create the new teams (this will create them in the database)#
-        new_teams = []
-        for i in range(teams_amount):
-            section_letter = random.choice(available_sections)
-            available_sections.remove(section_letter)
-            team = Team.objects.create(section_letter=section_letter)
-            new_teams.append(team)
+        new_teams = [Team.objects.create() for i in range(teams_amount)]
 
         teams_fixture = [{
             "model": "mainapp.team",
             "pk": team.pk,
-            "fields": {"section_letter": team.section_letter}
+            "fields": {}
         } for team in new_teams]
 
         # Remove the teams from the database

src/mainapp/migrations/0001_initial.py

@@ -1,8 +1,7 @@
-# Generated by Django 4.1.5 on 2023-05-07 21:57
+# Generated by Django 4.1.5 on 2023-05-15 11:20
 
 from django.db import migrations, models
 import django.db.models.deletion
-import mainapp.models
 
 
 class Migration(migrations.Migration):
@@ -14,16 +13,17 @@ class Migration(migrations.Migration):
 
     operations = [
         migrations.CreateModel(
-            name='Peg',
+            name='Section',
             fields=[
-                ('peg_number', mainapp.models.ReusableAutoField(default=mainapp.models.ReusableAutoField.get_default, editable=False, primary_key=True, serialize=False)),
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('character', models.CharField(max_length=3, unique=True)),
             ],
         ),
         migrations.CreateModel(
             name='Team',
             fields=[
-                ('team_number', mainapp.models.ReusableAutoField(default=mainapp.models.ReusableAutoField.get_default, editable=False, primary_key=True, serialize=False)),
-                ('section_letter', models.CharField(choices=[('A', 'A'), ('B', 'B'), ('C', 'C'), ('D', 'D'), ('E', 'E'), ('F', 'F'), ('G', 'G'), ('H', 'H'), ('I', 'I'), ('J', 'J'), ('K', 'K'), ('L', 'L'), ('M', 'M'), ('N', 'N'), ('O', 'O'), ('P', 'P'), ('Q', 'Q'), ('R', 'R'), ('S', 'S'), ('T', 'T'), ('U', 'U'), ('V', 'V'), ('W', 'W'), ('X', 'X'), ('Y', 'Y'), ('Z', 'Z')], max_length=1, unique=True)),
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('number', models.PositiveIntegerField(unique=True)),
             ],
         ),
         migrations.CreateModel(
@@ -33,7 +33,8 @@ class Migration(migrations.Migration):
                 ('first_name', models.CharField(max_length=255)),
                 ('last_name', models.CharField(max_length=255)),
                 ('peg_number', models.PositiveIntegerField(null=True, unique=True)),
-                ('team', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='members', to='mainapp.team', validators=[mainapp.models.validate_team_size])),
+                ('section', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='members', to='mainapp.section')),
+                ('team', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='members', to='mainapp.team')),
             ],
         ),
     ]

src/mainapp/migrations/0002_venue_delete_member_delete_section_delete_team.py

@@ -0,0 +1,45 @@
+# Generated by Django 4.1.5 on 2023-10-22 21:33
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mainapp', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Venue',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255)),
+                ('description', models.TextField(blank=True)),
+                ('extra_notes', models.TextField(blank=True)),
+                ('venue_type', models.CharField(choices=[('FISHERY', 'Fishery'), ('CLUB', 'Club'), ('PRIVATE', 'Private')], max_length=50)),
+                ('phone_number', models.CharField(max_length=100)),
+                ('email_address', models.EmailField(max_length=254)),
+                ('website_url', models.URLField()),
+                ('street_address', models.CharField(max_length=100)),
+                ('city', models.CharField(max_length=255)),
+                ('provence', models.CharField(max_length=100)),
+                ('postal_code', models.CharField(max_length=20)),
+                ('country', models.CharField(max_length=100)),
+                ('latitude', models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True)),
+                ('longitude', models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True)),
+                ('twitter_url', models.URLField(blank=True)),
+                ('instagram_url', models.URLField(blank=True)),
+                ('facebook_url', models.URLField(blank=True)),
+            ],
+        ),
+        migrations.DeleteModel(
+            name='Member',
+        ),
+        migrations.DeleteModel(
+            name='Section',
+        ),
+        migrations.DeleteModel(
+            name='Team',
+        ),
+    ]

src/mainapp/migrations/0003_waters.py

@@ -0,0 +1,27 @@
+# Generated by Django 4.1.5 on 2023-10-23 22:17
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mainapp', '0002_venue_delete_member_delete_section_delete_team'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Waters',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100)),
+                ('description', models.TextField(max_length=255)),
+                ('pegs_min', models.IntegerField()),
+                ('pegs_max', models.IntegerField()),
+                ('water_type', models.CharField(choices=[('CW', 'Commercial Water'), ('NSW', 'Natural Still Water'), ('C', 'Canal'), ('R', 'River'), ('L', 'Loch')], max_length=50)),
+                ('fish_type', models.CharField(choices=[('C', 'Coarse'), ('SC', 'Specimen Carp'), ('G', 'Game'), ('P', 'Predator')], max_length=50)),
+                ('venue', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='mainapp.venue')),
+            ],
+        ),
+    ]

src/mainapp/migrations/0004_venue_active_alter_venue_description.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.1.5 on 2023-11-06 20:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mainapp', '0003_waters'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='venue',
+            name='active',
+            field=models.BooleanField(default=True),
+        ),
+        migrations.AlterField(
+            model_name='venue',
+            name='description',
+            field=models.TextField(blank=True, max_length=500),
+        ),
+    ]

src/mainapp/models.py

@@ -1,131 +1,276 @@
-from string import ascii_uppercase
+"""Models for the mainapp."""
 
 from django.db import models
 from django.core.exceptions import ValidationError
 
-from django.db import models
 
+class Venue(models.Model):
+    """Represents a Venue and Waters."""
 
-class ReusableAutoField(models.PositiveIntegerField):
-    """A django auto field that can reuse deleted primary keys"""
+    VENUE_TYPES = (
+        ("FISHERY", "Fishery"),
+        ("CLUB", "Club"),
+        ("PRIVATE", "Private")
+    )
 
-    def get_next_available_id(self, model_cls, using=None):
-        """
-        Returns the next available id for the given model class.
-        """
-        all_ids = set(range(1, model_cls._default_manager.count()+1))
-        used_ids = set(model_cls._default_manager.all().values_list('pk', flat=True))
-        available_ids = all_ids - used_ids
+    name = models.CharField(max_length=255)
+    description = models.TextField(blank=True, max_length=500)
+    extra_notes = models.TextField(blank=True)
+    venue_type = models.CharField(choices=VENUE_TYPES, max_length=50)
 
-        if available_ids:
-            return min(available_ids)
+    # Contact information
+    phone_number = models.CharField(max_length=100)
+    email_address = models.EmailField()
+    website_url = models.URLField()
 
-        if used_ids:
-            return max(used_ids) + 1
+    # Location information
+    street_address = models.CharField(max_length=100)
+    city = models.CharField(max_length=255)
+    provence = models.CharField(max_length=100)
+    postal_code = models.CharField(max_length=20)
+    country = models.CharField(max_length=100)
+    latitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
+    longitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
 
-        return 1
+    # Socials information
+    twitter_url = models.URLField(blank=True)
+    instagram_url = models.URLField(blank=True)
+    facebook_url = models.URLField(blank=True)
 
-    def get_default(self):
-        """Returns the default value for this field"""
-
-        return self.get_next_available_id(self.model)
-
-
-class Peg(models.Model):
-    """Represents a person's peg"""
-
-    peg_number = ReusableAutoField(primary_key=True, default=ReusableAutoField.get_default, editable=False)
+    active = models.BooleanField(default=True)
 
     def __str__(self):
-        return f"Peg {self.peg_number}"
+        return self.name
+
+    def waters(self):
+        """Returns all waters linked to this venue."""
+
+        waters = Waters.objects.filter(venue=self)
+        return waters
 
 
-def validate_team_size(value):
-    if Member.objects.filter(team=value).count() >= 3:
-        raise ValidationError('Team already has maximal amount of members (3)')
+class Waters(models.Model):
+    """Represents the waters of a Venue"""
 
+    WATER_TYPES = (
+        ("CW", "Commercial Water"),
+        ("NSW", "Natural Still Water"),
+        ("C", "Canal"),
+        ("R", "River"),
+        ("L", "Loch"),
+    )
 
-class Member(models.Model):
-    """Represents a member of a team"""
+    FISH_TYPES = (
+        ("C", "Coarse"),
+        ("SC", "Specimen Carp"),
+        ("G", "Game"),
+        ("P", "Predator"),
+    )
 
-    first_name = models.CharField(max_length=255)
-    last_name = models.CharField(max_length=255)
-    team = models.ForeignKey("Team", on_delete=models.SET_NULL, null=True, blank=True, validators=(validate_team_size,), related_name='members')
-    peg_number = models.PositiveIntegerField(null=True, editable=True, unique=True)
-    # peg = models.OneToOneField("Peg", on_delete=models.SET_NULL, null=True, blank=True)
+    venue = models.ForeignKey(Venue, on_delete=models.CASCADE)
 
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+    name = models.CharField(max_length=100)
+    description = models.TextField(max_length=255)
 
-        # If the peg_number field is not set, we assign it the smallest
-        # available positive integer, excluding any used values.
-        if not self.peg_number:
-            used_peg_numbers = Member.objects.exclude(id=self.id).exclude(peg_number=None).values_list("peg_number", flat=True)
-            peg_numbers = set(range(1, Member.objects.count() + 1)) - set(used_peg_numbers)
-            if peg_numbers:
-                self.peg_number = min (peg_numbers)
+    pegs_min = models.IntegerField()
+    pegs_max = models.IntegerField()
+    water_type = models.CharField(choices=WATER_TYPES, max_length=50)
+    fish_type = models.CharField(choices=FISH_TYPES, max_length=50)
+
+    # water_map = models.ImageField()
 
     def __str__(self):
-        return f"{self.first_name} {self.last_name} (team {self.team.team_number}))"
-
-    @property
-    def fullname(self) -> str:
-        return f"{self.first_name} {self.last_name}"
+        return self.name
 
 
-BLOCKED_SECTION_LETTERS = ["i"]  # lowercase only, sections cannot be any of these letters#
+# class ReusableAutoField(models.PositiveIntegerField):
+#     """A django auto field that can reuse deleted primary keys."""
+
+#     def get_next_available_id(self, model_cls, using=None):
+#         """
+#         Returns the next available id for the given model class.
+#         """
+#         all_ids = set(range(1, model_cls._default_manager.count()+1))
+#         used_ids = set(model_cls._default_manager.all().values_list('pk', flat=True))
+#         available_ids = all_ids - used_ids
+
+#         if available_ids:
+#             return min(available_ids)
+
+#         if used_ids:
+#             return max(used_ids) + 1
+
+#         return 1
+
+#     def get_default(self):
+#         """Returns the default value for this field"""
+
+#         return self.get_next_available_id(self.model)
 
 
-class Team(models.Model):
-    """Represents a team"""
+# class SectionValidator:
+#     """Validation class for the `section` field on the `member` model."""
 
-    team_number = ReusableAutoField(primary_key=True, default=ReusableAutoField.get_default, editable=False)
-    section_letter = models.CharField(max_length=1, unique=True, choices=[
-        (char, char) for char in ascii_uppercase if char.lower() not in BLOCKED_SECTION_LETTERS
-    ])
+#     def __init__(self, max_value="ZZZ"):
+#         self.max_value = max_value.upper()
+#         self.alphabet_size = ord("Z") - ord("A") + 1
 
-    def __str__(self):
-        return f"Team {self.team_number}"
+#     def is_valid(self, section: str, team_sections: list[str]=None) -> bool:
+#         """Returns boolean if the section passed is valid."""
+#         section = section.upper()
 
-    @property
-    def members(self) -> list[Member]:
-        Member.objects.filter(team=self)
+#         if not self._is_alphanumeric(section):
+#             return False
+
+#         if not self._is_in_alphabet(section[0]):
+#             return False
+
+#         if not self._is_in_range(section):
+#             return False
+
+#         if team_sections:
+#             if not self._is_unique(section, team_sections):
+#                 return False
+
+#             if not self._is_not_adjacent(section, team_sections):
+#                 return False
+
+#         return True
+
+#     def _is_alphanumeric(self, section: str) -> bool:
+#         """Returns boolean if all characters in the passed string are alphanumerical."""
+#         return all(c.isalnum() for c in section)
+
+#     def _is_in_alphabet(self, c) -> bool:
+#         """Returns boolean if the passed character is alphabetical."""
+#         return "A" <= c <= "Z"
+
+#     def _is_in_range(self, section) -> bool:
+#         """Returns boolean if the passed section less or equal to the max value."""
+#         section_value = self._section_value(section)
+#         max_value = self._section_value(self.max_value)
+
+#         return section_value <= max_value
+
+#     def _is_unique(self, section, team_sections) -> bool:
+#         """Returns boolean if the passed section is unique amongst `team_sections`."""
+#         return section not in team_sections
+
+#     def _is_not_adjacent(self, section, team_sections) -> bool:
+#         """Returns boolean if the passed section is not adjacent to any `team_sections`."""
+#         for team_section in team_sections:
+#             team_section_value = self._section_value(team_section)
+#             section_value = self._section_value(section)
+#             if abs(team_section_value - section_value) <= 1:
+#                 return False
+
+#         return True
+
+#     def _section_value(self, section):
+#         """Returns the value of the passed section."""
+#         n = len(section)
+#         value = sum((ord(c) - ord("A") + 1) * self.alphabet_size ** (n - i - 1) for i, c in enumerate(section))
+#         return value
 
 
-def validate_section_character(value):
-    """Validates the section character"""
+# class SectionManager(models.Manager):
 
-    value = value.upper()
-    banned_characters = ["I"]
+#     @staticmethod
+#     def get_max_section():
+#         max_section = None
+#         max_number = -1
 
-    if value in banned_characters:
-        raise ValidationError(f"The character <{value}> is a prohibited character.")
+#         # Iterate through all sections in the database
+#         for section in Section.objects.all():
+#             section_name = section.name
+#             section_number = 0
 
+#             # Calculate the section number based on the section name
+#             for i, char in enumerate(section_name):
+#                 section_number += (ord(char) - ord('A') + 1) * (26 ** (len(section_name) - i - 1))
+
+#             # Check if this section has a higher number than the current maximum
+#             if section_number > max_number:
+#                 max_number = section_number
+#                 max_section = section_name
+
+#         return max_section
+
+#     @staticmethod
+#     def find_next_section(current_section):
+#         if not current_section:
+#             return 'A'
+
+#         # Split current section name into a list of characters
+#         chars = list(current_section)
+
+#         # Increment the last character
+#         chars[-1] = chr(ord(chars[-1]) + 1)
+
+#         # Check if the last character is "Z", and carry over to the next character if necessary
+#         for i in range(len(chars) - 1, -1, -1):
+#             if chars[i] > 'Z':
+#                 chars[i] = 'A'
+#                 if i == 0:
+#                     # If the first character needs to be incremented, add a new character "A"
+#                     chars.insert(0, 'A')
+#                 else:
+#                     # Increment the previous character
+#                     chars[i - 1] = chr(ord(chars[i - 1]) + 1)
+#             else:
+#                 break
+
+#         # Join the characters back into a string and return the result
+#         return ''.join(chars)
 
 # class Section(models.Model):
-#     """Represents a section of the scoreboard"""
+#     """Represents a fishing area. Members can be assigned to a section,
+#     but no 2 teammates can be in the same or adjacent section."""
 
-#     # character field stores a single character but doesnt allow for 'I' or 'i'
-#     character = models.CharField(primary_key=True, max_length=1, validators=(validate_section_character, ))
+#     character = models.CharField(max_length=3, unique=True, null=False)
+
+#     objects = SectionManager()
 
 #     def clean(self):
+#         super().clean()
 #         self.character = self.character.upper()
 
+#     def __str__(self) -> str:
+#         return self.character
+
+
+# class Member(models.Model):
+#     """Represents a member of a team"""
+
+#     first_name = models.CharField(max_length=255)
+#     last_name = models.CharField(max_length=255)
+#     team = models.ForeignKey("Team", on_delete=models.SET_NULL, null=True, blank=True, related_name='members')
+#     peg_number = models.PositiveIntegerField(null=True, editable=True, unique=True)
+#     section = models.ForeignKey(to=Section, on_delete=models.SET_NULL, null=True, swappable=True, related_name='members')
+
+#     def __init__(self, *args, **kwargs):
+#         super().__init__(*args, **kwargs)
+
+#         # If the peg_number field is not set, we assign it the smallest
+#         # available positive integer, excluding any used values.
+#         if not self.peg_number:
+#             used_peg_numbers = Member.objects.exclude(id=self.id).exclude(peg_number=None).values_list("peg_number", flat=True)
+#             peg_numbers = set(range(1, Member.objects.count() + 1)) - set(used_peg_numbers)
+#             if peg_numbers:
+#                 self.peg_number = min (peg_numbers)
+
 #     def __str__(self):
-#         return f"Section {self.character}"
+#         return f"{self.first_name} {self.last_name} (team {self.team.number}) [section {self.section.character}]"
+
+#     @property
+#     def fullname(self) -> str:
+#         return f"{self.first_name} {self.last_name}"
 
 
-#class Scoreboard(models.Model):
-#    class Status(models.IntegerChoices):
-#        ACTIVE = 1, "Active"
-#        INACTIVE = 2, "Inactive"
-#        ARCHIVED = 3, "Archived"
-#
-#    name = models.CharField(max_length=255)
-#    category = models.CharField(max_length=255)
-#    price = models.DecimalField(max_digits=10, decimal_places=2)
-#    cost = models.DecimalField(max_digits=10, decimal_places=2)
-#    status = models.PositiveSmallIntegerField(choices=Status.choices)
-#
-#    def __str__(self):
-#        return self.name
+# class Team(models.Model):
+#     """Represents a team"""
+
+#     number = models.PositiveIntegerField(unique=True, null=False, blank=False)
+
+#     def __str__(self):
+#         return f"Team {self.number}"

src/mainapp/teams_demo_test.py

@@ -1,11 +0,0 @@
-import names
-from string import ascii_lowercase
-
-created_teams = []
-for char in ascii_lowercase:
-    created_teams.append({
-        "identifier": char.upper(),
-        "members": [{
-            "name": names.get_full_name()
-        } for i in range(9)]
-    })

src/mainapp/templates/_index.html

@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block style %}
+    <link rel="stylesheet" href="{% static 'css/ocean.css' %}">
+{% endblock style %}
+
+{% block content %}
+
+    <div class="flex-grow-1 overflow-hidden">
+        <div id="ocean">
+            <div class="bubble bubble--1"></div>
+            <div class="bubble bubble--2"></div>
+            <div class="bubble bubble--3"></div>
+            <div class="bubble bubble--4"></div>
+            <div class="bubble bubble--5"></div>
+            <div class="bubble bubble--6"></div>
+            <div class="bubble bubble--7"></div>
+            <div class="bubble bubble--8"></div>
+            <div class="bubble bubble--9"></div>
+            <div class="bubble bubble--10"></div>
+            <div class="bubble bubble--11"></div>
+            <div class="bubble bubble--12"></div>
+          </div>
+    </div>
+
+{% endblock content %}
+
+{% block scripts %}
+    <script src="{% static 'js/ocean.js' %}"></script>
+{% endblock scripts %}

src/mainapp/templates/anglers.html

@@ -0,0 +1,200 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+    Manage Anglers | 
+{% endblock title %}
+
+{% block style %}
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
+{% endblock style %}
+
+{% block header_buttons %}
+    <a href="/" class="btn btn-company px-4">Back</a>
+{% endblock header_buttons %}
+
+{% block content %}
+
+    <div class="d-flex flex-column flex-grow-1">
+
+        <div class="m-4 mb-0 row">
+            <div class="col-xl-4 col-md-8 mb-md-0 mb-4">
+                <div class="input-group">
+                    <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
+                        <i class="bi bi-sort-up"></i>
+                    </button>
+                    <input type="search" name="search" id="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Anglers">
+                    <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
+                </div>
+            </div>
+            <div class="col-xl-3 col-md-4">
+                <div class="input-group d-flex justify-content-md-end">
+                    <button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="addAngler" data-bs-toggle="tooltip" data-bs-title="Add Angler" data-bs-custom-class="light-tooltip">
+                        <i class="bi bi-plus-lg"></i>
+                    </button>
+                    <button class="btn border-secondary-subtle btn-outline-company rounded-start" id="ContractView" data-bs-toggle="tooltip" data-bs-title="Compact View" data-bs-custom-class="light-tooltip">
+                        <i class="bi bi-arrows-angle-contract"></i>
+                    </button>
+                    <button class="btn border-secondary-subtle btn-outline-company" id="expandView" data-bs-toggle="tooltip" data-bs-title="Enlarged View" data-bs-custom-class="light-tooltip">
+                        <i class="bi bi-arrows-angle-expand"></i>
+                    </button>
+                </div>
+    
+            </div>
+        </div>
+    
+        <div class="row mx-4 my-2">
+            <div class="col-xl-7">
+                <hr>
+            </div>
+        </div>
+
+        <div class="m-4 mt-0 row">
+            {% for angler in anglers %}
+            <div class="col-xl-3 col-lg-4 col-sm-6 mb-4">
+                <div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover">
+                    <div class="card-body">
+                        <h5 class="card-title">{{ angler.first_name }}</h5>
+                        <h6 class="card-subtitle mb-2 text-body-secondary">{{ angler.last_name }}</h6>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    {% comment %}
+    <!-- Header -->
+    <div class="container"></div>
+    <div class="bg-body p-4 d-flex">
+        <a href="{% url 'index' %}" class="btn btn-company px-4">Back</a>
+        <img class="ms-auto" width="40" src="{% static 'img/logo.webp' %}">
+    </div>
+    <!-- End Header -->
+    <div class="container my-4 p-4 pb-0 bg-body rounded">
+
+        <!-- Controls Header -->
+        <div class="row mb-4">
+            <div class="col-12 col-xl-4 d-flex">
+                <h3 class="mb-3 mb-xl-0">
+                    <span class="me-sm-3">Manage Anglers</span>
+                    <div class="border-company border-bottom border-2 w-100 pt-1"></div>
+                </h3>
+            </div>
+            <div class="col-sm-3 col-md-6 col-xl-4 mb-3 mb-sm-0">
+                <div class="input-group justify-content-xl-end">
+                    <button class="btn border-secondary-subtle btn-outline-company" id="addAngler" data-bs-toggle="tooltip" data-bs-title="Add Angler">
+                        <i class="bi bi-person"></i>
+                    </button>
+                    <button class="btn border-secondary-subtle btn-outline-company" id="addTeam" data-bs-toggle="tooltip" data-bs-title="Add Team">
+                        <i class="bi bi-people"></i>
+                    </button>
+                    <button class="btn border-secondary-subtle btn-outline-company" id="addSection" data-bs-toggle="tooltip" data-bs-title="Add Section">
+                        <i class="bi bi-layers"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="col-sm-9 col-md-6 col-xl-4">
+
+                <!-- Search Bar -->
+                <div class="input-group dropdown">
+                    <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
+                        <i class="bi bi-sort-up"></i>
+                    </button>
+                    <input type="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Anglers" id="search">
+                    <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
+
+                    <!-- Filters Dropdown -->
+                    <form id="sortForm">
+                        <ul class="dropdown-menu py-3 text-body-secondary bg-body-tertiary border border-light-subtle shadow-sm justify-self-center mt-2" onclick="event.stopPropagation()">
+                            <li class="px-4">
+                                <h3 class="h6 mb-3">Show Anglers in groups of</h3>
+                                <div>
+                                    <div class="d-inline-block form-check">
+                                        <input type="radio" class="form-check-input" checked value="teams" name="showGroups" id="showTeams">
+                                        <label for="showTeams" class="form-check-label">Teams</label>
+                                    </div>
+                                    <div class="d-inline-block form-check ms-4">
+                                        <input type="radio" class="form-check-input" value="sections" name="showGroups" id="showSections">
+                                        <label for="showSections" class="form-check-label">Sections</label>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="dropdown-divider my-3 mx-4 bg-light-subtle"></li>
+                            <li class="px-4">
+                                <h3 class="h6 mb-3">Sort Anglers by</h3>
+                                <div>
+                                    <div class="d-inline-block form-check">
+                                        <input type="radio" class="form-check-input" value="names" name="sortAnglers" id="sortNames">
+                                        <label for="sortNames" class="form-check-label">Name</label>
+                                    </div>
+                                    <div class="d-inline-block form-check ms-4">
+                                        <input type="radio" class="form-check-input" checked value="pegs" name="sortAnglers" id="sortPegs">
+                                        <label for="sortPegs" class="form-check-label">Peg Number</label>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </form>
+                    <!-- End Filters Dropdown -->
+
+                </div>
+                <!-- End Search Bar -->
+
+            </div>
+        </div>
+        <!-- End Controls Header -->
+
+        <!-- Groups Container -->
+        <div class="row" id="groups"></div>
+        <!-- End Groups Container -->
+
+        <!-- Loading Spinner -->
+        <div class="col-12 text-center pb-4" id="loadingSpinner" style="display: none;">
+            <div class="spinner-border spinner-border-lg" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+        <!-- End Loading Spinner -->
+
+        <!-- Not Found Message -->
+        <div class="pb-4" id="notFound" style="display: none;">
+            <div class="alert alert-danger m-0" role="alert">
+                No groups could be found, perhaps you need to refine your search?
+            </div>
+        </div>
+        <!-- End Not Found Message -->
+          
+    </div>
+
+    <!-- Section Modal -->
+    {% include "modals/section.html" %}
+    <!-- End Section Modal -->
+
+    <!-- Team Modal -->
+    {% include "modals/team.html" %}
+    <!-- End Team Modal -->
+
+    <!-- Angler Modal -->
+    {% include "modals/angler.html" %}
+    <!-- End Angler Modal -->
+    {% endcomment %}
+
+{% endblock content %}
+
+{% block scripts %}
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>
+
+    <script type="text/javascript">
+        const pageUrl = "{% url 'anglers' %}"
+        // const getPageDataUrl = "{% url 'get-angler-data' %}";  DEPRICATED FOR REWRITE
+        // const updateMemberUrl = "{% url 'update-member' %}";
+        // const updateSectionUrl = "{% url 'update-section' %}"
+        // const updateTeamUrl = "{% url 'update-team' %}"
+        const getNextIdentifierUrl = "{% url 'get-next-identifier' %}"
+        const csrfMiddlewareToken = "{{ csrf_token }}";
+    </script>
+    <script src="{% static 'js/mainapp/anglers.js' %}"></script>
+{% endblock scripts %}

src/mainapp/templates/index.html

@@ -1,56 +1,515 @@
 {% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+    Venues | 
+{% endblock title %}
+
+{% block style %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+{% endblock style %}
+
+{% block header_buttons %}
+{% endblock header_buttons %}
 
 {% block content %}
-    <section class="py-5 text-center container">
-        <div class="row py-lg-5">
-            <div class="col-lg-6 col-md-8 mx-auto">
-                <h1 class="fw-light text-white">Results System</h1>
-                <p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus elementum diam nec semper. Nullam vestibulum enim eu nisi condimentum, vitae suscipit risus imperdiet.</p>
+<div class="px-4 bg-body shadow mb-5">
+    <div class="d-flex justify-content-between align-items-center p-2 flex-wrap mw-1920 mx-auto">
+        <h1 class="fw-bold h4 mb-0 ms-2">Venues &amp; Waters</h1>
+        <div class="input-group w-auto">
+            <div class="input-group-text bg-body pe-0">
+                <i class="bi bi-search"></i>
+            </div>
+            <input type="search" class="form-control border-start-0" placeholder="Search Venues">
+        </div>
+        <div class="d-flex flex-row align-items-center">
+            <button class="btn btn-animate btn-primary rounded-2 me-3" onclick="openVenueModal(-1);">
+                <i class="bi bi-plus-lg me-1"></i>
+                New
+            </button>
+            <button class="btn btn-animate btn-outline-secondary btn-animate border-secondary-subtle rounded-2 me-3">
+                <i class="bi bi-upload me-1"></i>
+                Import
+            </button>
+            <button class="btn btn-animate btn-outline-secondary border-secondary-subtle rounded-2 me-3">
+                <i class="bi bi-sort-alpha-up me-sm-1"></i>
+                <i class="bi bi-chevron-down"></i>
+            </button>
+            <button class="btn btn-animate btn-outline-secondary border-secondary-subtle rounded-2">
+                <i class="bi bi-filter-right me-sm-1"></i>
+                <i class="bi bi-chevron-down"></i>
+            </button>
+        </div>
+    </div>
+</div>
+<div class="d-flex justify-content-center w-100">
+    <div class="row flex-row-reverse mb-4 mx-lg-4 mw-1920 mx-auto">
+        <div class="col-lg-3 d-flex flex-column">
+            <div id="locationMapContainer" class="w-100 position-relative shadow mb-4 bg-body rounded-3 overflow-hidden" style="height: 300px;">
+                <div id="allLocationsMap" class="w-100 h-100"></div>
+            </div>
+            <div class="bg-body rounded-3 p-4 flex-grow-1 shadow mb-3">
+                <div class="text-body small">
+                    placeholder<br>
+                    maybe a graph here?
+                </div>
             </div>
         </div>
-    </section>
-
-    <div class="album py-5 bg-light">
-        <div class="container">
-            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-                
-                <!-- Teams & Members -->
-                <div class="col">
-                    <div class="card shadow-sm">
-                        <a href="{% url 'teams' %}">
-                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
-                            <div class="card-body">
-                                <p class="card-text">Teams / Members</p>
-                            </div>
-                        </a>
+        <div class="col-lg-9">
+            <div class="row gx-3 px-2 mt-0">
+                {% for venue in venues %}
+                    <div class="col-xxl-4 col-xl-6 col-md-6 col-sm-12 mb-3">
+                        <div class="rounded-2 h-100 p-4 bg-body shadow d-flex flex-column">
+                            <header class="d-flex justify-content-between align-items-start mb-3 dropend">
+                                <div class="text-truncate">
+                                    <h4 class="h6 mb-1 text-body-secondary small">
+                                        {% if venue.venue_type == "FISHERY" %}
+                                        Fishery
+                                        {% elif venue.venue_type == "PRIVATE" %}
+                                        Private
+                                        {% elif venue.venue_type == "CLUB" %}
+                                        Club
+                                        {% endif %}
+                                    </h4>
+                                    <h4 class="h6 mb-0 me-2 text-truncate fw-bold">{{ venue.name }}</h4>
+                                </div>
+                                <button class="border-0 bg-transparent" type="button" data-bs-toggle="dropdown">
+                                    <i class="bi bi-three-dots fs-4 d-flex"></i>
+                                </button>
+                                <ul class="dropdown-menu rounded-4 overflow-hidden py-0 shadow-sm" style="width: fit-content; min-width: fit-content;">
+                                    <li>
+                                        <button class="dropdown-item hover-fill-primary py-2">
+                                            <i class="bi bi-eye"></i>
+                                        </button>
+                                    </li>
+                                    <li>
+                                        <hr class="dropdown-divider my-0">
+                                    </li>
+                                    <li>
+                                        <button class="dropdown-item py-2" onclick="openVenueModal({{ venue.id }});">
+                                            <i class="bi bi-pencil"></i>
+                                        </button>
+                                    </li>
+                                    <li>
+                                        <hr class="dropdown-divider my-0">
+                                    </li>
+                                    <li>
+                                        <button class="dropdown-item py-2 hover-fill-danger">
+                                            <i class="bi bi-trash"></i>
+                                        </button>
+                                    </li>
+                                </ul>
+                            </header>
+                            <p class="text-body-secondary venue-description mb-4">{{ venue.description }}</p>
+                            <div class="d-flex align-items-center fs-6 mt-auto ">
+                                {% if venue.email_address %}
+                                <a href="mailto:{{ venue.email_address }}" class="text-reset text-hover-primary me-3" data-bs-toggle="tooltip" data-bs-title="{{ venue.email_address }}">
+                                    <i class="bi bi-envelope-at"></i>
+                                </a>
+                                {% endif %}
+                                {% if venue.phone_number %}
+                                <a href="tel:{{ venue.phone_number }}" class="text-reset text-hover-primary me-3" data-bs-toggle="tooltip" data-bs-title="{{ venue.phone_number }}">
+                                    <i class="bi bi-telephone"></i>
+                                </a>
+                                {% endif %}
+                                {% if venue.latitude and venue.longitude %}
+                                <a href="https://www.openstreetmap.org/?mlat={{ venue.latitude }}&mlon={{ venue.longitude }}" target="_blank" class="text-reset text-hover-primary me-3" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="{{ venue.street_address }}<br>{{ venue.city }}, {{ venue.provence }}<br>{{ venue.postal_code }}">
+                                    <i class="bi bi-geo-alt"></i>
+                                </a>
+                                {% endif %}
+                                {% if venue.website_url %}
+                                <a href="{{ venue.website_url }}" class="text-reset text-hover-primary me-3" target="_blank" data-bs-toggle="tooltip" data-bs-title="{{ venue.website_url }}">
+                                    <i class="bi bi-globe2"></i>
+                                </a>
+                                {% endif %}
+                                <div class="d-inline mx-auto"></div>
+                                {% if venue.waters %}
+                                <div class="badge bg-info-subtle text-info-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="There are {{ venue.waters|length }} waters in this venue">
+                                    {{ venue.waters|length }}
+                                    <i class="bi bi-droplet-half "></i>
+                                </div>
+                                {% endif %}
+                                {% if not venue.latitude or not venue.longitude or not venue.phone_number or not venue.website_url or not venue.email_address %}
+                                    <div class="badge bg-warning-subtle text-warning-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="There are missing details for this venue">
+                                        <i class="bi bi-exclamation-triangle"></i>
+                                    </div>
+                                {% endif %}
+                                {% if not venue.active %}
+                                    <div class="badge bg-danger-subtle text-danger-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="This venue is inactive">
+                                        <i class="bi bi-x-lg"></i>
+                                    </div>
+                                {% endif %}
+                            </div> 
+                        </div>
                     </div>
+                {% endfor %}
+                <div class="col-xxl-4 col-xl-6 col-md-6 col-sm-12">
+                    <btn class="btn-animate bg-none border-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center" role="button" onclick="openVenueModal(-1);">
+                        <i class="bi bi-plus-lg fs-1"></i>
+                        <span class="fw-bold">
+                            Create new
+                        </span>
+                    </btn>
                 </div>
-
-                <!-- Scoreboard -->
-                <div class="col">
-                    <div class="card shadow-sm">
-                        <a href="{% url 'scoreboard' %}">
-                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
-                            <div class="card-body">
-                                <p class="card-text">Scoreboard</p>
-                            </div>
-                        </a>
-                    </div>
-                </div>
-
-                <!-- Results -->
-                <div class="col">
-                    <div class="card shadow-sm">
-                        <a href="{% url 'results' %}">
-                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
-                            <div class="card-body">
-                                <p class="card-text">Results</p>
-                            </div>
-                        </a>
-                    </div>
-                </div>
-
             </div>
         </div>
     </div>
+</div>
+
+<div id="venueModal" class="modal fade" data-venue-id="-1" data-bs-backdrop="static">
+    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title text-truncate me-5">New Venue</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="row g-0 flex-md-grow-1">
+                <div class="col-md-1">
+                    <div id="sidebarNavigation" class="bg-body-tertiary">
+                        <div class="modal-sidebar flex-row flex-md-column align-items-start text-center" role="tablist">
+                            <button id="detailsTab" class="modal-sidebar-btn active" type="button" data-bs-toggle="tab" data-bs-target="#detailsContent" role="tab" aria-controls="detailsContent" aria-selected="true">
+                                <i class="bi bi-file-earmark-text"></i>
+                            </button>
+                            <button id="addressTab" class="modal-sidebar-btn" type="button" data-bs-toggle="tab" data-bs-target="#addressContent" role="tab" aria-controls="addressContent" aria-selected="false">
+                                <i class="bi bi-geo-alt"></i>
+                            </button>
+                            <button id="contactTab" class="modal-sidebar-btn" type="button" data-bs-toggle="tab" data-bs-target="#contactContent" role="tab" aria-controls="contactContent" aria-selected="false">
+                                <i class="bi bi-telephone"></i>
+                            </button>
+                            <button id="watersTab" class="modal-sidebar-btn" type="button" data-bs-toggle="tab" data-bs-target="#watersContent" role="tab" aria-controls="watersContent" aria-selected="false">
+                                <i class="bi bi-droplet-half"></i>
+                            </button>
+                            <button id="confirmTab" class="modal-sidebar-btn mt-md-auto" type="button" data-bs-toggle="tab" data-bs-target="#confirmContent" role="tab" aria-controls="confirmContent" aria-selected="false">
+                                <i class="bi bi-check-lg"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-11 overflow-auto">
+                    <div class="tab-content d-inline-block w-100 h-100 py-3 px-4">
+                        <div id="detailsContent" class="tab-pane fade flex-column h-100 show active">
+                            <div class="form-floating mb-4">
+                                <input type="text" name="venueName" id="venueName" class="form-control" placeholder="">
+                                <label for="venueName" class="form-label">Venue Name</label>
+                            </div>
+                            <div class="form-floating mb-4">
+                                <textarea class="form-control" style="height: 150px; resize: none;" placeholder=""></textarea>
+                                <label for="" class="form-label">Description</label>
+                            </div>
+                            <div class="mb-4">
+                                <div class="form-check form-check-inline">
+                                    <input type="radio" name="venueType" id="venueFishery" class="form-check-input">
+                                    <label for="venueFishery" class="form-check-label">Fishery</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                    <input type="radio" name="venueType" id="venueClub" class="form-check-input">
+                                    <label for="venueClub" class="form-check-label">Club</label>
+                                </div>
+                                <div class="form-check form-check-inline">
+                                    <input type="radio" name="venueType" id="venuePrivate" class="form-check-input">
+                                    <label for="venuePrivate" class="form-check-label">Private</label>
+                                </div>
+                            </div>
+                            <div class="form-check form-switch">
+                                <input type="checkbox" name="venueActive" id="venueActive" class="form-check-input">
+                                <label for="venueActive" class="form-check-label">Venue is active?</label>
+                            </div>
+                            <div class="mt-5 mt-md-auto d-flex justify-content-end">
+                                <button class="btn btn-animate btn-outline-secondary px-3 me-auto" type="button" data-bs-dismiss="modal">Cancel</button>
+                                <button class="btn btn-animate btn-primary btn-animate px-3" type="button" onclick="$('#addressTab').click();">Next</button>
+                            </div>
+                        </div>
+                        <div id="addressContent" class="tab-pane fade flex-column h-100">
+                            <div class="form-floating mb-4">
+                                <input type="text" name="venueSearch" id="venueSearch" class="form-control" placeholder="">
+                                <label for="venueSearch" class="form-label">
+                                    <i class="bi bi-search me-1"></i>
+                                    Post Code or Street Address
+                                </label>
+                            </div>
+                            <div id="venueSearchResults" style="display: none">
+                                <div class="row">
+                                    <div class="col-lg-6">
+                                        <div class="form-floating mb-3">
+                                            <input type="text" name="venueStreetNum" id="venueStreetNum" class="form-control-plaintext" placeholder="" readonly>
+                                            <label for="venueStreetNum" class="form-label">Street Number</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-6">
+                                        <div class="form-floating mb-3">
+                                            <input type="text" name="venueStreet" id="venueStreet" class="form-control-plaintext" placeholder="" readonly>
+                                            <label for="venueStreet" class="form-label">Street Address</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-6">
+                                        <div class="form-floating mb-3">
+                                            <input type="text" name="venueCity" id="venueCity" class="form-control-plaintext" placeholder="" readonly>
+                                            <label for="venueCity" class="form-label">Town/City</label>
+                                        </div>      
+                                    </div>
+                                    <div class="col-lg-6">
+                                        <div class="form-floating mb-3">
+                                            <input type="text" name="venueCounty" id="venueCounty" class="form-control-plaintext" placeholder="" readonly>
+                                            <label for="venueCounty" class="form-label">County/Region</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-6">
+                                        <div class="form-floating mb-3">
+                                            <input type="text" name="venuePost" id="venuePost" class="form-control-plaintext" placeholder="" readonly>
+                                            <label for="venuePost" class="form-label">Post Code</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-6">
+                                        <div class="form-floating mb-3">
+                                            <input type="text" name="venueCountry" id="venueCountry" class="form-control-plaintext" placeholder="" readonly>
+                                            <label for="venueCountry" class="form-label">Country</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-6">
+                                        <div class="form-floating mb-3">
+                                            <input type="text" name="venueLat" id="venueLat" class="form-control-plaintext" placeholder="" readonly>
+                                            <label for="venueLat" class="form-label">Latitude</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-6">
+                                        <div class="form-floating mb-3">
+                                            <input type="text" name="venueLng" id="venueLng" class="form-control-plaintext" placeholder="" readonly>
+                                            <label for="venueLng" class="form-label">Longitude</label>
+                                        </div>
+                                    </div>
+                                </div>
+                                <button type="button" id="venueResetAddress" class="btn btn-animate btn-link text-decoration-none">
+                                    Reset Address
+                                </button>         
+                            </div>
+                            <div id="venueSearchHelper" class="my-auto text-center">
+                                <label for="venueSearch" class="fs-5 mx-lg-4 text-body-secondary position-relative">
+                                    <i class="bi bi-arrow-up fs-2 animation-bouncing-searchicon"></i><br>
+                                    Use the search to find your venue.
+                                </label>
+                            </div>
+                            <div class="mt-5 mt-md-auto d-flex justify-content-end">
+                                <button class="btn btn-animate  btn-outline-secondary me-3" type="button" onclick="$('#detailsTab').click();">Back</button>
+                                <button class="btn btn-animate  btn-primary px-3" type="button" onclick="$('#contactTab').click();">Next</button>
+                            </div>
+                        </div>
+                        <div id="contactContent" class="tab-pane fade flex-column h-100">
+                            <div class="row">
+                                <div class="col-6">
+                                    <div class="form-floating mb-4">
+                                        <input type="tel" name="venuePhone" id="venuePhone" class="form-control" placeholder="">
+                                        <label for="venuePhone" class="form-label">Phone Number</label>
+                                    </div>
+                                </div>
+                                <div class="col-6">
+                                    <div class="form-floating mb-4">
+                                        <input type="email" name="venueEmail" id="venueEmail" class="form-control" placeholder="">
+                                        <label for="venueEmail" class="form-label">Email Address</label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-floating mb-4">
+                                <input type="url" name="venueWebsite" id="venueWebsite" class="form-control" placeholder="">
+                                <label for="venueWebsite" class="form-label">Website URL</label>
+                            </div>
+                            <div class="input-group mb-4">
+                                <label for="venueUseFacebook" class="input-group-text">
+                                    <input type="checkbox" name="venueUseFacebook" id="venueUseFacebook" class="form-check-input mt-0">
+                                </label>
+                                <div class="form-floating">
+                                    <input type="url" name="venueFacebook" id="venueFacebook" class="form-control" placeholder="" disabled>
+                                    <label for="" class="form-label">Facebook URL</label>
+                                </div>
+                            </div>
+                            <div class="input-group mb-4">
+                                <label for="venueUseInstagram" class="input-group-text">
+                                    <input type="checkbox" name="venueUseInstagram" id="venueUseInstagram" class="form-check-input mt-0">
+                                </label>
+                                <div class="form-floating">
+                                    <input type="url" name="venueInstagram" id="venueInstagram" class="form-control" placeholder="" disabled>
+                                    <label for="venueInstagram" class="form-label">Instagram URL</label>
+                                </div>
+                            </div>
+                            <div class="input-group mb-4">
+                                <label for="venueUseTwitter" class="input-group-text">
+                                    <input type="checkbox" name="venueUseTwitter" id="venueUseTwitter" class="form-check-input mt-0">
+                                </label>
+                                <div class="form-floating">
+                                    <input type="url" name="venueTwitter" id="venueTwitter" class="form-control" placeholder="" disabled>
+                                    <label for="venueTwitter" class="form-label">Twitter URL</label>
+                                </div>
+                            </div>
+                            <div class="mt-5 mt-md-auto d-flex justify-content-end">
+                                <button class="btn btn-animate  btn-outline-secondary me-3" type="button" onclick="$('#addressTab').click();">Back</button>
+                                <button class="btn btn-animate  btn-primary px-3" type="button" onclick="$('#watersTab').click();">Next</button>
+                            </div>
+                        </div>
+                        <div id="watersContent" class="tab-pane fade flex-column h-100" style="max-height: 460px;">
+                            <div class="row">
+                                {% for i in "012345678912345"|make_list %}
+                                <div class="col-md-6">
+                                    <div class="bg-body-tertiary rounded-2 mb-4 p-4">
+                                        <div class="fs-6 fw-bold text-truncate">Section A · Coal Wharf, Market Drayton</div>
+                                        <div class="fs-6 text-body-secondary text-truncate">Commercial Water</div>
+                                        <div class="fs-6 text-body-tertiary text-truncate">Specimen Carp</div>
+                                    </div>
+                                </div>
+                                {% endfor %}
+                            </div>
+                            <div class="mt-5 pb-3 mt-md-auto d-flex justify-content-end">
+                                <button class="btn btn-animate  btn-outline-secondary me-3" type="button" onclick="$('#contactTab').click();">Back</button>
+                                <button class="btn btn-animate  btn-primary px-3" type="button" onclick="$('#confirmTab').click();">Next</button>
+                            </div>
+                            <button id="watersContentScroll" class="btn btn-animate  btn-lg btn-primary shadow-sm m-4">
+                                <i class="bi bi-chevron-down"></i>
+                            </button>
+                        </div>
+                        <div id="confirmContent" class="tab-pane fade flex-column h-100">
+                            <div class="row">
+                                <div class="col-12">
+                                    <div class="form-floating mb-3">
+                                        <input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Chequered Lake">
+                                        <label for="" class="form-label">Venue Name</label>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <div class="form-floating mb-3">
+                                        <input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Some description...">
+                                        <label for="" class="form-label">Description</label>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <div class="form-floating mb-3">
+                                        <input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Fishery">
+                                        <label for="" class="form-label">Venue Type</label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="mt-5 mt-md-auto d-flex justify-content-end">
+                                <button class="btn btn-animate btn-outline-secondary me-3" type="button" onclick="$('#watersTab').click();">Back</button>
+                                <button class="btn btn-animate btn-primary" type="button" onclick="alert('not implemented')">Save Changes</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- <div id="venueModal" class="modal fade" data-venue-id="-1" data-bs-backdrop="static">
+    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down ">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">New Venue</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div id="newVenuePages" class="modal-body">
+                <div id="detailsPage" class="page active">
+                    <div class="form-floating mb-3">
+                        <input type="text" class="form-control" placeholder="">
+                        <label for="" class="form-label">Name</label>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <textarea class="form-control venue-textarea" placeholder=""></textarea>
+                        <label for="" class="form-label">Description</label>
+                    </div>
+                    <label class="form-label">Type</label>
+                    <div class="mb-3 group-radio-btns">
+                        <input type="radio" name="vType" id="vtFishery" class="btn-check">
+                        <label for="vtFishery" class="btn btn-animate btn-outline-primary">Fishery</label>
+                        <input type="radio" name="vType" id="vtClub" class="btn-check">
+                        <label for="vtClub" class="btn btn-animate btn-outline-primary">Club</label>
+                        <input type="radio" name="vType" id="vtPrivate" class="btn-check">
+                        <label for="vtPrivate" class="btn btn-animate btn-outline-primary">Private</label>
+                    </div>
+                </div>
+                <div id="addressPage" class="page">
+                    <label class="form-label">Type part of the address or postcode to begin</label>
+                    <input type="text" class="form-control" placeholder="E.g. 'CR0 3RL' or '36 Factory Lane'">
+                </div>
+                <div id="contactPage" class="page">
+                    <div class="row mb-3">
+                        <div class="col-lg-6">
+                            <div class="form-floating">
+                                <input type="tel" class="form-control" placeholder="">
+                                <label for="">Phone Number</label>
+                            </div>
+                        </div>
+                        <div class="col-lg-6">
+                            <div class="form-floating">
+                                <input type="email" class="form-control" placeholder="">
+                                <label for="">Email Address</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input type="url" class="form-control" placeholder="">
+                        <label for="">
+                            <i class="bi bi-link-45deg"></i>
+                            Website
+                        </label>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input type="url" class="form-control" placeholder="">
+                        <label for="">
+                            <i class="bi bi-link-45deg"></i>
+                            Facebook
+                        </label>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input type="url" class="form-control" placeholder="">
+                        <label for="">
+                            <i class="bi bi-link-45deg"></i>
+                            Instagram
+                        </label>
+                    </div>
+                    <div class="form-floating mb-3">
+                        <input type="url" class="form-control" placeholder="">
+                        <label for="">
+                            <i class="bi bi-link-45deg"></i>
+                            Twitter 
+                        </label>
+                    </div>
+                </div>
+                <div id="watersPage" class="page">
+                    Waters
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-animate btn-outline-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" id="newVenueBack" class="btn btn-animate btn-secondary" style="display: none">
+                    <i class="bi bi-arrow-left me-1"></i>
+                    Back
+                </button>
+                <button type="button" id="newVenueNext" class="btn btn-animate btn-primary">
+                    Next
+                    <i class="bi bi-arrow-right ms-1"></i>
+                </button>
+                <button type="button" id="newVenueFinished" class="btn btn-animate btn-primary" style="display: none;">
+                    Save Changes
+                </button>
+            </div>
+        </div>
+    </div>
+</div> -->
+
 {% endblock content %}
+
+{% block scripts %}
+<script>
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {trigger : 'hover'}))
+</script>
+<script>
+    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r, "places"]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+      key: "AIzaSyDFR2xw2LhMPb6FC8OrfiLrJZRMRLMocvw",
+      v: "weekly",
+    });
+</script>
+  
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+<script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
+<script src="{% static 'js/mainapp/venues.js' %}" data-csrfmiddlewaretoken="{{ csrf_token }}"></script>
+{% endblock scripts %}+

src/mainapp/templates/modals/angler.html

@@ -0,0 +1,91 @@
+
+<div class="modal fade" id="anglerModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content border-0">
+            <form id="anglerForm">
+
+                <!-- Modal Header -->
+                <div class="modal-header border-0">
+                    <h3 class="modal-title fs-5 color">
+                        <span class="pe-3" id="anglerTitle">Angler Modal Title</span>
+                        <div class="border-company border-bottom border-2 w-100 pt-1"></div>
+                    </h3>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
+                </div>
+                <!-- End Modal Header -->
+
+                <!-- Modal Body -->
+                <div class="modal-body">
+
+                    <!-- Angler Name -->
+                    <div class="row g-3 mb-3">
+                        <div class="col-md-6">
+                            <div class="form-floating">
+                                <input class="form-control" type="text" name="anglerForename" id="anglerForename" placeholder="Forename" requred maxlength="30">
+                                <label for="anglerForename">Forename</label>
+                            </div>
+                            <div id="anglerForenameError" class="text-danger my-2 error" style="display: none;"></div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-floating">
+                                <input class="form-control" type="text" name="anglerSurname" id="anglerSurname" placeholder="Surname" requred maxlength="30">
+                                <label for="anglerSurname">Surname</label>
+                            </div>
+                            <div id="anglerSurnameError" class="text-danger my-2 error" style="display: none;"></div>
+                        </div>
+                    </div>
+                    <!-- End Angler Name -->
+
+                    <!-- Angler Team -->
+                    <div class="input-group mb-3">
+                        <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Team">
+                            <i class="bi bi-people"></i>
+                        </span>
+                        <select class="form-select" name="anglerTeam" id="anglerTeam" required></select>
+                    </div>
+                    <div id="anglerTeamError" class="text-danger my-2 error" style="display: none;"></div>
+                    <!-- End Angler Team -->
+
+                    <!-- Angler Section -->
+                    <div class="col-12 mb-3">
+                        <div class="input-group">
+                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Section">
+                                <i class="bi bi-layers"></i>
+                            </span>
+                            <select class="form-select" name="anglerSection" id="anglerSection" required></select>
+                        </div>
+                        <div id="anglerSectionError" class="text-danger my-2 error" style="display: none;"></div>
+                    </div>
+                    <!-- End Angler Section -->
+
+                    <!-- Angler Peg Number -->
+                    <div class="row">
+                        <div class="col-md-6 d-flex">
+                            <div class="input-group">
+                                <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Peg Number">
+                                    <i class="bi bi-tag"></i>
+                                </span>
+                                <input type="number" name="anglerPeg" id="anglerPeg" class="form-control" min="1" max="9999" required>
+                            </div>
+                            <button type="button" id="anglerPegNext" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available peg">
+                                <i class="bi bi-arrow-clockwise"></i>
+                            </button>
+                        </div>
+                        <div class="col-md-7 mt-2 pe-md-3 text-danger error" id="anglerPegError" style="display:none;"></div>
+                    </div>
+                    <!-- End Angler Peg Number -->
+
+                </div>
+                <!-- End Modal Body -->
+
+                <!-- Modal Footer -->
+                <div class="modal-footer border-0 d-flex">
+                    <button type="button" class="btn btn-outline-danger me-auto" style="display: hidden;" id="anglerDelete">Delete Angler</button>
+                    <button type="submit" class="btn btn-company px-4" id="saveAngler">Save</button>
+                </div>
+                <!-- End Modal Footer -->
+
+            </form>
+        </div>
+    </div>
+</div>

src/mainapp/templates/modals/section.html

@@ -0,0 +1,47 @@
+
+<div class="modal fade" id="sectionModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content border-0">
+
+            <!-- Modal Header -->
+            <div class="modal-header border-0">
+                <h3 class="modal-title fs-5" id="sectionTitle">
+                    Section Modal Title
+                    <div class="border-company border-bottom border-2 w-100 pt-1"></div>
+                </h3>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
+            </div>
+            <!-- End Modal Header -->
+
+            <!-- Modal Body -->
+            <div class="modal-body">
+                <form id="sectionForm">
+
+                    <!-- Section Character -->
+                    <div class="col-md-6 d-flex">
+                        <div class="input-group">
+                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Section Character">
+                                <i class="bi bi-layers"></i>
+                            </span>
+                            <input type="text" name="sectionCharacter" id="sectionCharacter" class="form-control" minlength="1" maxlength="3" value="A">
+                        </div>
+                        <button type="button" id="sectionCharacterNext" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available character">
+                            <i class="bi bi-arrow-clockwise"></i>
+                        </button>
+                    </div>
+                    <div class="col-md-6 mt-2 text-danger" id="sectionCharacterError" style="display: hidden"></div>
+                    <!-- End Section Character -->
+
+                </form>
+            </div>
+            <!-- End Modal Body -->
+
+            <!-- Modal Footer -->
+            <div class="modal-footer border-0">
+                <button type="button" class="btn btn-company px-4" id="saveSection">Save</button>
+            </div>
+            <!-- End Modal Footer -->
+
+        </div>
+    </div>
+</div>

src/mainapp/templates/modals/team.html

@@ -0,0 +1,48 @@
+
+<div class="modal fade" id="teamModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content border-0">
+            <form id="teamForm">
+
+                <!-- Modal Header -->
+                <div class="modal-header border-0">
+                    <h3 class="modal-title fs-5">
+                        <span id="teamTitle" class="pe-3">Team Modal Title</span>
+                        <div class="border-company border-bottom border-2 w-100 pt-1"></div>
+                    </h3>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
+                </div>
+                <!-- End Modal Header -->
+
+                <!-- Modal Body -->
+                <div class="modal-body">
+                        
+                        <!-- Team Number -->
+                        <div class="col-md-6 d-flex">
+                            <div class="input-group">
+                                <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Team number">
+                                    <i class="bi bi-tag"></i>
+                                </span>
+                                <input type="number" name="teamNumber" id="teamNumber" class="form-control" min="1" max="9999" value="1">
+                            </div>
+                            <button type="button" id="teamNumberNext" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available number">
+                                <i class="bi bi-arrow-clockwise"></i>
+                            </button>
+                        </div>
+                        <div class="col-md-6 mt-2 text-danger" id="teamNumberError" style="display: hidden"></div>
+                        <!-- End Team Number -->
+
+                </div>
+                <!-- End Modal Body -->
+
+                <!-- Modal Footer -->
+                <div class="modal-footer border-0 d-flex">
+                    <button class="btn btn-outline-danger me-auto" id="teamDelete" style="display: none;">Delete Team</button>
+                    <button type="submit" class="btn btn-company px-4" id="saveTeam">Save</button>
+                </div>
+                <!-- End Modal Footer -->
+
+            </form>
+        </div>
+    </div>
+</div>

src/mainapp/templates/teams.html

@@ -1,27 +1,40 @@
 {% extends "base.html" %}
+{% load static %}
 
 {% block title %}
-    Teams & Members | 
+    Manage Anglers | 
 {% endblock title %}
 
+{% block style %}
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
+{% endblock style %}
+
 {% block content %}
-    <div class="bg-body p-4">
+    <div class="bg-body p-4 d-flex">
         <a href="{% url 'index' %}" class="btn btn-company px-4">Back</a>
+        <img class="ms-auto" width="40" src="{% static 'img/logo.webp' %}">
     </div>
 
     <div class="container my-4 p-4 pb-0 bg-body rounded">
         <div class="row mb-4">
-            <div class="col-12 col-xl-4">
-                <h3 class="mb-3 mb-xl-0">Teams &amp; Members</h3>
+            <div class="col-12 col-xl-4 d-flex">
+                <h3 class="mb-3 mb-xl-0">
+                    Manage Anglers
+                    <div class="border-company border-bottom border-2 w-100 pt-1"></div>
+                </h3>
             </div>
             <div class="col-sm-3 col-md-6 col-xl-4 mb-3 mb-sm-0">
                 <div class="input-group justify-content-xl-end">
-                    <button class="btn border-secondary-subtle btn-outline-company" id="addMember" data-bs-toggle="tooltip" data-bs-title="Add Member">
+                    <button class="btn border-secondary-subtle btn-outline-company" id="addMember" data-bs-toggle="tooltip" data-bs-title="Add Angler">
                         <i class="bi bi-person"></i>
                     </button>
                     <button class="btn border-secondary-subtle btn-outline-company" id="addTeam" data-bs-toggle="tooltip" data-bs-title="Add Team">
                         <i class="bi bi-people"></i>
                     </button>
+                    <button class="btn border-secondary-subtle btn-outline-company" id="addSection" data-bs-toggle="tooltip" data-bs-title="Add Section">
+                        <i class="bi bi-layers"></i>
+                    </button>
                 </div>
             </div>
             <div class="col-sm-9 col-md-6 col-xl-4">
@@ -29,7 +42,7 @@
                     <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
                         <i class="bi bi-sort-up"></i>
                     </button>
-                    <input type="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Members" id="search">
+                    <input type="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Anglers" id="search">
                     <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
                     <form id="sortForm">
                         <ul class="dropdown-menu py-3 text-body-secondary bg-body-tertiary border border-light-subtle shadow-sm justify-self-center mt-2" onclick="event.stopPropagation()">
@@ -37,18 +50,18 @@
                                 <h3 class="h6 mb-3">Sort groups by</h3>
                                 <div>
                                     <div class="d-inline-block form-check">
-                                        <input type="radio" class="form-check-input" checked value="team_number" name="sortTeams" id="sortTeamsName">
+                                        <input type="radio" class="form-check-input" checked value="teams" name="sortGroups" id="sortTeamsName">
                                         <label for="sortTeamsName" class="form-check-label">Teams</label>
                                     </div>
                                     <div class="d-inline-block form-check ms-4">
-                                        <input type="radio" class="form-check-input" value="section_letter" name="sortTeams" id="sortTeamsSection">
+                                        <input type="radio" class="form-check-input" value="sections" name="sortGroups" id="sortTeamsSection">
                                         <label for="sortTeamsSection" class="form-check-label">Sections</label>
                                     </div>
                                 </div>
                             </li>
                             <li class="dropdown-divider my-3 mx-4 bg-light-subtle"></li>
                             <li class="px-4">
-                                <h3 class="h6 mb-3">Sort members by</h3>
+                                <h3 class="h6 mb-3">Sort anglers by</h3>
                                 <div>
                                     <div class="d-inline-block form-check">
                                         <input type="radio" class="form-check-input" value="first_name" name="sortMembers" id="sortMembersName">
@@ -65,8 +78,7 @@
                 </div>
             </div>
         </div>
-
-        <div class="row" id="teamsContainer"></div>
+        <div class="row" id="groupsContainer"></div>
         <div class="col-12 text-center pb-4" id="teamsLoadingSpinner">
             <div class="spinner-border spinner-border-lg" role="status">
                 <span class="visually-hidden">Loading...</span>
@@ -80,31 +92,65 @@
           
     </div>
 
+    <!-- Edit Section Modal -->
+    <div class="modal fade" id="editSectionModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content border-0">
+                <div class="modal-header border-0">
+                    <h3 class="modal-title fs-5" id="editTeamTitle">
+                        Section Character Here
+                        <div class="border-company border-bottom border-2 w-100 pt-1"></div>
+                    </h3>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="col-md-6 d-flex">
+                        <div class="input-group">
+                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Section Character">
+                                <i class="bi bi-layers"></i>
+                            </span>
+                            <input type="text" name="editSectionName" id="editSectionName" class="form-control" minlength="1" maxlength="3" value="A">
+                        </div>
+                        <button type="button" id="editSectionNameButton" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available character">
+                            <i class="bi bi-arrow-clockwise"></i>
+                        </button>
+                    </div>
+                    <div class="col-md-6 mt-2 text-danger" id="editSectionNameError" style="display: hidden"></div>
+                </div>
+                <div class="modal-footer border-0">
+                    <button type="button" class="btn btn-company px-4" id="saveEditSectionModal">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Edit Team Modal -->
     <div class="modal fade" id="editTeamModal" tabindex="-1" role="dialog">
         <div class="modal-dialog">
             <div class="modal-content border-0">
-                <div class="modal-header">
-                    <h3 class="modal-title fs-5" id="editTeamTitle">Team Number Here</h3>
+                <div class="modal-header border-0">
+                    <h3 class="modal-title fs-5" id="editTeamTitle">
+                        Team Number Here
+                        <div class="border-company border-bottom border-2 w-100 pt-1"></div>
+                    </h3>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                 </div>
                 <div class="modal-body">
-                    <form id="editTeamForm">
-                        <div class="row">
-                            <div class="col-md-6 mb-3 mb-md-0">
-                                <label for="editTeamNumber" class="form-label">Team Number</label>
-                                <input type="number" name="editTeamNumber" class="form-control" id="editTeamNumber">
-                            </div>
-                            <div class="col-md-6">
-                                <label for="editTeamSection" class="form-label">Section Letter</label>
-                                <input type="text" name="editTeamSection" class="form-control" id="editTeamSection">
-                            </div>
+                    <div class="col-md-6 d-flex">
+                        <div class="input-group">
+                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Team number">
+                                <i class="bi bi-tag"></i>
+                            </span>
+                            <input type="number" name="editTeamNumber" id="editTeamNumber" class="form-control" min="1" max="9999" value="1">
                         </div>
-                    </form>
+                        <button type="button" id="editTeamNumberButton" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available number">
+                            <i class="bi bi-arrow-clockwise"></i>
+                        </button>
+                    </div>
+                    <div class="col-md-6 mt-2 text-danger" id="editTeamNumberError" style="display: hidden"></div>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary" id="saveEditTeamModal">Save Changes</button>
+                <div class="modal-footer border-0">
+                    <button type="button" class="btn btn-company px-4" id="saveEditTeamModal">Save</button>
                 </div>
             </div>
         </div>
@@ -114,46 +160,85 @@
     <div class="modal fade" id="editMemberModal" tabindex="-1" role="dialog">
         <div class="modal-dialog">
             <div class="modal-content border-0">
-                <div class="modal-header">
-                    <h3 class="modal-title fs-5" id="editMemberName">Member Name Here</h3>
+                <div class="modal-header border-0">
+                    <h3 class="modal-title fs-5 color" id="editMemberName">
+                        Angler Name Here
+                        <div class="border-company border-bottom border-2 w-100 pt-1"></div>
+                    </h3>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                 </div>
                 <div class="modal-body">
-                    <form id="editMemberForm">
+                    <form>
+                        <div class="row g-3 mb-3">
+                            <div class="col-md">
+                                <div class="form-floating">
+                                    <input class="form-control" type="text" name="editMemberForename" id="editMemberForename" placeholder="Forename" value="First Name">
+                                    <label for="editMemberForename">Forename</label>
+                                </div>
+                            </div>
+                            <div class="col-md">
+                                <div class="form-floating">
+                                    <input class="form-control" type="text" name="editMemberSurname" id="editMemberSurname" placeholder="Surname" value="Last Name">
+                                    <label for="editMemberSurname">Surname</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="input-group mb-3">
+                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Team">
+                                <i class="bi bi-people"></i>
+                            </span>
+                            <select class="form-select" name="editMemberTeam" id="editMemberTeam">
+                                <option value="" class="font-ssp">Team 1</option>
+                                <option value="" class="font-ssp">Team 2</option>
+                                <option value="" class="font-ssp">Team 3</option>
+                                <option value="" class="font-ssp">Team 4</option>
+                            </select>
+                        </div>
+                        <div class="input-group mb-3">
+                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Section">
+                                <i class="bi bi-layers"></i>
+                            </span>
+                            <select class="form-select" name="editMemberSection" id="editMemberSection">
+                                <option value="">Section A</option>
+                                <option value="">Section B</option>
+                                <option value="">Section C</option>
+                                <option value="">Section D</option>
+                            </select>
+                        </div>
                         <div class="row">
-                            <div class="col-md-6 mb-3">
-                                <label for="editMemberFirstName" class="form-label">Forename</label>
-                                <input type="text" name="editMemberFirstName" id="editMemberFirstName" class="form-control" required minlength="1" maxlength="30">
-                            </div>
-                            <div class="col-md-6 mb-3">
-                                <label for="editMemberLastName" class="form-label">Surname</label>
-                                <input type="text" name="editMemberLastName" id="editMemberLastName" class="form-control" required minlength="1" maxlength="30">
-                            </div>
-                            <div class="col-md-6">
-                                <label for="editMemberTeam" class="form-label">Team</label>
-                                <select name="editMemberTeam" id="editMemberTeam" class="form-select" required></select>
-                            </div>
-                            <div class="col-md-6">
-                                <label for="editMemberPeg" class="form-label">Peg Number</label>
-                                <input type="number" name="editMemberPeg" id="editMemberPeg" class="form-control" min="1" max="9999">
+                            <div class="col-md-6 d-flex">
+                                <div class="input-group">
+                                    <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Peg Number">
+                                        <i class="bi bi-tag"></i>
+                                    </span>
+                                    <input type="number" name="editMemberPeg" id="editMemberPeg" class="form-control" min="1" max="9999" value="1">
+                                </div>
+                                <button type="button" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available peg">
+                                    <i class="bi bi-arrow-clockwise"></i>
+                                </button>
                             </div>
                         </div>
                     </form>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary" id="saveEditModal">Save Changes</button>
+                <div class="modal-footer border-0">
+                    <button type="button" class="btn btn-company px-4" id="saveEditModal">Save</button>
                 </div>
             </div>
         </div>
     </div>
 {% endblock content %}
 
-{% load static %}
 {% block scripts %}
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>
+
     <script type="text/javascript">
-        const getTeamsUrl = "{% url 'get-teams' %}";
-        const updateMemberUrl = "{% url 'update-member' %}";
+        const pageUrl = "{% url 'anglers' %}"
+        // const getPageDataUrl = "{% url 'get-angler-data' %}";  DEPRICATED FOR REWRITE
+        // const updateMemberUrl = "{% url 'update-member' %}";
+        // const updateSectionUrl = "{% url 'update-section' %}"
+        // const updateTeamUrl = "{% url 'update-team' %}"
+        const getNextIdentifierUrl = "{% url 'get-next-identifier' %}"
         const csrfMiddlewareToken = "{{ csrf_token }}";
     </script>
     <script src="{% static 'js/teams.js' %}"></script>

src/mainapp/templates/venue_details.html

@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+    {{ venue.name }} | 
+{% endblock title %}
+
+{% block style %}
+{% endblock style %}
+
+{% block header_buttons %}
+{% endblock header_buttons %}
+
+{% block content %}
+<div class="row">
+    <div class="col-xl-5 col-lg-6 col-md-10">
+        <div class="m-sm-5 m-3">
+            <h1 class="text-company fw-bold">
+                {{ venue.name}}
+            </h1>
+            <div class="text-body-secondary mb-4">
+                <p class="mb-0">{{ venue.street_address }}</p>
+                <p class="mb-0">{{ venue.city }}, {{ venue.provence }}</p>
+                <p class="mb-0">{{ venue.postal_code }}</p>
+            </div>
+            <div class="mb-4">
+                <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eveniet aspernatur neque vero molestias nemo, voluptatum eum quo blanditiis. Voluptate provident earum placeat impedit cumque sapiente praesentium, alias omnis tempore!</p>
+                <!-- <p class="mb-0">{{ venue.description }}</p> -->
+            </div>
+            <div class="mb-4">
+                <h5 class="text-company">
+                    Contact
+                </h5>
+                <div class="text-body-secondary mb-4">
+                    <p class="mb-0">{{ venue.phone_number }}</p>
+                    <p class="mb-0">{{ venue.email_address }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock content %}
+
+{% block scripts %}
+{% endblock scripts %}

src/mainapp/templates/venues.html

@@ -0,0 +1,479 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+    Venues | 
+{% endblock title %}
+
+{% block style %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+{% endblock style %}
+
+{% block header_buttons %}
+{% endblock header_buttons %}
+
+{% block content %}
+
+<div class="d-flex flex-column flex-grow-1">
+
+    <div class="m-1 m-sm-4 mb-0 mt-4 row">
+        <div class="col-xl-4 col-md-8 mb-md-0 mb-4">
+            <div class="input-group">
+                <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
+                    <i class="bi bi-sort-up"></i>
+                </button>
+                <input type="search" name="search" id="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Venues">
+                <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
+            </div>
+        </div>
+        <div class="col-xl-3 col-md-4">
+            <div class="input-group d-flex justify-content-md-end">
+                <button class="btn border-secondary-subtle btn-outline-company" id="addVenue" onclick="openVenueModal(-1);" data-bs-toggle="tooltip" data-bs-title="Add Venue" data-bs-custom-class="light-tooltip">
+                    <i class="bi bi-plus-lg"></i>
+                </button>
+                <button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="importVenue" data-bs-toggle="tooltip" data-bs-title="Import Venue" data-bs-custom-class="light-tooltip">
+                    <i class="bi bi-upload"></i>
+                </button>
+
+                <button class="btn border-secondary-subtle btn-outline-company rounded-start" id="ContractView" data-bs-toggle="tooltip" data-bs-title="List View" data-bs-custom-class="light-tooltip">
+                    <i class="bi bi-list-task"></i>
+                </button>
+                <button class="btn border-secondary-subtle btn-outline-company" id="expandView" data-bs-toggle="tooltip" data-bs-title="Grid View" data-bs-custom-class="light-tooltip">
+                    <i class="bi bi-grid"></i>
+                </button>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="row m-1 mx-sm-4 my-2">
+        <div class="col-xl-7">
+            <hr>
+        </div>
+    </div>
+
+    <div class="m-1 m-sm-4 mt-0 row row-cols-xxl-5 row-cols-xl-4 row-cols-lg-3 g-3">
+        {% for venue in venues %}
+            <div class="">
+                <div class="card w-100 h-100 border-0 rounded-3 overflow-hidden">
+                    <div class="card-body bg-body-tertiary position-relative">
+                        <div class="d-flex justify-content-between align-items-stretch h-100">
+                            <div>
+                                <h5 class="card-title fw-semibold">{{ venue.name }}</h5>
+                                <p class="card-text mb-0">{{ venue.street_address }}</p>
+                                <p class="card-text mb-0">{{ venue.city }}, {{ venue.provence }}</p>
+                                <p class="card-text mb-3">{{ venue.postal_code }}</p>
+                                <div class="text-body-secondary">
+                                    <p class="card-text mb-0">{{ venue.phone_number }}</p>
+                                    <p class="card-text mb-0">{{ venue.email_address }}</p>
+                                </div>
+                            </div>
+                            <div class="d-flex flex-column justify-content-end align-items-end">
+                                <div class="badge company-bg rounded-pill end-0 top-0">
+                                    6 Waters
+                                </div>
+                                <button class="mt-auto btn btn-outline-company rounded-circle" style="width: fit-content;" onclick="openVenueModal({{ venue.id }});">
+                                    <i class="bi bi-gear"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- <div class="card w-100 h-100  shadow-sm overflow-hidden flex-row fluid-hover-zoom md-shadow-on-hover" data-venue-id="{{ venue.id }}">
+                    <div class="card-body d-flex">
+                        <div class="d-flex flex-column">
+                            <h5 class="card-title text-company mb-0">{{ venue.name }}</h5>
+                            <div class="fw-bold mb-3">
+                                <p class="mb-0">{{ venue.type }}</p>
+                            </div>
+                            <div class="text-body-secondary mb-3">
+                                <p class="mb-0">{{ venue.street_address }}</p>
+                                <p class="mb-0">{{ venue.city }}, {{ venue.provence }}</p>
+                                <p class="mb-0">{{ venue.postal_code }}</p>
+                            </div>
+                            <div class="text-body-secondary mb-3">
+                                <p class="mb-0">{{ venue.phone_number }}</p>
+                                <p class="mb-0">{{ venue.email_address }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="d-flex flex-column">
+                        <div class="btn-group btn-group-vertical m-3 mt-auto">
+                            <a class="btn btn-outline-company rounded-top-4" href="{{ venue.id }}">
+                                <i class="bi bi-eye-fill"></i>
+                            </a>
+                            <button class="btn btn-outline-company rounded-bottom-4 ms-0" onclick="openVenueModal({{ venue.id }});">
+                                <i class="bi bi-pencil-fill"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div> -->
+            </div>
+        {% endfor %}
+    </div>
+</div>
+
+<div id="venueModal" class="modal fade" data-venue-id="-1">
+    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
+        <div class="modal-content overflow-hidden rounded-4" style="min-height: 760px;">
+            <div class="modal-header company-bg justify-content-center">
+                <h4 class="card-title text-light fw-bold mb-0">
+                    <span class="create" style="display: none">New Venue</span>
+                    <span class="edit" style="display: none">Edit Venue</span>
+                </h4>
+            </div>
+            <div class="modal-body border-bottom-0 p-0 overflow-hidden">
+                <ul id="newVenueTabBtns" class="nav nav-pills mb-4 d-flex w-100 justify-content-center py-2 bg-light" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button id="newVenueDetailsTabBtn" class="nav-link rounded-4 active" data-bs-toggle="pill" data-bs-target="#newVenueDetailsTab" type="button" role="tab" aria-controls="newVenueDetailsTab" aria-selected="true">Details</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button id="newVenueAddressTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueAddressTab" type="button" role="tab" aria-controls="newVenueAddressTab" aria-selected="false">Address</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button id="newVenueContactTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueContactTab" type="button" role="tab" aria-controls="newVenueContactTab" aria-selected="false">Contact</button>                            
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button id="newVenueWatersTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueWatersTab" type="button" role="tab" aria-controls="newVenueWatersTab" aria-selected="false">Waters</button>
+                    </li>
+                </ul>
+                <div class="px-2 px-sm-4 pb-0">
+                    <form id="venueForm" n class="needs-validation" novalidate>
+                        <div id="newVenueTabs" class="tab-content">
+                            <div id="newVenueDetailsTab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="newVenueDetailsTabBtn" tabindex="0">
+                                <div class="row g-4 align-items-start mb-3">
+                                    <div class="col-12">
+                                        <div class="form-floating">
+                                            <input name="venueName" id="venueName" type="text" class="form-control" placeholder="" minlength="3" maxlength="100" required>
+                                            <label for="venueName" class="form-label">
+                                                Name <strong class="text-danger">&ast;</strong>
+                                            </label>
+                                            <div class="invalid-feedback">Please enter the Venue's name</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-sm-7">
+                                        <div class="form-floating">
+                                            <select name="venueType" id="venueType" class="form-select" placeholder="" required>
+                                                <option disabled value="">Choose one ...</option>
+                                                {% for type in venue_types %}
+                                                <option value="{{ type.0 }}">{{ type.1 }}</option>
+                                                {% endfor %}
+                                            </select>
+                                            <label for="venueType" class="form-label">
+                                                Type of Venue <strong class="text-danger">&ast;</strong>
+                                            </label>
+                                            <div class="invalid-feedback">Please select a Venue type</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12">
+                                        <div class="form-floating">
+                                            <textarea name="venueDescription" id="venueDescription" type="text" class="form-control venue-textarea" placeholder="" maxlength="500"></textarea>
+                                            <label for="venueDescription" class="form-label">
+                                                Description
+                                            </label>
+                                            <div class="invalid-feedback">Please enter a brief description of the Venue</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12">
+                                        <div class="form-floating">
+                                            <textarea name="venueExtraNotes" id="venueExtraNotes" type="text" class="form-control venue-textarea" placeholder="" maxlength="500"></textarea>
+                                            <label for="venueExtraNotes" class="form-label">Extra Notes</label>
+                                            <div class="invalid-feedback">Please enter any additional notes regarding the Venue</div>  
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="newVenueAddressTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueAddressTabBtn" tabindex="0">
+                                <div class="mb-3">
+                                    <div class="form-floating">
+                                        <input name="venueStreetAddress" id="venueStreetAddress" type="text" class="form-control" placeholder="" required>
+                                        <label for="venueStreetAddress" class="form-label">
+                                            Street Address <strong class="text-danger">&ast;</strong>
+                                        </label>
+                                        <div class="invalid-feedback">Please enter a valid Street Address</div>
+                                    </div>
+                                </div>
+                                <div class="row g-4 align-items-start mb-3">
+                                    <div class="col-6">
+                                        <div class="form-floating">
+                                            <input name="venueCity" id="venueCity" type="text" class="form-control" placeholder="" required>
+                                            <label for="venueCity" class="form-label">
+                                                Town or City <strong class="text-danger">&ast;</strong>
+                                            </label>
+                                            <div class="invalid-feedback">Please enter a Town or City</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-floating">
+                                            <input name="venueProvence" id="venueProvence" type="text" class="form-control" placeholder="" required>
+                                            <label for="venueProvence" class="form-label">
+                                                Provence <strong class="text-danger">&ast;</strong>
+                                            </label>
+                                            <div class="invalid-feedback">Please enter a Provence</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-floating">
+                                            <input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="" required>
+                                            <label for="venuePostCode" class="form-label">
+                                                Postal Code <strong class="text-danger">&ast;</strong>
+                                            </label>
+                                            <div class="invalid-feedback">Please enter a Postal Code</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-floating">
+                                            <!-- <input name="venueCountry" id="venueCountry" type="text" class="form-control" placeholder="" required> -->
+                                            <select name="venueCountry" id="venueCountry" class="form-select" placeholder="" disabled required>
+                                                <option value="UK">United Kingdom</option>
+                                            </select>
+                                            <label for="venueCountry" class="form-label">
+                                                Country <i class="bi bi-lock-fill text-warning-emphasis"></i>
+                                            </label>
+                                            <div class="invalid-feedback">Please enter a Country</div>
+                                        </div>
+                                    </div>
+                                    <div class="d-none">
+                                        <input type="hidden" name="venueLatitude" id="venueLatitude">
+                                        <input type="hidden" name="venueLongitude" id="venueLongitude">
+                                    </div>
+                                    <div class="col-12">
+                                        <div id="locationMapContainer" class="w-100 position-relative" style="height: 225px;">
+                                            <div id="locationMap" class="rounded-2 w-100 h-100"></div>
+                                            <div id="locationMapOverlay" style="display: none;">
+                                                <div class="spinner"></div>
+                                            </div>
+                                        </div>
+                                        <span class="form-text">(<strong>Disclaimer&colon;</strong> results fetched from clicking the map may be inaccurate)</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="newVenueContactTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueContactTabBtn" tabindex="0">
+                                <div class="row g-4 align-items-start">
+                                    <div class="col-6">
+                                        <div class="form-floating">
+                                            <input name="venuePhone" id="venuePhone" type="tel" class="form-control" placeholder="">
+                                            <label for="venuePhone" class="form-label">Phone Number</label>
+                                            <div class="invalid-feedback">Bad phone number</div>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-floating">
+                                            <input name="venueEmail" id="venueEmail" type="email" class="form-control" placeholder="">
+                                            <label for="venueEmail" class="form-label">Email Address</label>
+                                            <div class="invalid-feedback"></div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12">
+                                        <div class="form-floating">
+                                            <input name="venueWebsite" id="venueWebsite" type="url" class="form-control" placeholder="">
+                                            <label for="venueWebsite" class="form-label">Website Address</label>
+                                            <div class="invalid-feedback"></div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12">
+                                        <div class="input-group">
+                                            <span class="input-group-text">
+                                                <i class="bi bi-twitter" style="color: #1DA1F2"></i>
+                                            </span>
+                                            <div class="form-floating">
+                                                <input name="venueTwitter" id="venueTwitter" type="url" class="form-control" placeholder="">
+                                                <label for="venueTwitter" class="form-label d-flex align-items-center">
+                                                    Twitter Profile Address
+                                                </label>
+                                                <div class="invalid-feedback"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12">
+                                        <div class="input-group">
+                                            <span class="input-group-text">
+                                                <i class="bi bi-facebook" style="color: #4267B2"></i>
+                                            </span>
+                                            <div class="form-floating">
+                                                <input name="venueFacebook" id="venueFacebook" type="url" class="form-control" placeholder="">
+                                                <label for="venueFacebook" class="form-label d-flex align-items-center">
+                                                    Facebook Profile Address
+                                                </label>
+                                                <div class="invalid-feedback"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12">
+                                        <div class="input-group">
+                                            <span class="input-group-text">
+                                                <i class="bi bi-instagram" style="color: #D62976;"></i>
+                                            </span>
+                                            <div class="form-floating">
+                                                <input name="venueInstagram" id="venueInstagram" type="url" class="form-control" placeholder="">
+                                                <label for="venueInstagram" class="form-label d-flex align-items-center">
+                                                    Instagram Profile Address
+                                                </label>
+                                                <div class="invalid-feedback"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="newVenueWatersTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueWatersTabBtn" tabindex="0">
+                                <div class="pb-5 pt-0 d-flex justify-content-between align-items-center">
+                                    <button class="btn btn-outline-secondary rounded-4 d-flex align-items-center">
+                                        <i class="bi bi-info-lg"></i>
+                                    </button>
+                                    <button class="btn btn-outline-company rounded-4 d-flex align-items-center">
+                                        <span>Add Waters</span>
+                                    </button>
+                                </div>
+                                <ul class="list-unstyled overflow-y-auto" style="max-height: 450px;">
+                                    <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
+                                        <div class="ms-2 me-auto">
+                                            <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                            <p class="mb-0">Commercial Water</p>
+                                            <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-self-stretch">
+                                            <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                            <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                                <i class="bi bi-pencil-fill"></i>
+                                            </button>
+                                        </div>
+                                    </li>
+                                    <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
+                                        <div class="ms-2 me-auto">
+                                            <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                            <p class="mb-0">Commercial Water</p>
+                                            <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-self-stretch">
+                                            <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                            <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                                <i class="bi bi-pencil-fill"></i>
+                                            </button>
+                                        </div>
+                                    </li>
+                                    <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
+                                        <div class="ms-2 me-auto">
+                                            <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                            <p class="mb-0">Commercial Water</p>
+                                            <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-self-stretch">
+                                            <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                            <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                                <i class="bi bi-pencil-fill"></i>
+                                            </button>
+                                        </div>
+                                    </li>
+                                    <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
+                                        <div class="ms-2 me-auto">
+                                            <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                            <p class="mb-0">Commercial Water</p>
+                                            <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-self-stretch">
+                                            <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                            <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                                <i class="bi bi-pencil-fill"></i>
+                                            </button>
+                                        </div>
+                                    </li>
+                                    <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
+                                        <div class="ms-2 me-auto">
+                                            <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                            <p class="mb-0">Commercial Water</p>
+                                            <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-self-stretch">
+                                            <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                            <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                                <i class="bi bi-pencil-fill"></i>
+                                            </button>
+                                        </div>
+                                    </li>
+                                    <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
+                                        <div class="ms-2 me-auto">
+                                            <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                            <p class="mb-0">Commercial Water</p>
+                                            <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-self-stretch">
+                                            <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                            <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                                <i class="bi bi-pencil-fill"></i>
+                                            </button>
+                                        </div>
+                                    </li>
+                                    <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
+                                        <div class="ms-2 me-auto">
+                                            <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                            <p class="mb-0">Commercial Water</p>
+                                            <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-self-stretch">
+                                            <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                            <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                                <i class="bi bi-pencil-fill"></i>
+                                            </button>
+                                        </div>
+                                    </li>
+                                    <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
+                                        <div class="ms-2 me-auto">
+                                            <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                            <p class="mb-0">Commercial Water</p>
+                                            <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-self-stretch">
+                                            <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                            <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                                <i class="bi bi-pencil-fill"></i>
+                                            </button>
+                                        </div>
+                                    </li>
+                                    
+                                </ul>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <div class="modal-footer bg-light border-top-0 px-4 py-3">
+                <!-- <button type="button" class="btn btn-outline-danger rounded-4 me-auto px-3 edit" style="display: none">Delete</button>
+                <button type="button" class="btn btn-outline-secondary me-3 rounded-4 px-3" data-bs-dismiss="modal">Cancel</button>
+                <button type="submit" id="saveVenue" class="btn btn-company rounded-4 px-3" form="venueForm">
+                    <span class="edit" style="display: none;">Save Edit</span>
+                    <span class="create" style="display: none;">Save New</span>
+                </button> -->
+                <button type="button" class="btn btn-outline-danger rounded-4">
+                    <i class="bi bi-trash2"></i>
+                </button>
+                <div class="mx-auto">
+                    <!-- <button type="button" id="newVenueTabLeft" class="btn btn-company rounded-4 me-1" disabled>
+                        <i class="bi bi-chevron-left"></i>
+                    </button> -->
+                    <button type="submit" id="saveVenue" class="btn btn-company rounded-4 px-4" form="venueForm">
+                        <!-- <i class="bi bi-floppy"></i> -->
+                        <span class="edit" style="display: none;">Save Edit</span>
+                        <span class="create" style="display: none;">Save New</span>
+                    </button>
+                    <!-- <button type="button" id="newVenueTabRight" class="btn btn-company rounded-4 ms-1">
+                        <i class="bi bi-chevron-right"></i>
+                    </button> -->
+                </div>
+                <button type="button" class="btn btn-outline-secondary rounded-4" data-bs-dismiss="modal">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
+  
+
+{% endblock content %}
+
+{% block scripts %}
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+<script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
+<script src="{% static 'js/mainapp/venues.js' %}" data-csrfmiddlewaretoken="{{ csrf_token }}"></script>
+{% endblock scripts %}

src/mainapp/urls.py

@@ -5,9 +5,20 @@ urlpatterns = [
     path('', views.index, name='index'),
     path('results/', views.results, name='results'),
     path('scoreboard/', views.scoreboard, name='scoreboard'),
-    path('teams/', views.teams, name='teams'),
+    path('members/', views.teams, name='members'),
+    path('venues/', views.venues, name='venues'),
+    path('venues/get-waters/<int:venue_id>', views.get_venue_waters, name="get-venue-waters"),
+    path('venues/<int:venue_id>', views.venue_details, name="venue-details"),
+    path("venues/api/<int:venue_id>", views.get_venue_details, name="venue-details"),
+    path("venues/api/create", views.create_venue, name="create-venue"),
 
-    path('bulk-peg/', views.bulk_create_pegs, name='bulk-peg'),
-    path('get-teams/', views.get_teams, name='get-teams'),
-    path('update-member/', views.update_member, name='update-member')
+    # path('bulk-peg/', views.bulk_create_pegs, name='bulk-peg'),
+    path('get-angler-data/', views.get_angler_page_data, name='get-angler-data'),
+    path('update-member/', views.update_member, name='update-member'),
+    path('update-section/', views.update_section, name='update-section'),
+    path('update-team/', views.update_team, name='update-team'),
+    path("get-next-identifier/", views.get_next_identifier, name='get-next-identifier'),
+
+    # Rewrite
+    path('anglers/', views.ManageAnglersView.as_view(), name='anglers'),
 ]

src/mainapp/views.py

@@ -1,16 +1,28 @@
 """Views for the main app."""
 
+import json
 from functools import reduce
 
 from django.shortcuts import render, redirect
 from django.http import JsonResponse
-from django.db.models import Q, Case, When, Value, IntegerField
+from django.db.models import Q, Case, When, Value, IntegerField, Min
+from django.db.utils import IntegrityError
+from django.views import View
+from django.views.decorators.http import require_GET, require_POST
+from django.http import HttpRequest, HttpResponseNotFound
+from django.core import serializers
+from django.forms.models import model_to_dict
 
-from .models import Peg, Team, Member
+from .models import Venue, Waters
+# from .models import Team, Member, Section, SectionManager, ReusableAutoField, SectionValidator
 
 
 def index(request):
-    return render(request, 'index.html')
+
+    venues = Venue.objects.all()
+    context = {"venues": venues, "venue_types": Venue.VENUE_TYPES}
+
+    return render(request, 'index.html', context)
 
 def results(request):
     return render(request, 'results.html')
@@ -21,17 +33,405 @@ def scoreboard(request):
 def teams(request):
     return render(request, 'teams.html')
 
-def bulk_create_pegs(request):
-    """Bulk create pegs"""
+def venues(request):
 
-    number_of_pegs = request.POST.get("pegAmount")
-    for i in range(int(number_of_pegs)):
-        Peg.objects.create()
+    venues = Venue.objects.all()
+    context = {"venues": venues, "venue_types": Venue.VENUE_TYPES}
 
-    # return to previous page
-    return redirect(request.META.get('HTTP_REFERER'))
+    return render(request, 'venues.html', context)
 
-def get_teams(request):
+def venue_details(request, venue_id):
+
+    try:
+        venue = Venue.objects.get(id=venue_id)
+    except Venue.DoesNotExist:
+        return HttpResponseNotFound("<h1>404 - Venue not found</h1>")
+
+    context = {"venue": venue}
+
+    return render(request, 'venue_details.html', context)
+
+def create_venue(request):
+
+    if request.method != "POST":
+        return JsonResponse({"error", "Method not allowed"}, status=403)
+
+    test = request.POST
+
+    attributes = {
+        name: request.POST.get(name) for name in 
+        [field.name for field in Venue._meta.get_fields()]
+    }
+    venue_id = request.POST.get("id")
+   
+    if venue_id:
+        venue = Venue.objects.get(id=venue_id)
+        for k, v in attributes.items():
+            setattr(venue, k, v)
+
+        venue.save()
+        return JsonResponse({"success": "successful update"}, status=200)
+
+    del attributes["id"]
+    Venue.objects.create(**attributes)
+    return JsonResponse({"success": "successful creation"}, status=200)
+
+def get_venue_details(request, venue_id: int):
+
+    try:
+        venue = Venue.objects.get(pk=venue_id)
+    except Venue.DoesNotExist:
+        return JsonResponse({"error": "Venue not found"}, status=404)
+
+    json_venue = model_to_dict(venue)
+
+    return JsonResponse({"data": json_venue})
+
+def get_venue_waters(request, venue_id: int):
+
+    try:
+        venue = Venue.objects.get(pk=venue_id)
+    except Venue.DoesNotExist:
+        return JsonResponse({"error": "Venue not found"}, status=404)
+
+    waters = Waters.objects.filter(venue=venue)
+    waters_data = [
+        {
+            "name": water.name,
+            "description": water.description,
+            "pegs_min": water.pegs_min,
+            "pegs_max": water.pegs_max,
+            "water_type": water.water_type,
+            "fish_type": water.fish_type
+        }
+        for water in waters
+    ]
+    return JsonResponse({"waters", waters_data})
+
+# def bulk_create_pegs(request):
+#     """Bulk create pegs"""
+
+#     number_of_pegs = request.POST.get("pegAmount")
+#     for i in range(int(number_of_pegs)):
+#         Peg.objects.create()
+
+#     # return to previous page
+#     return redirect(request.META.get('HTTP_REFERER'))
+
+def name_sort_key(section):
+    if len(section.name) == 1:
+        return (0, section.name)
+    else:
+        return (1, section.name[:-1], section.name[-1])
+
+
+class ManageAnglersView(View):
+    """View for the Manage Anglers page."""
+
+    template_name = "anglers.html"
+
+    def get(self, request: HttpRequest, *args, **kwargs) -> HttpRequest:
+        """Handle GET requests to the Manage Anglers page.
+
+        Args:
+            request (HttpRequest): The HttpRequest object, contains GET data.
+
+        Returns:
+            HttpRequest: A render of the Manage Anglers page.
+        """
+
+        anglers = Member.objects.order_by("first_name", "last_name")
+        context = {"anglers": anglers}
+
+        return render(request, self.template_name, context)
+
+    def post(self, request: HttpRequest, *args, **kwargs) -> JsonResponse:
+        """Handle POST requests to the Manage Anglers page.
+
+        Args:
+            request (HttpRequest): The HttpRequest object, contains POST data.
+
+        Returns:
+            JsonResponse: Contains the result of the action.
+        """
+
+        tasks = request.POST.getlist("tasks[]")
+
+        data = {}
+        for task in tasks:
+            data.update(self.handle_task(request, task))
+
+        return JsonResponse(data)
+
+    def handle_task(self, request, task: str) -> dict[str, str]:
+        """Handle a task.
+
+        Args:
+            request (HttpRequest): HttpRequest object, contains POST data.
+            task (str): The task to handle.
+
+        Raises:
+            ValueError: The task is invalid.
+
+        Returns:
+            dict[str, str]: The result of the task.
+        """
+
+        # Format is {key = ACTION-TASK_NAME: value = HANDLER_FUNCTION}
+        task_handlers = {
+            "update-team": self.update_team,
+            "update-section": self.update_section,
+            "update-angler": self.update_angler,
+            "get-teams": self.get_teams,
+            "get-sections": self.get_sections,
+            "get-anglers": self.get_anglers,
+            "delete-team": self.delete_team,
+            "delete-section": self.delete_section,
+            "delete-angler": self.delete_angler,
+            "get-nextTeamNumber": self.get_next_team_number,
+            "get-nextPegNumber": self.get_next_peg_number,
+        }
+
+        handler = task_handlers.get(task)
+        if not handler:
+            raise ValueError(f"Invalid task: {task}")
+
+        return handler(request)
+
+    def update_team(self, request) -> dict[str]:
+        """Update a team, returns a dictionary of the new team's data."""
+
+        result = {"form_errors": {}, "team": None}
+        team_id = request.POST.get("id")
+        team_number = request.POST.get("number")
+
+        if not (team_id and team_number):
+            raise ValueError("Team ID or Team Number is missing or empty")
+
+        if team_id == "-1":
+            team = Team(number=team_number)
+        else:
+            team = Team.objects.get(id=team_id)
+            team.number = team_number
+
+        try:
+            team.save()
+            result["team"] = {"id": team.id, "number": team.number}
+        except IntegrityError:
+            result["form_errors"]["#teamNumber"] = "A Team with this number already exists"
+
+        return result
+
+    def update_section(self, request) -> dict[str]:
+        """Update a section, returns a dictionary of the new section's data."""
+
+        result = {"form_errors": {}, "section": None}
+        section_id = request.POST.get("id")
+        section_character = request.POST.get("character")
+
+        if not (section_id and section_character):
+            raise ValueError("Section ID or Section Character is missing or empty")
+
+        if section_id == "-1":
+            section = Section(character=section_character)
+        else:
+            section = Section.objects.get(id=section_id)
+            section.character = section_character
+
+        try:
+            section.save()
+            result["section"] = {"id": section.id, "character": section.character}
+        except IntegrityError:
+            result["form_errors"]["#editSectionNameError"] = "A Section with this character already exists"
+
+        return result
+
+    def update_angler(self, request) -> dict[str]:
+        """Update an Angler, returns a dictionary of the new angler's data."""
+
+        result = {"form_errors": {}, "angler": None}
+        angler_id = request.POST.get("angler_id")
+        forename = request.POST.get("forename")
+        surname = request.POST.get("surname")
+        peg_number = request.POST.get("peg_number")
+        team_id = request.POST.get("team_id")
+        section_id = request.POST.get("section_id")
+
+        if not angler_id:
+            raise ValueError("Invalid angler ID")
+
+        team = Team.objects.get(id=team_id)
+        section = Section.objects.get(id=section_id)
+
+        if angler_id == "-1":
+            angler = Member(
+                first_name=forename,
+                last_name=surname,
+                peg_number=peg_number,
+                team=team,
+                section=section
+            )
+        else:
+            angler = Member.objects.get(id=angler_id)
+            angler.first_name = forename
+            angler.last_name = surname
+            angler.peg_number = peg_number
+            angler.team = team
+            angler.section = section
+
+        try:
+            angler.save()
+        except IntegrityError:
+            result["form_errors"]["#anglerPeg"] = "An Angler with this peg number already exists"
+
+        result["angler"] = {
+            "id": angler.id,
+            "forename": forename,
+            "surname": surname,
+            "peg_number": peg_number,
+            "team_id": team_id,
+            "section_id": section_id,
+            "team_number": angler.team.number,
+            "section_character": angler.section.character
+        }
+
+        return result
+
+    def get_teams(self, request) -> dict[str]:
+        """Returns a dictionary of all teams."""
+
+        search = request.POST.get("search")
+        teams = Team.objects.order_by("number").all()
+
+        # Search works by exluding teams that do not contain members with the search term in their names.
+        if search:
+            search_terms = search.split()
+            members = Member.objects.filter(reduce(lambda x, y: x & y, [
+                Q(first_name__icontains=term) | Q(last_name__icontains=term)
+                for term in search_terms
+            ]))
+            teams = teams.filter(members__in=members).distinct()
+
+        return {"teams": [{"id": team.id, "number": team.number} for team in teams]}
+
+    def get_sections(self, request) -> dict[str]:
+        """Returns a dictionary of all sections."""
+
+        search = request.POST.get("search")
+        sections = Section.objects.order_by("character").all()
+
+        if search:
+            search_terms = search.split()
+            members = Member.objects.filter(reduce(lambda x, y: x & y, [
+                Q(first_name__icontains=term) | Q(last_name__icontains=term)
+                for term in search_terms
+            ]))
+            sections = sections.filter(members__in=members).distinct()
+
+        return {"sections": [{"id": section.id, "character": section.character} for section in sections]}
+
+    def get_anglers(self, request) -> dict[str]:
+        """Returns a dictionary of all anglers."""
+
+        search = request.POST.get("search")
+        anglers = Member.objects.order_by("first_name").all()
+        order_by = "peg_number" if request.POST.get("sortAnglers") == "pegs" else "first_name"
+
+        if search:
+            search_terms = search.split()
+            anglers = anglers.filter(reduce(lambda x, y: x & y, [
+                Q(first_name__icontains=term) | Q(last_name__icontains=term)
+                for term in search_terms
+            ])).distinct()
+
+        return {
+            "anglers": [
+                {
+                    "id": angler.id,
+                    "first_name": angler.first_name,
+                    "last_name": angler.last_name,
+                    "peg_number": angler.peg_number,
+                    "team_id": angler.team.id,
+                    "section_id": angler.section.id,
+                    "team_number": angler.team.number,
+                    "section_character": angler.section.character
+                }
+                for angler in anglers.order_by(order_by).all()
+            ]
+        }
+
+    def delete_team(self, request) -> dict:
+        """Deletes a team."""
+
+        team_id = request.POST.get("team_id")
+        if not team_id:
+            raise ValueError("Invalid team ID")
+
+        teams = Team.objects.get(id=team_id)
+        teams.delete()
+
+        return {}
+
+    def delete_section(self, request) -> dict:
+        """Deletes a section."""
+
+        section_id = request.POST.get("section_id")
+        if not section_id:
+            raise ValueError("Invalid section ID")
+
+        sections = Section.objects.get(id=section_id)
+        sections.delete()
+
+        return {}
+
+    def delete_angler(self, request) -> dict:
+        """Delete an angler."""
+
+        angler_id = request.POST.get("angler_id")
+        if not angler_id:
+            raise ValueError("Invalid angler ID")
+
+        angler = Member.objects.get(id=angler_id)
+        angler.delete()
+
+        return {}
+
+    def get_next_team_number(self, request) -> dict[str, int]:
+        """Returns the next available team number."""
+
+        next_team_number = 1
+        
+        while Team.objects.filter(number=next_team_number).exists():
+            next_team_number += 1
+
+        return {"nextTeamNumber": next_team_number}
+
+    def get_next_peg_number(self, request) -> dict[str, int]:
+        """Returns the next available peg number."""
+
+        next_peg_number = 1
+
+        while Member.objects.filter(peg_number=next_peg_number).exists():
+            next_peg_number += 1
+
+        return {"nextPegNumber": next_peg_number}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+def get_angler_page_data(request, **kwargs):
     """Returns a JsonResponse containing a dictionary with a k/v pair for a list of teams.
 
     Args:
@@ -44,17 +444,17 @@ def get_teams(request):
         return
 
     search = request.POST.get("search")
-    sort_teams = request.POST.get("sortTeams") or "team_number"
+    sort_groups = request.POST.get("sortGroups") or "team"
     sort_members = request.POST.get("sortMembers") or "peg_number"
 
-    teams = Team.objects.order_by(sort_teams).all()
+    teams = Team.objects.order_by("number").all()
+    sections = Section.objects.order_by("character").all()
 
-    # Filter out teams that don't contain members being searched for
     if search:
         search_terms = search.split()
         members = Member.objects.filter(
             reduce(
-                lambda x, y: x | y,
+                lambda x, y: x & y,  ## changed to AND from OR to fix bug with whitespace searches
                 [
                     Q(first_name__icontains=term) | Q(last_name__icontains=term)
                     for term in search_terms
@@ -62,32 +462,42 @@ def get_teams(request):
             )
         )
         teams = teams.filter(members__in=members).distinct()
+        sections = sections.filter(members__in=members).distinct()
 
-    # Create a dictionary for the data that is JSON safe
-    response_data = {"teams": []}
-    for team in teams:
-        team_data = {
-            "team_number": team.team_number,
-            "section_letter": team.section_letter if team.section_letter else None,
-            "members": [
-                {
-                    "first": member.first_name,
-                    "last": member.last_name,
-                    "id": member.id,
-                    "team": team.team_number,
-                    "peg": member.peg_number,
-                    "section": team.section_letter if team.section_letter else None
-                }
-                for member in team.members.order_by(sort_members).all()
-            ]
-        }
-        response_data["teams"].append(team_data)
+    response_data = {
+        "teams": [
+            {"id": team.id, "number": team.number}
+            for team in teams
+        ],
+        "sections":  [
+            {"id": sec.id, "character": sec.character}
+            for sec in sections
+        ],
+        "anglers": [
+            {
+                "id": member.id,
+                "first": member.first_name,
+                "last": member.last_name,
+                "peg": member.peg_number,
+                "team_id": member.team.id if member.team else None,
+                "section_id": member.section.id if member.section else None
+            }
+            for member in Member.objects.order_by(sort_members).all()
+        ]
+    }
 
-    response_data["sortTeams"] = sort_teams
+    response_data["sortGroups"] = sort_groups
     response_data["sortMembers"] = sort_members
 
+    for key, value in kwargs.items():
+        response_data[key] = value
+
     return JsonResponse(response_data)
 
+
+
+
+
 def update_member(request):
     """Update a member. Returns a JsonResponse with the updated teams."""
 
@@ -103,7 +513,7 @@ def update_member(request):
 
     # Get the member and team
     member = Member.objects.get(id=member_id)
-    team = Team.objects.get(team_number=team_number)
+    team = Team.objects.get(name=team_number)
 
     # Update the member
     member.first_name = first
@@ -113,4 +523,100 @@ def update_member(request):
 
     member.save()
 
-    return get_teams(request)
+    return get_angler_page_data(request)
+
+def update_section(request):
+    """Update a section, returns JsonResponse with updated teams data."""
+
+    if not request.POST:
+        return
+
+    section_id = request.POST.get("sectionId")
+    section_name = request.POST.get("sectionName")
+
+    validator = SectionValidator()
+    if not validator.is_valid(section_name):
+        json_response = get_angler_page_data(request, form_errors={
+            "editSectionName": "This is an invalid section"
+        })
+        return json_response
+
+    if section_id == "-1":
+        section = Section(character=section_name)
+    else:
+        section = Section.objects.get(id=section_id)
+        section.character = section_name
+
+    try:
+        section.save()
+    except IntegrityError:
+        json_response = get_angler_page_data(request, form_errors={
+            "editSectionName": "A Section with this character already exists"
+        })
+        return json_response
+
+    return get_angler_page_data(request)  # returns jsonresponse with new details
+
+def update_team(request):
+    """Update a team, returns a JsonResponse with updated teams data."""
+
+    if not request.POST:
+        return
+
+    team_id = request.POST.get("id")
+    team_number = request.POST.get("number")
+
+    try:
+        if team_id == "-1":
+            team = Team.objects.create(number=team_number)
+        else:
+            team = Team.objects.get(id=team_id)
+            team.number = team_number
+            team.save()
+    except IntegrityError as error:
+        json_response = get_angler_page_data(request, form_errors={
+            "editTeamNumber": "A Team with this number already exists"
+        })
+        return json_response
+
+    return get_angler_page_data(request)
+
+def get_next_peg() -> int:
+    pass
+
+def get_next_section() -> str:
+
+    section_name = SectionManager.get_max_section()
+    return SectionManager.find_next_section(section_name)
+
+
+def get_next_team() -> int:
+
+    field = ReusableAutoField
+    field.model = Team
+
+    return field().get_default()
+
+
+def get_next_identifier(request):
+    """Get the next available identifer (peg, section character, etc.) for an object."""
+
+    if not request.POST:
+        return
+
+    item = request.POST.get("item")
+
+    match item:
+        case "member_peg":
+            result = get_next_peg()
+
+        case "section_name":
+            result = get_next_section()
+
+        case "team_number":
+            result = get_next_team()
+
+        case _:
+            raise ValueError(f"Bad identifier item: {item}")
+
+    return JsonResponse({"identifier": result})

src/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);
+}

src/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);
+}

src/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: 1rem;
+    width: 1rem;
+    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;
+}

src/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;
+}

src/static/admin/css/forms.css

@@ -0,0 +1,512 @@
+@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 ul.tools {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.inline-group ul.tools li {
+    display: inline;
+    padding: 0 5px;
+}
+
+.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 ul.tools a.add,
+.inline-group div.add-row a,
+.inline-group .tabular tr.add-row td a {
+    background: url(../img/icon-addlink.svg) 0 1px no-repeat;
+    padding-left: 16px;
+    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;
+}

src/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;
+}

src/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%;
+}

src/static/admin/css/responsive.css

@@ -0,0 +1,967 @@
+/* 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 label {
+        margin: 0 8px 0 0;
+    }
+
+    .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 ul.selector-chooser {
+        width: 26px;
+        height: 52px;
+        padding: 2px 0;
+        border-radius: 20px;
+        transform: translateY(-10px);
+    }
+
+    .selector-add, .selector-remove {
+        width: 20px;
+        height: 20px;
+        background-size: 20px auto;
+    }
+
+    .selector-add {
+        background-position: 0 -120px;
+    }
+
+    .selector-remove {
+        background-position: 0 -80px;
+    }
+
+    a.selector-chooseall, a.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 {
+        width: 52px;
+        height: 26px;
+        padding: 0 2px;
+        transform: none;
+    }
+
+    .stacked .selector-chooser li {
+        padding: 3px;
+    }
+
+    .stacked .selector-add, .stacked .selector-remove {
+        background-size: 20px auto;
+    }
+
+    .stacked .selector-add {
+        background-position: 0 -40px;
+    }
+
+    .stacked .active.selector-add {
+        background-position: 0 -40px;
+    }
+
+    .active.selector-add:focus, .active.selector-add:hover {
+        background-position: 0 -140px;
+    }
+
+    .stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
+        background-position: 0 -60px;
+    }
+
+    .stacked .selector-remove {
+        background-position: 0 0;
+    }
+
+    .stacked .active.selector-remove {
+        background-position: 0 0;
+    }
+
+    .active.selector-remove:focus, .active.selector-remove:hover {
+        background-position: 0 -100px;
+    }
+
+    .stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
+        background-position: 0 -20px;
+    }
+
+    .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;
+    }
+
+    .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: block;
+        width: 52px;
+        height: 26px;
+        padding: 0 2px;
+        transform: none;
+    }
+
+    .selector ul.selector-chooser li {
+        float: left;
+    }
+
+    .selector-remove {
+        background-position: 0 0;
+    }
+
+    .active.selector-remove:focus, .active.selector-remove:hover {
+        background-position: 0 -20px;
+    }
+
+    .selector-add  {
+        background-position: 0 -40px;
+    }
+
+    .active.selector-add:focus, .active.selector-add:hover {
+        background-position: 0 -60px;
+    }
+
+    /* 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;
+    }
+}

src/static/admin/css/responsive_rtl.css

@@ -0,0 +1,111 @@
+/* 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 ul.tools a.add,
+    [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"] .selector .selector-filter label {
+        margin-right: 0;
+        margin-left: 8px;
+    }
+
+    [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;
+    }
+
+    [dir="rtl"] .selector-add {
+        background-position: 0 -80px;
+    }
+
+    [dir="rtl"] .selector-remove {
+        background-position: 0 -120px;
+    }
+
+    [dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
+        background-position: 0 -100px;
+    }
+
+    [dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
+        background-position: 0 -140px;
+    }
+}
+
+/* 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"] .active.selector-remove:focus, .active.selector-remove:hover {
+        background-position: 0 -20px;
+    }
+
+    [dir="rtl"] .selector-add  {
+        background-position: 0 -40px;
+    }
+
+    [dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
+        background-position: 0 -60px;
+    }
+}

src/static/admin/css/rtl.css

@@ -0,0 +1,291 @@
+/* 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 -64px no-repeat;
+}
+
+.active.selector-add:focus, .active.selector-add:hover {
+  background-position: 0 -80px;
+}
+
+.selector-remove {
+  background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+}
+
+.active.selector-remove:focus, .active.selector-remove:hover {
+  background-position: 0 -112px;
+}
+
+a.selector-chooseall {
+    background: url(../img/selector-icons.svg) right -128px no-repeat;
+}
+
+a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
+    background-position: 100% -144px;
+}
+
+a.selector-clearall {
+    background: url(../img/selector-icons.svg) 0 -160px no-repeat;
+}
+
+a.active.selector-clearall:focus, a.active.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;
+}

src/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;
+}

src/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.

src/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; }

src/static/admin/css/widgets.css

@@ -0,0 +1,593 @@
+/* SELECTOR (FILTER INTERFACE) */
+
+.selector {
+    display: flex;
+    flex-grow: 1;
+    gap: 0 10px;
+}
+
+.selector select {
+    height: 17.2em;
+    flex: 1 0 auto;
+    overflow: scroll;
+    width: 100%;
+}
+
+.selector-available, .selector-chosen {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1;
+}
+
+.selector-available h2, .selector-chosen h2 {
+    border: 1px solid var(--border-color);
+    border-radius: 4px 4px 0 0;
+}
+
+.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 h2 {
+    background: var(--secondary);
+    color: var(--header-link-color);
+}
+
+.selector .selector-available h2 {
+    background: var(--darkened-bg);
+    color: var(--body-quiet-color);
+}
+
+.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;
+}
+
+.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 .selector-available input,
+.selector .selector-chosen input {
+    margin-left: 8px;
+}
+
+.selector ul.selector-chooser {
+    align-self: center;
+    width: 22px;
+    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: 16px;
+    height: 16px;
+    display: block;
+    text-indent: -3000px;
+    overflow: hidden;
+    cursor: default;
+    opacity: 0.55;
+}
+
+.active.selector-add, .active.selector-remove {
+    opacity: 1;
+}
+
+.active.selector-add:hover, .active.selector-remove:hover {
+    cursor: pointer;
+}
+
+.selector-add {
+    background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+}
+
+.active.selector-add:focus, .active.selector-add:hover {
+    background-position: 0 -112px;
+}
+
+.selector-remove {
+    background: url(../img/selector-icons.svg) 0 -64px no-repeat;
+}
+
+.active.selector-remove:focus, .active.selector-remove:hover {
+    background-position: 0 -80px;
+}
+
+a.selector-chooseall, a.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;
+}
+
+a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
+a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
+    color: var(--link-fg);
+}
+
+a.active.selector-chooseall, a.active.selector-clearall {
+    opacity: 1;
+}
+
+a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
+    cursor: pointer;
+}
+
+a.selector-chooseall {
+    padding: 0 18px 0 0;
+    background: url(../img/selector-icons.svg) right -160px no-repeat;
+    cursor: default;
+}
+
+a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
+    background-position: 100% -176px;
+}
+
+a.selector-clearall {
+    padding: 0 0 0 18px;
+    background: url(../img/selector-icons.svg) 0 -128px no-repeat;
+    cursor: default;
+}
+
+a.active.selector-clearall:focus, a.active.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 {
+    height: 22px;
+    width: 50px;
+    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 -32px no-repeat;
+    cursor: default;
+}
+
+.stacked .active.selector-add {
+    background-position: 0 -32px;
+    cursor: pointer;
+}
+
+.stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
+    background-position: 0 -48px;
+    cursor: pointer;
+}
+
+.stacked .selector-remove {
+    background: url(../img/selector-icons.svg) 0 0 no-repeat;
+    cursor: default;
+}
+
+.stacked .active.selector-remove {
+    background-position: 0 0px;
+    cursor: pointer;
+}
+
+.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
+    background-position: 0 -16px;
+    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: 16px;
+    width: 16px;
+    overflow: hidden;
+}
+
+.datetimeshortcuts .clock-icon {
+    background: url(../img/icon-clock.svg) 0 0 no-repeat;
+}
+
+.datetimeshortcuts a:focus .clock-icon,
+.datetimeshortcuts a:hover .clock-icon {
+    background-position: 0 -16px;
+}
+
+.datetimeshortcuts .date-icon {
+    background: url(../img/icon-calendar.svg) 0 0 no-repeat;
+    top: -1px;
+}
+
+.datetimeshortcuts a:focus .date-icon,
+.datetimeshortcuts a:hover .date-icon {
+    background-position: 0 -16px;
+}
+
+.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: 16px;
+    height: 16px;
+    border: 0px none;
+}
+
+.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;
+}

src/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.

src/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).

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/static/admin/img/inline-delete.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" 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>

src/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>

src/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>

src/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>

src/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>

src/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>

src/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;
+}

src/static/admin/js/SelectFilter2.js

@@ -0,0 +1,286 @@
+/*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';
+
+            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 title_available = quickElement('h2', selector_available, interpolate(gettext('Available %s') + ' ', [field_name]));
+            quickElement(
+                'span', title_available, '',
+                'class', 'help help-tooltip help-icon',
+                'title', interpolate(
+                    gettext(
+                        'This is the list of available %s. You may choose some by ' +
+                        'selecting them in the box below and then clicking the ' +
+                        '"Choose" arrow between the two boxes.'
+                    ),
+                    [field_name]
+                )
+            );
+
+            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',
+                'title', 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('a', selector_available, gettext('Choose all'), 'title', interpolate(gettext('Click to choose all %s at once.'), [field_name]), 'href', '#', 'id', field_id + '_add_all_link');
+            choose_all.className = 'selector-chooseall';
+
+            // <ul class="selector-chooser">
+            const selector_chooser = quickElement('ul', selector_div);
+            selector_chooser.className = 'selector-chooser';
+            const add_link = quickElement('a', quickElement('li', selector_chooser), gettext('Choose'), 'title', gettext('Choose'), 'href', '#', 'id', field_id + '_add_link');
+            add_link.className = 'selector-add';
+            const remove_link = quickElement('a', quickElement('li', selector_chooser), gettext('Remove'), 'title', gettext('Remove'), 'href', '#', 'id', field_id + '_remove_link');
+            remove_link.className = 'selector-remove';
+
+            // <div class="selector-chosen">
+            const selector_chosen = quickElement('div', selector_div, '', 'id', field_id + '_selector_chosen');
+            selector_chosen.className = 'selector-chosen';
+            const title_chosen = quickElement('h2', selector_chosen, interpolate(gettext('Chosen %s') + ' ', [field_name]));
+            quickElement(
+                'span', title_chosen, '',
+                'class', 'help help-tooltip help-icon',
+                'title', interpolate(
+                    gettext(
+                        'This is the list of chosen %s. You may remove some by ' +
+                        'selecting them in the box below and then clicking the ' +
+                        '"Remove" arrow between the two boxes.'
+                    ),
+                    [field_name]
+                )
+            );
+            
+            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',
+                'title', 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';
+
+            const to_box = quickElement('select', selector_chosen, '', 'id', field_id + '_to', 'multiple', '', 'size', from_box.size, 'name', from_box.name);
+            to_box.className = '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, ' (click to clear)', 'class', 'list-footer-display__clear');
+            
+            const clear_all = quickElement('a', selector_chosen, gettext('Remove all'), 'title', interpolate(gettext('Click to remove all chosen %s at once.'), [field_name]), 'href', '#', 'id', field_id + '_remove_all_link');
+            clear_all.className = 'selector-clearall';
+
+            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.classList.contains('active')) {
+                    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_link.addEventListener('click', function(e) {
+                move_selection(e, this, SelectBox.move, field_id + '_from', field_id + '_to');
+            });
+            remove_link.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');
+            // Active if at least one item is selected
+            document.getElementById(field_id + '_add_link').classList.toggle('active', SelectFilter.any_selected(from));
+            document.getElementById(field_id + '_remove_link').classList.toggle('active', SelectFilter.any_selected(to));
+            // Active if the corresponding box isn't empty
+            document.getElementById(field_id + '_add_all_link').classList.toggle('active', from.querySelector('option'));
+            document.getElementById(field_id + '_remove_all_link').classList.toggle('active', to.querySelector('option'));
+            SelectFilter.refresh_filtered_warning(field_id);
+        },
+        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));
+        });
+    });
+}

src/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);
+        }
+    });
+}

src/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;
+}

src/static/admin/js/admin/RelatedObjectLookups.js

@@ -0,0 +1,240 @@
+/*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 {
+            document.getElementById(name).value = chosenId;
+        }
+        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) {
+        // 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) {
+                return;
+            }
+
+            let option = select.querySelector(`option[value="${objId}"]`);
+
+            if (!option) {
+                option = new Option(newRepr, newId);
+                select.options.add(option);
+                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 o = new Option(newRepr, newId);
+            SelectBox.add_to_cache(toId, o);
+            SelectBox.redisplay(toId);
+        }
+        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;
+
+    // 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);
+            }
+        });
+    });
+}

src/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();
+    });
+}

src/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;
+}

src/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);
+        });
+    });
+}

src/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;
+            }
+        }
+    }
+}

src/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));
+    };
+}

src/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));
+        });
+    });
+}

src/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 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 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 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 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 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;
+            }
+        });
+    });
+}

src/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)};

src/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();
+}

src/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;
+    }
+}

src/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);
+            }
+        });
+    };
+}

src/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
+        );
+    });
+}

src/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();
+}

src/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'));
+    });
+}

src/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;
+}

src/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.

src/static/admin/js/vendor/select2/LICENSE.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.

src/static/admin/js/vendor/select2/i18n/af.js

@@ -0,0 +1,3 @@
+/*! Select2 4.0.13 | https://github.com/select2/select2/blob/master/LICENSE.md */
+
+!function(){if(jQuery&&jQuery.fn&&jQuery.fn.select2&&jQuery.fn.select2.amd)var e=jQuery.fn.select2.amd;e.define("select2/i18n/af",[],function(){return{errorLoading:function(){return"Die resultate kon nie gelaai word nie."},inputTooLong:function(e){var n=e.input.length-e.maximum,r="Verwyders asseblief "+n+" character";return 1!=n&&(r+="s"),r},inputTooShort:function(e){return"Voer asseblief "+(e.minimum-e.input.length)+" of meer karakters"},loadingMore:function(){return"Meer resultate word gelaai…"},maximumSelected:function(e){var n="Kies asseblief net "+e.maximum+" item";return 1!=e.maximum&&(n+="s"),n},noResults:function(){return"Geen resultate gevind"},searching:function(){return"Besig…"},removeAllItems:function(){return"Verwyder alle items"}}}),e.define,e.require}();

src/static/admin/js/vendor/select2/i18n/ar.js

@@ -0,0 +1,3 @@
+/*! Select2 4.0.13 | https://github.com/select2/select2/blob/master/LICENSE.md */
+
+!function(){if(jQuery&&jQuery.fn&&jQuery.fn.select2&&jQuery.fn.select2.amd)var n=jQuery.fn.select2.amd;n.define("select2/i18n/ar",[],function(){return{errorLoading:function(){return"لا يمكن تحميل النتائج"},inputTooLong:function(n){return"الرجاء حذف "+(n.input.length-n.maximum)+" عناصر"},inputTooShort:function(n){return"الرجاء إضافة "+(n.minimum-n.input.length)+" عناصر"},loadingMore:function(){return"جاري تحميل نتائج إضافية..."},maximumSelected:function(n){return"تستطيع إختيار "+n.maximum+" بنود فقط"},noResults:function(){return"لم يتم العثور على أي نتائج"},searching:function(){return"جاري البحث…"},removeAllItems:function(){return"قم بإزالة كل العناصر"}}}),n.define,n.require}();

src/static/admin/js/vendor/select2/i18n/az.js

@@ -0,0 +1,3 @@
+/*! Select2 4.0.13 | https://github.com/select2/select2/blob/master/LICENSE.md */
+
+!function(){if(jQuery&&jQuery.fn&&jQuery.fn.select2&&jQuery.fn.select2.amd)var n=jQuery.fn.select2.amd;n.define("select2/i18n/az",[],function(){return{inputTooLong:function(n){return n.input.length-n.maximum+" simvol silin"},inputTooShort:function(n){return n.minimum-n.input.length+" simvol daxil edin"},loadingMore:function(){return"Daha çox nəticə yüklənir…"},maximumSelected:function(n){return"Sadəcə "+n.maximum+" element seçə bilərsiniz"},noResults:function(){return"Nəticə tapılmadı"},searching:function(){return"Axtarılır…"},removeAllItems:function(){return"Bütün elementləri sil"}}}),n.define,n.require}();

src/static/admin/js/vendor/select2/i18n/bg.js

@@ -0,0 +1,3 @@
+/*! Select2 4.0.13 | https://github.com/select2/select2/blob/master/LICENSE.md */
+
+!function(){if(jQuery&&jQuery.fn&&jQuery.fn.select2&&jQuery.fn.select2.amd)var n=jQuery.fn.select2.amd;n.define("select2/i18n/bg",[],function(){return{inputTooLong:function(n){var e=n.input.length-n.maximum,u="Моля въведете с "+e+" по-малко символ";return e>1&&(u+="a"),u},inputTooShort:function(n){var e=n.minimum-n.input.length,u="Моля въведете още "+e+" символ";return e>1&&(u+="a"),u},loadingMore:function(){return"Зареждат се още…"},maximumSelected:function(n){var e="Можете да направите до "+n.maximum+" ";return n.maximum>1?e+="избора":e+="избор",e},noResults:function(){return"Няма намерени съвпадения"},searching:function(){return"Търсене…"},removeAllItems:function(){return"Премахнете всички елементи"}}}),n.define,n.require}();

src/static/admin/js/vendor/select2/i18n/bn.js

@@ -0,0 +1,3 @@
+/*! Select2 4.0.13 | https://github.com/select2/select2/blob/master/LICENSE.md */
+
+!function(){if(jQuery&&jQuery.fn&&jQuery.fn.select2&&jQuery.fn.select2.amd)var n=jQuery.fn.select2.amd;n.define("select2/i18n/bn",[],function(){return{errorLoading:function(){return"ফলাফলগুলি লোড করা যায়নি।"},inputTooLong:function(n){var e=n.input.length-n.maximum,u="অনুগ্রহ করে "+e+" টি অক্ষর মুছে দিন।";return 1!=e&&(u="অনুগ্রহ করে "+e+" টি অক্ষর মুছে দিন।"),u},inputTooShort:function(n){return n.minimum-n.input.length+" টি অক্ষর অথবা অধিক অক্ষর লিখুন।"},loadingMore:function(){return"আরো ফলাফল লোড হচ্ছে ..."},maximumSelected:function(n){var e=n.maximum+" টি আইটেম নির্বাচন করতে পারবেন।";return 1!=n.maximum&&(e=n.maximum+" টি আইটেম নির্বাচন করতে পারবেন।"),e},noResults:function(){return"কোন ফলাফল পাওয়া যায়নি।"},searching:function(){return"অনুসন্ধান করা হচ্ছে ..."}}}),n.define,n.require}();