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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530
							{% load i18n static tz %}
{% 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 %}">
        {% 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 */
            #content-main form > div,
            #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 */
            #toolbar {
                padding: 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;
            }

            #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;
            }

            #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;
            }

            /* Actions bar */
            .actions {
                padding: 12px 16px;
                background: #f8fafc;
                border-bottom: 1px solid #e2e8f0;
                display: flex;
                align-items: center;
                gap: 12px;
                flex-wrap: wrap;
            }

            .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: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                color: #fff;
                font-size: 13px;
                font-weight: 500;
                border-radius: 16px;
                white-space: nowrap;
                transition: all 0.15s ease;
                -webkit-font-smoothing: antialiased;
            }

            .tag-pill:hover {
                background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            }

            .tag-pill a.tag-link {
                color: #fff;
                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(255, 255, 255, 0.2);
                border: none;
                border-radius: 50%;
                color: #fff;
                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(255, 255, 255, 0.4);
                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;
            }

            .tag-inline-input-sm {
                width: 24px;
                min-width: 24px;
                max-width: 100px;
                padding: 2px 4px;
                border: none;
                outline: none;
                font-size: 11px;
                font-family: inherit;
                background: transparent;
                color: #64748b;
                transition: width 0.15s ease;
            }

            .tag-inline-input-sm:focus {
                width: 80px;
                color: #1e293b;
            }

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

            /* 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 %}
                    <small id="snapshot-view-mode">
                        <a href="#list" title="List view" id="snapshot-view-list">☰</a> | 
                        <a href="#grid" title="Grid view" id="snapshot-view-grid" style="letter-spacing: -.4em;">⣿⣿</a> 
                    </small>
                {% 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 fixInlineAddRow() {
                $('#id_snapshottag-MAX_NUM_FORMS').val('1000')
                $('.add-row').show()
            }

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

                $('#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()
                fixInlineAddRow()
                setupSnapshotGridListToggle()
                setTimeOffset()
                selectSnapshotIfHotlinked()
            })
        </script>
    </body>
</html>