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