software
/
archival.ArchiveBox
mirror of https://github.com/ArchiveBox/ArchiveBox.git


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790
							{% load i18n static tz core_tags %}
{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
    <head>
        <title>{% block title %}Home{% endblock %} | ArchiveBox</title>
        
        {% block blockbots %}
            <meta name="robots" content="NONE,NOARCHIVE">
        {% endblock %}
        
        <link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
        {% api_token as api_token %}
        <script>
            window.ARCHIVEBOX_API_KEY = "{{ api_token|escapejs }}";
        </script>
        {% block extrastyle %}
        <style>
            #upgrade-banner {
                position: fixed;
                right: 20px;
                bottom: 20px;
                background-color: #f8f8f8;
                color: #333333;
                border: 2px solid #772948;
                padding: 10px 20px;
                z-index: 1000;
                text-align: center;
            }
            #dismiss-btn {
                background: #aa1e55;
                color: white;
                cursor: pointer;
            }

            /* ============================================
               Modern card-based admin UI (shadcn-inspired)
               ============================================ */

            /* Base font improvements */
            body, html {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                font-size: 15px;
                line-height: 1.6;
                color: #0f172a;
                background: #f8fafc;
            }

            #container {
                background: #f8fafc;
            }

            #content {
                padding: 24px;
            }

            /* Main form container - flexbox grid */
            body:not(.change-list) #content-main form > div,
            body:not(.change-list) #content form > div {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                align-items: stretch;
            }

            /* Each fieldset becomes a card */
            #content-main form fieldset,
            #content form fieldset,
            #content-main form .module:not(.inline-group),
            #content form .module:not(.inline-group) {
                background: #fff !important;
                border: 1px solid #e2e8f0 !important;
                border-top: 1px solid #e2e8f0 !important;
                border-left: 1px solid #e2e8f0 !important;
                border-right: 1px solid #e2e8f0 !important;
                border-bottom: 1px solid #e2e8f0 !important;
                border-radius: 12px !important;
                padding: 0 !important;
                margin: 0 !important;
                box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
                flex: 1 1 340px;
                min-width: 320px;
                max-width: calc(33.33% - 14px);
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                transition: box-shadow 0.2s ease, border-color 0.2s ease;
                overflow: hidden;
            }

            /* Wide fieldsets MUST override card max-width - placed after card rules for specificity */
            #content-main form fieldset.wide,
            #content form fieldset.wide,
            #content-main form fieldset:has(.field-archiveresults_list),
            #content form fieldset:has(.field-archiveresults_list),
            #content-main form fieldset:has(.field-snapshots),
            #content form fieldset:has(.field-snapshots) {
                flex: 1 1 100% !important;
                max-width: 100% !important;
                min-width: 100% !important;
                width: 100% !important;
                flex-basis: 100% !important;
            }

            /* Inline groups should NOT have card constraints */
            #content-main form .inline-group,
            #content form .inline-group,
            .inline-group fieldset,
            .inline-group .module {
                flex: 1 1 100% !important;
                max-width: 100% !important;
                min-width: 100% !important;
                width: 100% !important;
            }

            #content-main form fieldset:hover,
            #content form fieldset:hover {
                box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.06);
                border-color: #cbd5e1;
            }

            /* Archive results list content should take full width */
            .field-archiveresults_list,
            .field-archiveresults_list .readonly,
            .field-snapshots,
            .field-snapshots .readonly {
                width: 100% !important;
                max-width: 100% !important;
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
            }

            /* Card headers - no borders, just background */
            #content-main form fieldset h2,
            #content form fieldset h2,
            #content-main form .module h2,
            #content form .module h2 {
                margin: 0 !important;
                padding: 8px 16px !important;
                background: #f1f5f9 !important;
                color: #334155 !important;
                font-size: 12px !important;
                font-weight: 600 !important;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
                border: none !important;
                border-top: none !important;
                border-left: none !important;
                border-right: none !important;
                border-bottom: none !important;
                border-radius: 0 !important;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                flex-shrink: 0;
                -webkit-font-smoothing: antialiased;
                box-shadow: none !important;
                outline: none !important;
            }

            /* Collapse toggle styling */
            #content-main form fieldset h2 a.collapse-toggle,
            #content form fieldset h2 a.collapse-toggle {
                color: #64748b;
            }

            /* Card content area */
            #content-main form fieldset > div,
            #content form fieldset > div {
                padding: 20px;
                flex: 1;
                overflow-x: hidden;
                overflow-y: visible;
                min-width: 0;
            }

            /* Form rows inside cards */
            #content-main form fieldset .form-row,
            #content form fieldset .form-row {
                padding: 8px 0;
                border-bottom: 1px solid #f1f5f9;
                min-width: 0;
                min-height: auto;
            }

            #content-main form fieldset .form-row:first-child,
            #content form fieldset .form-row:first-child {
                padding-top: 0;
            }

            #content-main form fieldset .form-row:last-child,
            #content form fieldset .form-row:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            /* Remove borders from nested fieldsets and flex-containers inside cards */
            #content-main form fieldset fieldset,
            #content form fieldset fieldset,
            #content-main form fieldset .flex-container,
            #content form fieldset .flex-container,
            #content-main form .module fieldset,
            #content form .module fieldset {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 0 !important;
                min-width: 0 !important;
                max-width: 94% !important;
                flex: none !important;
                display: block !important;
            }

            /* Nested fieldset headers should be invisible */
            #content-main form fieldset fieldset h2,
            #content form fieldset fieldset h2,
            #content-main form fieldset .flex-container legend,
            #content form fieldset .flex-container legend {
                background: transparent !important;
                padding: 0 0 4px 0 !important;
                font-size: 13px !important;
                color: #374151 !important;
                text-transform: none !important;
                letter-spacing: normal !important;
            }

            /* Ensure form elements inside cards don't overflow */
            #content-main form fieldset input,
            #content-main form fieldset select,
            #content-main form fieldset textarea,
            #content form fieldset input,
            #content form fieldset select,
            #content form fieldset textarea {
                max-width: 100%;
                box-sizing: border-box;
            }

            /* Related widget wrapper should fit within card */
            #content-main form fieldset .related-widget-wrapper,
            #content form fieldset .related-widget-wrapper {
                max-width: 100%;
            }

            #content-main form fieldset .related-widget-wrapper select,
            #content form fieldset .related-widget-wrapper select {
                min-width: 0;
                flex: 1;
            }

            /* Labels inside cards */
            #content-main form fieldset .form-row > label,
            #content form fieldset .form-row > label,
            #content-main form fieldset .form-row > .flex-container > label,
            #content form fieldset .form-row > .flex-container > label,
            #content-main form label,
            #content form label,
            .aligned label,
            legend {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                font-weight: 500;
                color: #374151;
                display: block;
                margin-bottom: 8px;
                float: none !important;
                width: auto !important;
                padding: 0 !important;
                font-size: 13px;
                letter-spacing: -0.01em;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /* Readonly fields styling */
            #content-main form fieldset .readonly,
            #content form fieldset .readonly {
                background: #f8fafc;
                padding: 12px 14px;
                border-radius: 8px;
                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
                font-size: 13px;
                word-break: break-word;
                line-height: 1.6;
                border: 1px solid #e2e8f0;
                color: #475569;
            }

            /* Long content in readonly */
            #content-main form fieldset .readonly pre,
            #content form fieldset .readonly pre {
                margin: 0;
                white-space: pre-wrap;
                word-break: break-word;
                font-family: inherit;
            }

            /* Input styling */
            #content-main form input[type="text"],
            #content-main form input[type="number"],
            #content-main form input[type="url"],
            #content-main form input[type="email"],
            #content-main form input[type="password"],
            #content form input[type="text"],
            #content form input[type="number"],
            #content form input[type="url"],
            #content form input[type="email"],
            #content form input[type="password"] {
                width: 100%;
                padding: 10px 14px;
                border: 1px solid #d1d5db;
                border-radius: 8px;
                font-size: 14px;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                box-sizing: border-box;
                background: #fff;
                color: #1e293b;
                transition: border-color 0.15s ease, box-shadow 0.15s ease;
                -webkit-font-smoothing: antialiased;
            }

            #content-main form select,
            #content form select {
                width: 100%;
                border: 1px solid #d1d5db;
                border-radius: 8px;
                font-size: 14px;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                box-sizing: border-box;
                background: #fff;
                color: #1e293b;
                transition: border-color 0.15s ease, box-shadow 0.15s ease;
                -webkit-font-smoothing: antialiased;
            }

            #content-main form input::placeholder,
            #content form input::placeholder {
                color: #94a3b8;
            }

            /* Focus states */
            #content-main form input:focus,
            #content-main form select:focus,
            #content-main form textarea:focus,
            #content form input:focus,
            #content form select:focus,
            #content form textarea:focus {
                border-color: #3b82f6;
                outline: none;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
            }

            /* Textarea styling */
            #content-main form textarea,
            #content form textarea {
                width: 100%;
                box-sizing: border-box;
                border: 1px solid #d1d5db;
                border-radius: 8px;
                padding: 12px 14px;
                font-size: 14px;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                line-height: 1.6;
                resize: vertical;
                min-height: 80px;
                color: #1e293b;
                transition: border-color 0.15s ease, box-shadow 0.15s ease;
                -webkit-font-smoothing: antialiased;
            }

            /* Fix vTextField width */
            .vTextField {
                width: 100% !important;
            }

            /* ============================================
               Button styling (shadcn-inspired)
               ============================================ */

            /* Base button styles */
            input[type="submit"],
            button,
            .button,
            .btn,
            a.button,
            .submit-row input,
            .submit-row a.button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 10px 18px;
                font-size: 14px;
                font-weight: 500;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                line-height: 1.4;
                border-radius: 8px;
                border: 1px solid transparent;
                cursor: pointer;
                transition: all 0.15s ease;
                text-decoration: none;
                white-space: nowrap;
                -webkit-font-smoothing: antialiased;
            }

            /* Primary button (default) */
            input[type="submit"],
            button[type="submit"],
            .button.default,
            .submit-row input[type="submit"] {
                background: #0f172a;
                color: #fff;
                border-color: #0f172a;
            }

            input[type="submit"]:hover,
            button[type="submit"]:hover,
            .button.default:hover,
            .submit-row input[type="submit"]:hover {
                background: #1e293b;
                border-color: #1e293b;
            }

            input[type="submit"]:active,
            button[type="submit"]:active {
                background: #334155;
                transform: translateY(1px);
            }

            /* Secondary/outline buttons */
            button:not([type="submit"]),
            .button:not(.default),
            a.button {
                background: #fff;
                color: #374151;
                border-color: #d1d5db;
            }

            button:not([type="submit"]):hover,
            .button:not(.default):hover,
            a.button:hover {
                background: #f9fafb;
                border-color: #9ca3af;
                color: #1f2937;
            }

            /* Danger button */
            .deletelink,
            a.deletelink,
            button.deletelink,
            input[name="delete"],
            .button.delete {
                background: #fff;
                color: #dc2626;
                border-color: #fecaca;
            }

            .deletelink:hover,
            a.deletelink:hover,
            button.deletelink:hover,
            input[name="delete"]:hover,
            .button.delete:hover {
                background: #fef2f2;
                border-color: #f87171;
                color: #b91c1c;
            }

            /* Small buttons */
            .btn-sm,
            .object-tools a,
            .datetimeshortcuts a {
                padding: 6px 12px;
                font-size: 13px;
                border-radius: 6px;
            }

            /* Object tools (top action buttons) */
            .object-tools {
                margin-bottom: 20px;
            }

            .object-tools li {
                margin-left: 10px;
            }

            .object-tools a {
                background: #fff;
                color: #374151;
                border: 1px solid #d1d5db;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
            }

            .object-tools a:hover {
                background: #f9fafb;
                border-color: #9ca3af;
            }

            /* Submit row styling */
            .submit-row {
                margin-top: 24px;
                padding: 20px;
                background: #fff;
                border-radius: 12px;
                border: 1px solid #e2e8f0;
                box-shadow: 0 1px 3px rgba(0,0,0,0.04);
                clear: both;
                flex: 1 1 100%;
                display: flex;
                gap: 12px;
                flex-wrap: wrap;
                align-items: center;
            }

            .submit-row p {
                margin: 0;
            }

            .submit-row .deletelink-box {
                margin-left: auto;
            }

            /* Responsive: 2 columns on medium screens */
            @media (max-width: 1400px) {
                #content-main form fieldset,
                #content form fieldset {
                    max-width: calc(50% - 10px);
                    flex: 1 1 320px;
                }
            }

            /* Responsive: stack on smaller screens */
            @media (max-width: 900px) {
                #content-main form fieldset,
                #content form fieldset {
                    flex: 1 1 100%;
                    max-width: 100%;
                    min-width: auto;
                }

                #content {
                    padding: 16px;
                }
            }

            /* Module content padding */
            #content-main form .module > div,
            #content form .module > div {
                padding: 12px;
            }

            /* Fix for JSON/config editor */
            .field-config .readonly,
            .field-config textarea {
                width: 100%;
                min-height: 120px;
                max-height: none;
            }

            /* Related widget styling */
            .related-widget-wrapper {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }

            .related-widget-wrapper select {
                flex: 1;
                min-width: 150px;
            }

            .related-widget-wrapper a {
                flex-shrink: 0;
                padding: 8px;
                border-radius: 6px;
                color: #64748b;
                transition: color 0.15s ease, background 0.15s ease;
            }

            .related-widget-wrapper a:hover {
                color: #1e293b;
                background: #f1f5f9;
            }

            /* Help text styling */
            .help {
                font-size: 13px;
                color: #64748b;
                margin-top: 6px;
                line-height: 1.5;
            }

            /* Error styling */
            .errorlist {
                color: #dc2626;
                font-size: 13px;
                margin: 6px 0;
                padding: 0;
                list-style: none;
            }

            .errorlist li {
                background: #fef2f2;
                padding: 8px 12px;
                border-radius: 6px;
                border: 1px solid #fecaca;
            }

            /* Inline related objects - force full width */
            .inline-group,
            #archiveresult_set-group,
            #content-main form .inline-group,
            #content-main form > div > .inline-group,
            #content form > div > .inline-group,
            .change-form .inline-group,
            div.inline-group {
                flex: 1 1 100% !important;
                max-width: 100% !important;
                min-width: 100% !important;
                width: 100% !important;
                margin-top: 20px;
                flex-basis: 100% !important;
            }

            /* Ensure inline-group breaks out of card grid */
            #content-main form > div,
            #content form > div {
                flex-wrap: wrap;
            }

            /* TabularInline table full width */
            .inline-group .tabular,
            .inline-group table {
                width: 100% !important;
            }

            .inline-related {
                margin: 12px 0;
                padding: 16px;
                background: #fff;
                border-radius: 10px;
                border: 1px solid #e2e8f0;
            }

            .inline-related h3 {
                margin: -16px -16px 16px -16px;
                padding: 12px 16px;
                background: #f8fafc;
                border-radius: 9px 9px 0 0;
                border-bottom: 1px solid #e2e8f0;
                font-size: 13px;
                font-weight: 600;
                color: #374151;
            }

            /* Tabular inline styling */
            .tabular {
                border-radius: 8px;
                overflow: hidden;
                border: 1px solid #e2e8f0;
            }

            .tabular td, .tabular th {
                padding: 12px 14px;
                font-size: 13px;
                border-bottom: 1px solid #f1f5f9;
            }

            .tabular th {
                background: #f8fafc;
                font-weight: 600;
                color: #374151;
                text-align: left;
            }

            .tabular tr:last-child td {
                border-bottom: none;
            }

            /* Delete checkbox */
            .inline-deletelink {
                color: #dc2626;
                font-size: 13px;
            }

            /* Datetime widgets */
            .datetimeshortcuts {
                margin-left: 10px;
            }

            .datetimeshortcuts a {
                background: #f1f5f9;
                color: #475569;
                border: none;
                padding: 4px 10px;
            }

            .datetimeshortcuts a:hover {
                background: #e2e8f0;
                color: #1e293b;
            }

            /* Aligned forms - fix label positioning */
            .aligned .form-row > div {
                margin-left: 0 !important;
            }

            /* Checkbox styling */
            input[type="checkbox"] {
                width: 18px;
                height: 18px;
                border-radius: 4px;
                border: 1px solid #d1d5db;
                cursor: pointer;
                accent-color: #3b82f6;
            }

            /* Links styling */
            a {
                color: #2563eb;
                text-decoration: none;
                transition: color 0.15s ease;
            }

            a:hover {
                color: #1d4ed8;
            }

            /* Messages/alerts */
            .messagelist {
                padding: 0;
                margin: 0 0 20px 0;
            }

            .messagelist li {
                padding: 14px 18px;
                border-radius: 10px;
                font-size: 14px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            ul.messagelist li.success {
                background: #f0fdf4 !important;
                background-image: none !important;
                border: 1px solid #bbf7d0;
                color: #166534;
            }

            .messagelist li.warning {
                background: #fffbeb !important;
                background-image: none !important;
                border: 1px solid #fde68a;
                color: #92400e;
            }

            .messagelist li.error {
                background: #fef2f2 !important;
                background-image: none !important;
                border: 1px solid #fecaca;
                color: #991b1b;
            }

            /* Breadcrumbs */
            .breadcrumbs {
                background: transparent;
                padding: 12px 24px;
                font-size: 13px;
                color: #64748b;
            }

            .breadcrumbs a {
                color: #64748b;
            }

            .breadcrumbs a:hover {
                color: #1e293b;
            }

            /* Action buttons in cards */
            .card .btn,
            .card button {
                margin-top: 10px;
            }

            /* Select2 overrides */
            .select2-container--default .select2-selection--single,
            .select2-container--default .select2-selection--multiple {
                border: 1px solid #d1d5db;
                border-radius: 8px;
                min-height: 42px;
            }

            .select2-container--default .select2-selection--single:focus,
            .select2-container--default .select2-selection--multiple:focus {
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
            }

            /* ============================================
               Admin List/Changelist Page Styling
               ============================================ */

            /* Results table container */
            #changelist {
                background: #fff;
                border-radius: 12px;
                border: 1px solid #e2e8f0;
                box-shadow: 0 1px 3px rgba(0,0,0,0.04);
                overflow: hidden;
            }

            /* Table styling */
            #result_list {
                width: 100%;
                border-collapse: collapse;
                font-size: 14px;
            }

            #result_list thead th {
                background: #f8fafc;
                border-bottom: 2px solid #e2e8f0;
                padding: 12px 16px;
                font-weight: 600;
                font-size: 13px;
                color: #475569;
                text-align: left;
                text-transform: uppercase;
                letter-spacing: 0.025em;
                white-space: nowrap;
            }

            #result_list thead th a {
                color: #475569;
                text-decoration: none;
            }

            #result_list thead th a:hover {
                color: #1e293b;
            }

            #result_list thead th.sorted {
                background: #f1f5f9;
            }

            #result_list thead th .text span {
                padding-right: 5px;
            }

            #result_list tbody tr {
                border-bottom: 1px solid #f1f5f9;
                transition: background-color 0.15s ease;
            }

            #result_list tbody tr:hover {
                background-color: #f8fafc;
            }

            #result_list tbody tr.selected {
                background-color: #eff6ff;
            }

            #result_list tbody td {
                padding: 12px 16px;
                color: #334155;
                vertical-align: middle;
            }

            #result_list tbody td a {
                color: #2563eb;
                font-weight: 500;
            }

            #result_list tbody td a:hover {
                color: #1d4ed8;
                text-decoration: underline;
            }

            /* Checkbox column */
            #result_list .action-checkbox,
            #result_list th.action-checkbox-column {
                width: 40px;
                text-align: center;
                padding: 12px 8px;
            }

            /* Pagination */
            .paginator {
                background: #f8fafc;
                padding: 12px 16px;
                border-top: 1px solid #e2e8f0;
                font-size: 14px;
                color: #64748b;
            }

            .paginator a {
                color: #2563eb;
                padding: 6px 12px;
                border-radius: 6px;
                margin: 0 2px;
                text-decoration: none;
            }

            .paginator a:hover {
                background: #e2e8f0;
            }

            /* Toolbar / search bar */
            #changelist #toolbar {
                padding: 12px 16px;
                background: #fff;
                border-bottom: 1px solid #e2e8f0;
                display: flex;
                align-items: center;
                gap: 12px;
            }

            #toolbar form,
            #changelist-search {
                display: flex;
                align-items: center;
                gap: 8px;
                flex: 0 1 auto;
                max-width: 500px;
            }
            body.change-list #toolbar form > div {
                display: flex !important;
                align-items: center;
                gap: 8px;
                flex-wrap: nowrap !important;
                white-space: nowrap;
            }
            body.change-list #toolbar label {
                margin: 0;
                display: inline-flex;
                align-items: center;
            }
            body.change-list #toolbar input[type="submit"] {
                margin: 0;
            }

            #searchbar {
                flex: 1;
                max-width: 400px;
                padding: 10px 14px;
                border: 1px solid #d1d5db;
                border-radius: 8px;
                font-size: 14px;
            }

            #searchbar:focus {
                border-color: #3b82f6;
                outline: none;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
            }

            /* Filter sidebar */
            #changelist-filter {
                background: #fff;
                border: 1px solid #e2e8f0;
                border-radius: 12px;
                box-shadow: 0 1px 3px rgba(0,0,0,0.04);
                overflow: hidden;
            }

            #changelist-filter h2 {
                background: #f8fafc;
                padding: 12px 16px;
                font-size: 13px;
                font-weight: 600;
                color: #475569;
                text-transform: uppercase;
                letter-spacing: 0.025em;
                margin: 0;
                border-bottom: 1px solid #e2e8f0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
            }

            #changelist-filter .filter-toggle {
                border: 1px solid #e2e8f0;
                background: #ffffff;
                color: #64748b;
                font-size: 11px;
                padding: 4px 8px;
                border-radius: 999px;
                cursor: pointer;
                text-transform: none;
                letter-spacing: normal;
            }

            #changelist-filter .filter-toggle:hover {
                background: #f1f5f9;
                color: #334155;
            }

            .filter-toggle-floating {
                position: static;
                box-shadow: none;
                padding: 2px 6px;
                font-size: 11px;
                line-height: 1.2;
                height: 20px;
            }

            #changelist-filter h3 {
                padding: 12px 16px 8px;
                font-size: 12px;
                font-weight: 600;
                color: #64748b;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                margin: 0;
            }

            #changelist-filter ul {
                padding: 0 8px 12px;
                margin: 0;
                list-style: none;
            }

            #changelist-filter li {
                margin: 0;
            }

            #changelist-filter li a {
                display: block;
                padding: 8px 12px;
                color: #475569;
                text-decoration: none;
                border-radius: 6px;
                font-size: 14px;
                transition: background-color 0.15s ease;
            }

            #changelist-filter li a:hover {
                background: #f1f5f9;
                color: #1e293b;
            }

            #changelist-filter li.selected a {
                background: #eff6ff;
                color: #2563eb;
                font-weight: 500;
            }

            body.filters-collapsed #changelist-filter {
                display: none !important;
            }

            body.filters-collapsed.change-list .results,
            body.filters-collapsed.change-list .paginator,
            body.filters-collapsed.change-list #toolbar,
            body.filters-collapsed.change-list div.xfull,
            body.filters-collapsed.change-list #changelist .changelist-form-container,
            body.filters-collapsed.change-list #changelist-form,
            body.filters-collapsed.change-list #result_list {
                margin-right: 0 !important;
                width: 100% !important;
            }

            body.filters-collapsed.change-list #changelist .changelist-form-container > div {
                max-width: 100% !important;
            }

            /* Actions bar */
            body.change-list #changelist .actions {
                padding: 12px 16px;
                background: #f8fafc;
                border-bottom: 0;
                display: flex !important;
                align-items: center;
                gap: 8px;
                flex-wrap: nowrap !important;
                overflow-x: auto;
            }
            body.change-list #changelist {
                border: 0 !important;
            }
            body.change-list #changelist .actions .button,
            body.change-list #changelist .actions select,
            body.change-list #changelist .actions label {
                line-height: 1.5rem;
                height: 1.5rem;
                display: inline-flex;
                align-items: center;
            }
            body.change-list #changelist .actions-left {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: nowrap !important;
                flex: 1 1 auto;
                min-width: 0;
                white-space: nowrap;
            }
            body.change-list #changelist .actions-right {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-left: auto;
                flex: 0 0 auto;
            }

            .actions label {
                font-size: 14px;
                color: #475569;
            }

            .actions select {
                padding: 8px 12px;
                border: 1px solid #d1d5db;
                border-radius: 6px;
                font-size: 14px;
                background: #fff;
            }

            .actions .button {
                padding: 8px 16px;
                font-size: 14px;
            }

            /* Object count */
            .actions .action-counter {
                color: #64748b;
                font-size: 14px;
            }

            /* Empty results */
            #changelist-form .results + p,
            .paginator + p {
                padding: 40px;
                text-align: center;
                color: #64748b;
                font-size: 15px;
            }

            /* Date hierarchy */
            .xfull {
                padding: 12px 16px;
                background: #f8fafc;
                border-bottom: 1px solid #e2e8f0;
            }

            .xfull a {
                color: #2563eb;
                margin-right: 8px;
            }

            /* ============================================
               Tag Editor Widget Styles
               ============================================ */

            /* Main container - acts as input field */
            .tag-editor-container {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px;
                padding: 8px 12px;
                min-height: 42px;
                background: #fff;
                border: 1px solid #d1d5db;
                border-radius: 8px;
                cursor: text;
                transition: border-color 0.15s ease, box-shadow 0.15s ease;
            }

            .tag-editor-container:focus-within {
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
            }

            /* Pills container */
            .tag-pills {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                align-items: center;
            }

            /* Individual tag pill */
            .tag-pill {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 4px 8px 4px 10px;
                background: var(--tag-bg, #e2e8f0);
                color: var(--tag-fg, #1e293b);
                font-size: 13px;
                font-weight: 500;
                border-radius: 16px;
                white-space: nowrap;
                transition: all 0.15s ease;
                -webkit-font-smoothing: antialiased;
                border: 1px solid var(--tag-border, #cbd5e1);
            }

            .tag-pill:hover {
                filter: brightness(0.98);
            }

            .tag-pill a.tag-link {
                color: inherit;
                text-decoration: none;
            }

            .tag-pill a.tag-link:hover {
                text-decoration: underline;
            }

            /* Remove button on pills */
            .tag-remove-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 16px;
                height: 16px;
                padding: 0;
                margin: 0;
                background: rgba(15, 23, 42, 0.08);
                border: 1px solid rgba(15, 23, 42, 0.12);
                border-radius: 50%;
                color: inherit;
                font-size: 14px;
                font-weight: 600;
                line-height: 1;
                cursor: pointer;
                opacity: 0.7;
                transition: all 0.15s ease;
            }

            .tag-remove-btn:hover {
                background: rgba(15, 23, 42, 0.18);
                opacity: 1;
            }

            /* Inline input for adding tags */
            .tag-inline-input {
                flex: 1;
                min-width: 120px;
                padding: 4px 0;
                border: none;
                outline: none;
                font-size: 14px;
                font-family: inherit;
                background: transparent;
                color: #1e293b;
            }

            .tag-inline-input::placeholder {
                color: #94a3b8;
            }

            /* Inline editor for list view - more compact */
            .tag-editor-inline {
                display: inline-flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 4px;
                padding: 2px 4px;
                background: transparent;
                border-radius: 4px;
                cursor: text;
                vertical-align: middle;
            }

            .tag-pills-inline {
                display: inline-flex;
                flex-wrap: wrap;
                gap: 4px;
                align-items: center;
            }

            .tag-editor-inline .tag-pill {
                padding: 2px 6px 2px 8px;
                font-size: 11px;
                border-radius: 12px;
            }

            .tag-editor-inline .tag-remove-btn {
                width: 14px;
                height: 14px;
                font-size: 12px;
            }

            #content .tag-editor-inline input.tag-inline-input-sm {
                width: 22px;
                min-width: 22px;
                max-width: 140px;
                height: 22px;
                padding: 0 6px;
                border: 1px solid #e2e8f0;
                outline: none;
                font-size: 12px;
                font-family: inherit;
                background: #f1f5f9;
                color: #94a3b8;
                border-radius: 999px;
                text-align: center;
                cursor: text;
                transition: width 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
            }

            #content .tag-editor-inline input.tag-inline-input-sm:focus {
                width: 120px;
                color: #1e293b;
                border-color: #94a3b8;
                background: #ffffff;
                text-align: left;
            }

            #content .tag-editor-inline input.tag-inline-input-sm::placeholder {
                color: #94a3b8;
            }

            /* Actions bar tag editor (compact to avoid crowding buttons) */
            body.change-list #changelist .actions .tag-editor-container {
                padding: 2px 6px;
                min-height: 24px;
                height: 24px;
                width: 160px;
                max-width: 160px;
                flex: 0 0 160px;
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                gap: 4px;
            }
            body.change-list #changelist .actions-tags {
                display: none;
                align-items: center;
            }

            /* Ensure changelist filter sidebar is visible */
            body.change-list #changelist .changelist-form-container {
                display: flex;
                align-items: flex-start;
                width: 100%;
                gap: 20px;
                flex-wrap: nowrap;
            }
            body.change-list #changelist-filter {
                flex: 0 0 260px;
                max-width: 260px;
                display: block;
                margin: 0;
                order: 2;
                align-self: flex-start;
            }
            body.change-list #changelist .changelist-form-container > div {
                flex: 1 1 auto;
                min-width: 0;
                order: 1;
                max-width: calc(100% - 280px);
            }

            .actions .tag-pills {
                gap: 4px;
                flex-wrap: nowrap;
            }

            .actions .tag-pill {
                padding: 1px 6px 1px 8px;
                font-size: 10px;
            }

            .actions .tag-inline-input {
                min-width: 40px;
                padding: 0;
                font-size: 11px;
            }


            /* Container in list view title column */
            .tags-inline-editor {
                display: inline;
                margin-left: 8px;
            }

            /* Existing tag styles (keep for backwards compat) */
            .tags .tag {
                display: inline-block;
                padding: 2px 8px;
                margin: 1px 2px;
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                color: #fff;
                font-size: 11px;
                font-weight: 500;
                border-radius: 12px;
                text-decoration: none;
                transition: all 0.15s ease;
            }

            .tags .tag:hover {
                background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            }
        </style>
        {% endblock %}
        
        {% if LANGUAGE_BIDI %}
            <link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">
        {% endif %}
        
        {% block responsive %}
            <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
            <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}">
            {% if LANGUAGE_BIDI %}
                <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}">
            {% endif %}
        {% endblock %}
        
        <script
            src="{% static 'jquery-3.7.1.slim.min.js' %}"
            integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
            crossorigin="anonymous"></script>
        <link href="{% static 'select2.min.css' %}" rel="stylesheet"/>
        <script src="{% static 'select2.min.js' %}"></script>

        <link rel="stylesheet" type="text/css" href="{% static "admin.css" %}">
        
        <script>
            function selectSnapshotListView(e) {
                e && e.stopPropagation()
                e && e.preventDefault()
                console.log('Switching to Snapshot list view...')
                localStorage.setItem('preferred_snapshot_view_mode', 'list')
                window.location = "{% url 'admin:core_snapshot_changelist' %}" + document.location.search
                return false
            }
            function selectSnapshotGridView(e) {
                e && e.stopPropagation()
                e && e.preventDefault()
                console.log('Switching to Snapshot grid view...')
                localStorage.setItem('preferred_snapshot_view_mode', 'grid')
                window.location = "{% url 'admin:grid' %}" + document.location.search
                return false
            }

            const preferred_view = localStorage.getItem('preferred_snapshot_view_mode') || 'unset'
            const current_view = (
                window.location.pathname === "{% url 'admin:core_snapshot_changelist' %}"
                    ? 'list'
                    : 'grid')
            console.log('Preferred snapshot view is:', preferred_view, 'Current view mode is:', current_view)
            
            if (preferred_view === 'grid' && current_view !== 'grid') {  
                selectSnapshotGridView()
            }
        </script>

        {% block extrahead %}{% endblock %}
    </head>


    <body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}">
        {% include 'progressbar.html' %}

        <div id="container">
            {% if not is_popup %}
                <div id="header">
                    <div id="branding">
                        <h1 id="site-name">
                            <a href="{% url 'Home' %}">
                                <img src="{% static 'archive.png' %}" id="logo">
                                ArchiveBox
                            </a>
                        </h1>
                    </div>
                    {% block usertools %}
                        {% if has_permission %}
                            {% include 'navigation.html' %}
                        {% endif %}
                    {% endblock %}
                    {% block nav-global %}{% endblock %}
                </div>

                {% if has_permission %}
                    {% include 'admin/progress_monitor.html' %}
                {% endif %}

                {% block breadcrumbs %}
                    <div class="breadcrumbs">
                        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
                        {% if title %} &rsaquo; {{ title }}{% endif %}
                    </div>
                {% endblock %}
            {% endif %}

            {% block messages %}
                {% if messages %}
                    <ul class="messagelist">
                        {% for message in messages %}
                            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endblock messages %}

            <div id="content" class="{% block coltype %}colM{% endblock %}">
                {% if opts.model_name == 'snapshot' and cl %}
                    <div id="snapshot-view-mode">
                        <a href="#list" title="List view" id="snapshot-view-list">
                            <span class="view-icon">☰</span>
                            <span class="view-label">List</span>
                        </a>
                        <a href="#grid" title="Grid view" id="snapshot-view-grid">
                            <span class="view-icon">⊞</span>
                            <span class="view-label">Grid</span>
                        </a>
                    </div>
                {% endif %}
                {% block pretitle %}{% endblock %}
                {% block content_title %}{# {% if title %}<h1>{{ title }}</h1>{% endif %} #}{% endblock %}
                {% block content %}
                    {% block object-tools %}{% endblock %}
                    {{ content }}
                {% endblock %}
                {% block sidebar %}{% endblock %}
                <br class="clear">
            </div>

            {% block footer %}<div id="footer"></div>{% endblock %}
        </div>

        {% comment %} 
        {% if user.is_authenticated and user.is_superuser and CAN_UPGRADE %}
            <script>
                if (!localStorage.getItem("bannerDismissed")) {
                    const upgradeVersionTag = "{{VERSIONS_AVAILABLE.recommended_version.tag_name}}"
                    const upgradeVersionURL = "{{VERSIONS_AVAILABLE.recommended_version.html_url}}"
                    const currentVersionTag = "{{VERSION}}"
                    const currentVersionURL = "{{VERSIONS_AVAILABLE.recommended_version.html_url}}"

                    createBanner(currentVersionTag, currentVersionURL, upgradeVersionTag, upgradeVersionURL)
                }

                function createBanner(currentVersionTag, currentVersionURL, upgradeVersionTag, upgradeVersionURL) {
                    const banner = document.createElement('div')
                    banner.setAttribute('id', 'upgrade-banner');
                    banner.innerHTML = `
                        <p>There's a new version of ArchiveBox available!</p>
                        Your version: <a href=${currentVersionURL}>${currentVersionTag}</a> | New version: <a href=${upgradeVersionURL}>${upgradeVersionTag}</a>
                        <p>
                        <a href=https://github.com/ArchiveBox/ArchiveBox/wiki/Upgrading-or-Merging-Archives>Upgrade Instructions</a> | <a href=https://github.com/ArchiveBox/ArchiveBox/releases>Changelog</a> | <a href=https://github.com/ArchiveBox/ArchiveBox/wiki/Roadmap>Roadmap</a> 
                        </p>
                        <button id="dismiss-btn">Dismiss</button>
                    `
                    document.body.appendChild(banner);
                    const dismissButton = document.querySelector("#dismiss-btn")
                    if (dismissButton) {
                        dismissButton.addEventListener("click", dismissBanner)
                    }
                }

                function dismissBanner() {
                    const banner = document.getElementById("upgrade-banner")
                    banner.style.display = "none"
                    localStorage.setItem("bannerDismissed", "true")
                }
            </script>
        {% endif %}
        {% endcomment %}
        
        <script>
            $ = django.jQuery;
            $.fn.reverse = [].reverse;

            // hide images that fail to load
            document.querySelector('body').addEventListener('error', function (e) {
                e.target.style.opacity = 0;
            }, true)

            // setup timezone
            {% get_current_timezone as TIME_ZONE %}
            window.TIME_ZONE = '{{TIME_ZONE}}'

            window.setCookie = function(name, value, days) {
                let expires = ""
                if (days) {
                    const date = new Date()
                    date.setTime(date.getTime() + (days*24*60*60*1000))
                    expires = "; expires=" + date.toUTCString()
                }
                document.cookie = name + "=" + (value || "")  + expires + "; path=/"
            }

            function setTimeOffset() {
                if (window.GMT_OFFSET) return
                window.GMT_OFFSET = -(new Date).getTimezoneOffset()
                window.setCookie('GMT_OFFSET', window.GMT_OFFSET, 365)
            }

            // change the admin actions button from a dropdown to buttons across
            function fix_actions() {
                const container = $('div.actions')

                // too many actions to turn into buttons
                if (container.find('select[name=action] option').length >= 11) return

                // hide the empty default option thats just a placeholder with no value
                container.find('label:nth-child(1), button[value=0]').hide()

                const buttons = $('<div></div>')
                    .insertAfter('div.actions button[type=submit]')
                    .css('display', 'inline')
                    .addClass('class', 'action-buttons');

                // for each action in the dropdown, turn it into a button instead
                container.find('select[name=action] option:gt(0)').each(function () {
                    const action_type = this.value
                    $('<button>')
                        .attr('type', 'button')
                        .attr('name', action_type)
                        .addClass('button')
                        .text(this.text)
                        .click(function (e) {
                            e.preventDefault()
                            e.stopPropagation()

                            const num_selected = document.querySelector('.action-counter').innerText.split(' ')[0]

                            if (action_type === 'overwrite_snapshots') {
                                const message = (
                                    'Are you sure you want to re-archive (overwrite) ' + num_selected + ' Snapshots?\n\n' +
                                    'This will delete all previously saved files from these Snapshots and re-archive them from scratch.\n\n'
                                )
                                if (!window.confirm(message)) return false
                            }
                            if (action_type === 'delete_snapshots') {
                                const message = (
                                    'Are you sure you want to permanently delete ' + num_selected + ' Snapshots?\n\n' +
                                    'They will be removed from your index, and all their Snapshot content on disk will be permanently deleted.'
                                )
                                if (!window.confirm(message)) return false
                            }

                            // select the action button from the dropdown
                            container.find('select[name=action]')
                                .find('[selected]').removeAttr('selected').end()
                                .find('[value=' + action_type + ']').attr('selected', 'selected').click()
                            
                            // click submit & replace the archivebox logo with a spinner
                            $('#changelist-form button[name="index"]').click()
                            document.querySelector('#logo').outerHTML = '<div class="loader"></div>'
                            return false
                        })
                        .appendTo(buttons)
                })
                console.log('Converted', buttons.children().length, 'admin actions from dropdown to buttons')
                jQuery('select[multiple]').select2();
            }
            function updateTagWidgetVisibility() {
                const tagContainer = document.querySelector('.actions-tags');
                if (!tagContainer) return;
                const checked = document.querySelectorAll('#changelist-form input.action-select:checked').length;
                tagContainer.style.display = checked > 0 ? 'inline-flex' : 'none';
            }
            function fixInlineAddRow() {
                $('#id_snapshottag-MAX_NUM_FORMS').val('1000')
                $('.add-row').show()
            }

            function setupSnapshotGridListToggle() {
                $("#snapshot-view-list").click(selectSnapshotListView)
                $("#snapshot-view-grid").click(selectSnapshotGridView)

                // Set active class based on current view
                const isGridView = window.location.pathname === "{% url 'admin:grid' %}"
                if (isGridView) {
                    $("#snapshot-view-grid").addClass('active')
                    $("#snapshot-view-list").removeClass('active')
                } else {
                    $("#snapshot-view-list").addClass('active')
                    $("#snapshot-view-grid").removeClass('active')
                }

                $('#changelist-form .card input:checkbox').change(function() {
                    if ($(this).is(':checked'))
                        $(this).parents('.card').addClass('selected-card')
                    else
                        $(this).parents('.card').removeClass('selected-card')
                })
            };
            function selectSnapshotIfHotlinked() {
                // if we arrive at the index with a url like ??id__startswith=...
                // we were hotlinked here with the intention of making it easy for the user to perform some
                // actions on the given snapshot. therefore we should preselect the snapshot to save them a click
                if (window.location.search.startsWith('?')) {
                    const result_checkboxes = [...document.querySelectorAll('#result_list .action-checkbox input[type=checkbox]')]
                    if (result_checkboxes.length === 1) {
                        result_checkboxes[0].click()
                    }
                }
            }
            $(document).ready(function() {
                fix_actions()
                updateTagWidgetVisibility()
                const form = document.querySelector('#changelist-form')
                if (form) {
                    form.addEventListener('change', updateTagWidgetVisibility)
                }
                fixInlineAddRow()
                setupSnapshotGridListToggle()
                setTimeOffset()
                selectSnapshotIfHotlinked()
            })
        </script>
        <script>
            (function() {
                if (!document.body.classList.contains('change-list')) return;
                var filter = document.getElementById('changelist-filter');
                if (!filter) return;
                var header = filter.querySelector('h2');
                if (!header) return;

                var toggle = document.getElementById('changelist-filter-toggle');
                if (!toggle) {
                    toggle = document.createElement('button');
                    toggle.type = 'button';
                    toggle.id = 'changelist-filter-toggle';
                    toggle.className = 'filter-toggle';
                    toggle.setAttribute('aria-expanded', 'true');
                    toggle.dataset.showLabel = '{% translate "Filters" %}';
                    toggle.dataset.hideLabel = '{% translate "Hide" %}';
                    toggle.textContent = toggle.dataset.hideLabel;
                    header.appendChild(toggle);
                }

                var storageKey = 'admin-filters-collapsed';
                var changelist = document.getElementById('changelist');
                var hadFiltered = changelist && changelist.classList.contains('filtered');

                var floating = document.getElementById('changelist-filter-float-toggle');
                if (!floating) {
                    floating = document.createElement('button');
                    floating.type = 'button';
                    floating.id = 'changelist-filter-float-toggle';
                    floating.className = 'filter-toggle filter-toggle-floating';
                    floating.textContent = toggle.dataset.showLabel;
                }

                var actionsRight = document.querySelector('#changelist .actions .actions-right');
                var actionsBar = document.querySelector('#changelist .actions');
                if (actionsRight) {
                    actionsRight.appendChild(floating);
                } else if (actionsBar) {
                    actionsBar.appendChild(floating);
                }

                function applyState() {
                    var collapsed = localStorage.getItem(storageKey) === 'true';
                    document.body.classList.toggle('filters-collapsed', collapsed);
                    filter.style.display = collapsed ? 'none' : '';
                    toggle.textContent = collapsed ? toggle.dataset.showLabel : toggle.dataset.hideLabel;
                    toggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
                    floating.style.display = collapsed ? 'inline-flex' : 'none';
                    if (changelist) {
                        if (collapsed) {
                            changelist.classList.remove('filtered');
                        } else if (hadFiltered) {
                            changelist.classList.add('filtered');
                        }
                    }
                }

                function toggleFilters() {
                    var collapsed = !document.body.classList.contains('filters-collapsed');
                    localStorage.setItem(storageKey, collapsed ? 'true' : 'false');
                    applyState();
                }

                toggle.addEventListener('click', toggleFilters);
                floating.addEventListener('click', toggleFilters);

                applyState();
            })();
        </script>
        <script src="{% static 'admin-inline-tags.js' %}"></script>
    </body>
</html>