{% extends 'auth/layout.html.twig' %}

{% block title %}RISKINESS - Password Manager{% endblock %}

{% block stylesheets %}
    <style>
        .vault {
            margin: 28px 4px 10px;
            display: grid;
            gap: 18px;
        }

        .vault__hero,
        .vault__panel {
            border: 1px solid var(--border);
            border-radius: 32px;
            background:
                radial-gradient(circle at top right, rgba(255, 122, 61, 0.12), transparent 34%),
                radial-gradient(circle at left, rgba(245, 36, 94, 0.12), transparent 28%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
                var(--surface-1);
            box-shadow: var(--shadow-md);
        }

        .vault__hero {
            padding: 14px 18px;
            border-radius: 28px;
        }

        .vault__hero-brand {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }

        .vault__hero-main {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .vault__hero-icon {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            flex: none;
            color: #fff;
        }

        .vault__hero-icon svg {
            width: 48px;
            height: 48px;
            display: block;
        }

        .vault__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.035);
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .vault__eyebrow::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: var(--brand-gradient);
            box-shadow: 0 0 18px rgba(245, 36, 94, 0.55);
        }

        .vault__info-button {
            width: 38px;
            min-width: 38px;
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1;
            transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
        }

        .vault__info-button:hover,
        .vault__info-button[data-open="true"] {
            transform: translateY(-1px);
            border-color: rgba(245, 36, 94, 0.42);
            background: rgba(245, 36, 94, 0.10);
            color: #fff;
        }

        .vault__title {
            margin: 12px 0 8px;
            font-size: clamp(2rem, 4vw, 3.2rem);
            line-height: 1;
            letter-spacing: -0.06em;
        }

        .vault__title .accent {
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .vault__lead {
            margin: 18px 0 0;
            max-width: 70ch;
            color: var(--text-secondary);
            line-height: 1.7;
        }

        .vault__lead[hidden] {
            display: none !important;
        }

        .vault__toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: space-between;
            align-items: center;
        }

        .vault__overview {
            display: grid;
            gap: 8px;
            padding-block: 8px;
        }

        .vault__overview-head {
            display: flex;
            gap: 12px;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            min-height: 48px;
        }

        .vault__overview-grid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .vault__modebar {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr)) 46px 46px;
            gap: 10px;
            align-items: center;
        }

        .vault__mode-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary);
            font-weight: 800;
            cursor: pointer;
            transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
        }

        .vault__mode-button:hover,
        .vault__mode-button[data-active="true"] {
            transform: translateY(-1px);
            border-color: rgba(245, 36, 94, 0.42);
            background:
                radial-gradient(circle at right, rgba(255, 122, 61, 0.14), transparent 42%),
                rgba(245, 36, 94, 0.10);
            color: var(--text-primary);
        }

        .vault__mode-button[data-active="true"] {
            box-shadow: inset 0 0 0 1px rgba(255, 122, 61, 0.10);
        }

        .vault__mode-button svg {
            display: none;
            width: 18px;
            height: 18px;
            stroke-width: 1.9;
        }

        .vault__module-section[hidden] {
            display: none !important;
        }

        .vault__module-section {
            grid-column: 1 / -1;
        }

        .vault__overview-card {
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            padding: 14px;
            display: grid;
            gap: 8px;
        }

        .vault__overview-card h3 {
            margin: 0;
            font-size: 0.95rem;
        }

        .vault__overview-card p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.55;
        }

        .vault__overview-card details {
            margin-top: 4px;
        }

        .vault__overview-card summary {
            cursor: pointer;
            color: var(--text-primary);
            font-weight: 700;
            font-size: 0.88rem;
            list-style: none;
        }

        .vault__overview-card summary::-webkit-details-marker {
            display: none;
        }

        .vault__overview-card .vault__empty {
            margin-top: 8px;
        }

        .vault__overview-card .audit-panel__button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            padding: 6px 11px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            font-size: 0.8rem;
            cursor: pointer;
        }

        .vault__overview-card-head {
            display: flex;
            gap: 10px;
            justify-content: space-between;
            align-items: center;
        }

        .vault__overview-card-head strong {
            font-size: 0.88rem;
        }

        .audit-panel__content {
            margin-top: 8px;
        }

        .vault__chips {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .vault__chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-secondary);
            font-size: 0.88rem;
        }

        .vault__chip strong {
            color: var(--text-primary);
        }

        .vault__modebar-lock {
            margin: 0;
        }

        .vault__modebar-action,
        .vault__modebar-lock .vault__button {
            width: 46px;
            min-width: 46px;
            min-height: 44px;
            padding: 0;
            border-radius: 16px;
        }

        .vault__modebar-action svg,
        .vault__modebar-lock svg {
            width: 18px;
            height: 18px;
            stroke-width: 1.9;
        }

        .vault__modebar-action-label,
        .vault__modebar-lock-label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .vault__failure-stats {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 12px;
        }

        .vault__failure-stat {
            display: grid;
            gap: 4px;
            padding: 10px 12px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
        }

        .vault__failure-stat span {
            color: var(--text-tertiary);
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .vault__failure-stat strong {
            color: var(--text-primary);
            font-size: 0.96rem;
            line-height: 1;
        }

        .vault__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .vault__import-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-bottom: 14px;
        }

        .vault__button,
        .vault__button-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 0 16px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-primary);
            font-weight: 700;
            cursor: pointer;
            transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
        }

        .vault__button:hover,
        .vault__button-link:hover {
            transform: translateY(-1px);
            border-color: rgba(245, 36, 94, 0.40);
            background: rgba(255, 255, 255, 0.06);
        }

        .vault__button--brand,
        .vault__button-link--brand {
            border-color: transparent;
            background: var(--brand-gradient);
            box-shadow: 0 14px 30px rgba(245, 36, 94, 0.22);
        }

        .vault__button--ghost {
            background: rgba(255, 255, 255, 0.02);
        }

        .vault__button--icon {
            width: 46px;
            min-width: 46px;
            padding: 0;
            gap: 0;
        }

        .vault__button--icon svg {
            width: 18px;
            height: 18px;
            stroke-width: 1.9;
            flex: none;
        }

        .vault__grid {
            display: grid;
            gap: 16px;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        }

        .vault__grid--single {
            grid-template-columns: minmax(0, 1fr);
        }

        .vault__panel {
            padding: 22px;
        }

        .vault__panel--full {
            grid-column: 1 / -1;
        }

        .section-title {
            margin: 0 0 14px;
            font-size: 1.08rem;
            letter-spacing: -0.03em;
        }

        .vault__panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .vault__panel-head .section-title {
            margin: 0;
        }

        .vault-form {
            display: grid;
            gap: 12px;
        }

        .vault-form__grid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .vault-form__field {
            display: grid;
            gap: 7px;
        }

        .vault-form__field span {
            color: var(--text-secondary);
            font-size: 0.88rem;
        }

        .vault-form input,
        .vault-form textarea,
        .vault__search,
        .vault__filter {
            width: 100%;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-primary);
            padding: 13px 14px;
            outline: none;
        }

        .vault-form textarea {
            min-height: 118px;
            resize: vertical;
        }

        .vault-form input:focus,
        .vault-form textarea:focus,
        .vault__search:focus,
        .vault__filter:focus {
            border-color: rgba(245, 36, 94, 0.55);
            box-shadow: 0 0 0 4px rgba(245, 36, 94, 0.12);
        }

        .vault__section-head {
            display: flex;
            gap: 12px;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .vault__searchform {
            display: flex;
            gap: 10px;
            align-items: center;
            min-width: 0;
        }

        .vault__searchform .vault__search {
            min-height: 42px;
            padding-block: 10px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.035);
        }

        .vault__list-tools {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 88px 94px;
            align-items: center;
            gap: 8px;
            width: 100%;
            margin: 12px 0 16px;
        }

        .vault__filter-button {
            width: 100%;
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 0 10px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(8, 5, 14, 0.68);
            color: var(--text-primary);
            cursor: pointer;
            font-weight: 800;
            font-size: 0.82rem;
            transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
        }

        .vault__filter-button:hover,
        .vault__filter-button[data-active="true"] {
            transform: translateY(-1px);
            border-color: rgba(255, 122, 61, 0.52);
            background: rgba(245, 36, 94, 0.14);
        }

        .vault__filter-button svg {
            width: 13px;
            height: 13px;
            stroke-width: 2;
        }

        .field-with-action {
            display: flex;
            align-items: stretch;
            gap: 8px;
        }

        .field-with-action__input {
            flex: 1 1 auto;
        }

        .field-with-action__toggle,
        .entry-row__toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            min-width: 44px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            cursor: pointer;
        }

        .field-with-action__toggle svg,
        .entry-row__toggle svg {
            width: 18px;
            height: 18px;
        }

        .flash {
            margin-top: 0;
        }

        .entry-list {
            display: grid;
            gap: 5px;
            grid-template-columns: 1fr;
        }

        .entry-card {
            position: relative;
            grid-template-columns: minmax(0, 1fr) 38px;
            align-items: center;
            column-gap: 8px;
            row-gap: 4px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            padding: 0;
            display: grid;
            overflow: visible;
            transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
        }

        .entry-card[hidden] {
            display: none !important;
        }

        .entry-card:hover,
        .entry-card[data-open="true"],
        .entry-card:focus-within {
            border-color: rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.055);
        }

        .entry-card__top {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
            min-width: 0;
            min-height: 44px;
            padding: 4px 0 2px 10px;
            cursor: pointer;
        }

        .entry-card__title {
            margin: 0;
            font-size: 0.84rem;
            letter-spacing: -0.03em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .entry-card__meta {
            color: var(--text-secondary);
            font-size: 0.66rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .entry-card__rows {
            display: grid;
            gap: 6px;
        }

        .entry-row {
            display: grid;
            grid-template-columns: 78px minmax(0, 1fr) auto;
            gap: 6px;
            align-items: center;
            padding: 6px 8px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.025);
        }

        .entry-row__label {
            color: var(--text-tertiary);
            font-size: 0.74rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .entry-row__value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.86rem;
        }

        .entry-row__value--wrap {
            white-space: normal;
        }

        .entry-row__value--secret {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .entry-row__secret-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            letter-spacing: 0.14em;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

        .entry-row__copy {
            padding: 6px 9px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.78rem;
        }

        .entry-card__actions {
            display: flex;
            gap: 6px;
            flex-wrap: nowrap;
            justify-content: flex-end;
            grid-column: 2;
            grid-row: 1;
            padding-right: 8px;
        }

        .entry-card__menu-button {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.035);
            color: var(--text-primary);
            cursor: pointer;
            transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
        }

        .entry-card__menu-button:hover,
        .entry-card__menu-button[aria-expanded="true"] {
            transform: translateY(-1px);
            border-color: rgba(245, 36, 94, 0.38);
            background: rgba(245, 36, 94, 0.10);
        }

        .entry-card__menu {
            position: absolute;
            z-index: 12;
            top: 50%;
            right: 56px;
            display: flex;
            gap: 6px;
            padding: 6px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background:
                radial-gradient(circle at top right, rgba(255, 122, 61, 0.14), transparent 42%),
                rgba(16, 11, 21, 0.98);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
            transform: translateY(-50%);
        }

        .entry-card__menu[hidden] {
            display: none !important;
        }

        .entry-card__menu-item,
        .entry-card__menu .vault__button {
            width: 36px;
            min-width: 36px;
            min-height: 36px;
            justify-content: center;
            padding: 0;
            border-radius: 12px;
            font-size: 0.8rem;
        }

        .entry-card__menu form {
            margin: 0;
        }

        .entry-card__icon {
            width: 16px;
            height: 16px;
            stroke-width: 1.9;
            flex: none;
        }

        .entry-details {
            grid-column: 1 / -1;
            border-radius: 0;
            border: 0;
            background: transparent;
            padding: 0 10px 10px;
        }

        .entry-details + .entry-details {
            margin-top: 8px;
        }

        .entry-details summary {
            display: none;
            align-items: center;
            width: fit-content;
            min-height: 26px;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.025);
            cursor: pointer;
            color: var(--text-primary);
            font-weight: 700;
            font-size: 0.72rem;
            list-style: none;
        }

        .entry-details summary::-webkit-details-marker {
            display: none;
        }

        .entry-details__body {
            display: grid;
            gap: 6px;
            margin-top: 7px;
        }

        .entry-details__body .entry-row {
            background: rgba(255, 255, 255, 0.02);
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 3px 7px;
            font-size: 0.66rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-secondary);
            flex: none;
        }

        .tag--weak {
            border-color: rgba(255, 88, 104, 0.18);
            background: rgba(255, 88, 104, 0.08);
            color: rgba(255, 226, 231, 0.95);
        }

        .tag--good {
            border-color: rgba(70, 255, 145, 0.14);
            background: rgba(70, 255, 145, 0.07);
            color: rgba(224, 255, 233, 0.94);
        }

        .audit-list {
            display: grid;
            gap: 10px;
        }

        .audit-item {
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            padding: 12px 14px;
            display: grid;
            gap: 6px;
        }

        .audit-item strong {
            font-size: 0.95rem;
        }

        .audit-item small {
            color: var(--text-secondary);
        }

        .vault__empty {
            margin: 0;
            color: var(--text-secondary);
        }

        .vault__pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 16px;
        }

        .vault__pagination[hidden] {
            display: none !important;
        }

        .vault__page-label {
            min-width: 72px;
            color: var(--text-secondary);
            font-weight: 800;
            text-align: center;
        }

        .vault__split {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .vault__mini {
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            padding: 14px;
        }

        .vault__mini h3 {
            margin: 0 0 10px;
            font-size: 1rem;
        }

        .vault__mini p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.55;
        }

        .vault__lockbar {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }

        .vault__status {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .vault__lockform {
            display: none;
        }

        @media (max-width: 960px) {
            .vault__grid,
            .vault__split,
            .vault-form__grid {
                grid-template-columns: 1fr;
            }

            .vault__overview-grid {
                grid-template-columns: 1fr;
            }

            .vault__modebar {
                grid-template-columns: repeat(4, minmax(0, 1fr)) 44px 44px;
            }

            .vault__failure-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .entry-list {
                grid-template-columns: 1fr;
            }

            .vault__list-tools {
                grid-template-columns: minmax(0, 1fr) 76px 82px;
            }

            .entry-card {
                grid-template-columns: minmax(0, 1fr) 38px;
            }

            .entry-card__actions {
                grid-column: 2;
                grid-row: 1;
                justify-content: flex-end;
            }

            .entry-row {
                grid-template-columns: 1fr;
            }

            .entry-row__copy {
                width: 100%;
            }

            .entry-row__value--secret {
                justify-content: space-between;
            }
        }

        @media (max-width: 640px) {
            .vault {
                margin: 22px 0 8px;
            }

            .vault__panel {
                padding: 18px;
                border-radius: 28px;
            }

            .vault__hero {
                padding: 12px 14px;
                border-radius: 24px;
            }

            .vault__hero-brand {
                gap: 12px;
            }

            .vault__hero-main {
                gap: 10px;
            }

            .vault__hero-icon,
            .vault__hero-icon svg {
                width: 42px;
                height: 42px;
            }

            .vault__eyebrow {
                max-width: 56vw;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .vault__modebar {
                display: grid;
                grid-template-columns: repeat(4, minmax(58px, 1fr)) 42px 42px;
                gap: 8px;
                overflow-x: auto;
                padding-bottom: 2px;
                scrollbar-width: none;
            }

            .vault__modebar::-webkit-scrollbar {
                display: none;
            }

            .vault__mode-button {
                min-height: 40px;
                padding: 0 10px;
                font-size: 0.82rem;
                white-space: nowrap;
            }

            .vault__mode-button span {
                display: none;
            }

            .vault__mode-button svg {
                display: block;
            }

            .vault__modebar-action,
            .vault__modebar-lock .vault__button {
                width: 42px;
                min-width: 42px;
                min-height: 40px;
            }

            .vault__failure-stats {
                grid-template-columns: 1fr 1fr;
            }
        }
    </style>
{% endblock %}

{% block content %}
    {% set form = entryForm ?? {
        id: null,
        title: '',
        username: '',
        password: '',
        url: '',
        notes: ''
    } %}

    <section class="vault" data-vault-page data-lock-seconds="{{ lockSeconds }}">
        <article class="vault__hero">
            <div class="vault__hero-brand">
                <div class="vault__hero-main">
                    <span class="vault__hero-icon" aria-hidden="true">
                        <svg viewBox="0 0 64 64" fill="none" role="img">
                            <defs>
                                <linearGradient id="passwordManagerAccent" x1="10" y1="12" x2="54" y2="52" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#F5245E"/>
                                    <stop offset="1" stop-color="#FF7A3D"/>
                                </linearGradient>
                            </defs>
                            <rect x="7" y="7" width="50" height="50" rx="17" fill="url(#passwordManagerAccent)"/>
                            <path d="M22 29v-5.5C22 17.7 26.5 13 32 13s10 4.7 10 10.5V29" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/>
                            <rect x="17" y="27" width="30" height="24" rx="8" fill="#FFFFFF"/>
                            <path d="M32 35.5v7M28.5 39h7" stroke="#241B2E" stroke-width="3.5" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <span class="vault__eyebrow">Password Manager</span>
                </div>
                <button class="vault__info-button" type="button" data-vault-info-toggle aria-expanded="false" aria-controls="password-manager-info" aria-label="Afficher les informations">i</button>
            </div>
            <p class="vault__lead" id="password-manager-info" data-vault-info-panel hidden>
                Stocke, chiffre et retrouve tes identifiants dans un coffre maître.
            </p>
        </article>

        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="flash flash--{{ label }}">{{ message }}</div>
            {% endfor %}
        {% endfor %}

        {% if setupMode %}
            <div class="vault__grid">
                <section class="vault__panel">
                    <h2 class="section-title">Initialiser le coffre</h2>
                    <form method="post" action="{{ path('app_password_manager_setup') }}" class="vault-form">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('password_vault_setup') }}">
                        <div class="vault-form__grid">
                            <label class="vault-form__field">
                                <span>Mot de passe maître</span>
                                <input type="password" name="master_password" minlength="8" autocomplete="new-password" required>
                            </label>
                            <label class="vault-form__field">
                                <span>Confirmation</span>
                                <input type="password" name="master_password_confirmation" minlength="8" autocomplete="new-password" required>
                            </label>
                        </div>
                        <button class="vault__button vault__button--brand" type="submit">Créer et déverrouiller le coffre</button>
                    </form>
                </section>

                <aside class="vault__panel">
                    <h2 class="section-title">Ce que le coffre protège</h2>
                    <div class="vault__split">
                        <div class="vault__mini">
                            <h3>Chiffrement fort</h3>
                            <p>Tous les champs sensibles sont chiffrés avant écriture en base avec une clé dérivée du mot de passe maître.</p>
                        </div>
                        <div class="vault__mini">
                            <h3>Verrouillage automatique</h3>
                            <p>Le coffre se verrouille après trois minutes d’inactivité pour limiter l’exposition des secrets.</p>
                        </div>
                        <div class="vault__mini">
                            <h3>Import / export</h3>
                            <p>Tu peux injecter une liste complète ou l’exporter en JSON, avec mise à jour des entrées déjà présentes.</p>
                        </div>
                        <div class="vault__mini">
                            <h3>Audit sécurité</h3>
                            <p>Les mots de passe faibles ou réutilisés sont mis en évidence pour corriger rapidement les points critiques.</p>
                        </div>
                    </div>
                </aside>
            </div>
        {% elseif not isUnlocked %}
            <div class="vault__grid vault__grid--single">
                <section class="vault__panel">
                    <div class="vault__panel-head">
                        <h2 class="section-title">Déverrouiller le coffre</h2>
                        <a class="vault__button vault__button-link--brand" href="{{ generatorUrl }}">Password Générateur</a>
                    </div>
                    <form method="post" action="{{ path('app_password_manager_unlock') }}" class="vault-form">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('password_vault_unlock') }}">
                        <label class="vault-form__field">
                            <span>Mot de passe maître</span>
                            <input type="password" name="master_password" autocomplete="current-password" required>
                        </label>
                        <button class="vault__button vault__button--brand" type="submit">Déverrouiller</button>
                    </form>
                </section>
            </div>
        {% else %}
            <div class="vault__modebar" role="tablist" aria-label="Navigation Password Manager">
                <button class="vault__mode-button" type="button" data-vault-mode="add" data-active="true" aria-label="Ajouter" title="Ajouter">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-linecap="round"></path>
                    </svg>
                    <span>Ajouter</span>
                </button>
                <button class="vault__mode-button" type="button" data-vault-mode="list" data-active="false" aria-label="Liste" title="Liste">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M8 6h12M8 12h12M8 18h12" stroke="currentColor" stroke-linecap="round"></path>
                        <path d="M4 6h.01M4 12h.01M4 18h.01" stroke="currentColor" stroke-linecap="round"></path>
                    </svg>
                    <span>Liste</span>
                </button>
                <button class="vault__mode-button" type="button" data-vault-mode="failures" data-active="false" aria-label="Failles" title="Failles">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M12 3 3.8 18a2 2 0 0 0 1.75 3h12.9a2 2 0 0 0 1.75-3L12 3Z" stroke="currentColor" stroke-linejoin="round"></path>
                        <path d="M12 9v5M12 17h.01" stroke="currentColor" stroke-linecap="round"></path>
                    </svg>
                    <span>Failles</span>
                </button>
                <button class="vault__mode-button" type="button" data-vault-mode="import" data-active="false" aria-label="Import / export" title="Import / export">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M12 3v12M8 7l4-4 4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M20 15v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-3" stroke="currentColor" stroke-linecap="round"></path>
                    </svg>
                    <span>Import / export</span>
                </button>
                <a class="vault__button vault__button-link--brand vault__modebar-action" href="{{ generatorUrl }}" aria-label="Password Générateur" title="Password Générateur">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M13 2 4 14h7l-1 8 10-13h-7l1-7Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="vault__modebar-action-label">Password Générateur</span>
                </a>
                <form class="vault__modebar-lock" method="post" action="{{ path('app_password_manager_lock') }}">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('password_vault_lock') }}">
                    <button class="vault__button vault__button--brand" type="submit" aria-label="Verrouiller" title="Verrouiller">
                        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M7 10V7a5 5 0 0 1 10 0v3" stroke="currentColor" stroke-linecap="round"></path>
                            <rect x="5" y="10" width="14" height="10" rx="3" stroke="currentColor"></rect>
                            <path d="M12 14v2" stroke="currentColor" stroke-linecap="round"></path>
                        </svg>
                        <span class="vault__modebar-lock-label">Verrouiller</span>
                    </button>
                </form>
            </div>

            <div class="vault__grid">
                <section class="vault__panel vault__module-section" data-vault-section="add">
                    <form method="post" action="{{ path('app_password_manager_entry_save') }}" class="vault-form">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('password_vault_entry') }}">
                        {% if form.id %}
                            <input type="hidden" name="entry_id" value="{{ form.id }}">
                        {% endif %}
                        <div class="vault-form__grid">
                            <label class="vault-form__field">
                                <span>Titre</span>
                                <input type="text" name="title" value="{{ form.title }}" required>
                            </label>
                            <label class="vault-form__field">
                                <span>Identifiant</span>
                                <input type="text" name="username" value="{{ form.username }}" autocomplete="off">
                            </label>
                            <label class="vault-form__field">
                                <span>Mot de passe</span>
                                <div class="field-with-action">
                                    <input class="field-with-action__input" id="vault-entry-password" type="password" name="password" value="{{ form.password }}" required autocomplete="new-password">
                                    <button
                                        type="button"
                                        class="field-with-action__toggle"
                                        data-password-toggle
                                        data-password-target="vault-entry-password"
                                        aria-label="Afficher le mot de passe"
                                        aria-pressed="false"
                                    >
                                        <svg data-password-icon="show" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                            <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                            <circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="1.8"/>
                                        </svg>
                                        <svg data-password-icon="hide" viewBox="0 0 24 24" fill="none" aria-hidden="true" hidden>
                                            <path d="M3 3l18 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                                            <path d="M10.6 10.6a3 3 0 0 0 4.24 4.24" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                                            <path d="M6.2 6.2C4 7.7 2.6 10 2 12c1.3 4.2 5 7 10 7 1.9 0 3.7-.4 5.2-1.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M9.4 4.3A10.7 10.7 0 0 1 12 4c6.4 0 10 8 10 8a19.2 19.2 0 0 1-3 4.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                                        </svg>
                                    </button>
                                </div>
                            </label>
                            <label class="vault-form__field">
                                <span>URL</span>
                                <input type="text" name="url" value="{{ form.url }}" placeholder="ex: example.com ou https://example.com" autocomplete="off">
                            </label>
                        </div>
                        <label class="vault-form__field">
                            <span>Notes sécurisées</span>
                            <textarea name="notes">{{ form.notes }}</textarea>
                        </label>
                        <div class="vault__actions">
                            <button class="vault__button vault__button--brand" type="submit">{{ form.id ? 'Mettre à jour' : 'Ajouter' }}</button>
                            {% if form.id %}
                                <a class="vault__button vault__button-link" href="{{ path('app_password_manager') }}">Annuler</a>
                            {% endif %}
                        </div>
                    </form>
                </section>

                <aside class="vault__panel vault__module-section" data-vault-section="import" hidden>
                    <div class="vault__import-actions">
                        <a class="vault__button vault__button-link--brand" href="{{ exportUrl }}">Exporter le coffre</a>
                    </div>
                    <form method="post" action="{{ path('app_password_manager_import') }}" enctype="multipart/form-data" class="vault-form">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('password_vault_import') }}">
                        <label class="vault-form__field">
                            <span>Fichier JSON</span>
                            <input type="file" name="import_file" accept=".json,application/json">
                        </label>
                        <label class="vault-form__field">
                            <span>Ou coller le JSON</span>
                            <textarea name="import_json" placeholder='[{"title":"...","username":"...","password":"..."}]'></textarea>
                        </label>
                        <label class="vault__chip" style="justify-content: flex-start;">
                            <input type="checkbox" name="upsert_existing" value="1" checked>
                            Mettre à jour si l’entrée existe déjà
                        </label>
                        <button class="vault__button vault__button--brand" type="submit">Importer</button>
                    </form>
                </aside>

                <section class="vault__panel vault__module-section" data-vault-section="failures" hidden>
                    <div class="vault__section-head">
                        <h2 class="section-title">Failles détectées</h2>
                    </div>
                    <div class="vault__failure-stats" aria-label="Résumé sécurité du coffre">
                        <div class="vault__failure-stat">
                            <span>Entrées</span>
                            <strong>{{ audit.summary.total }}</strong>
                        </div>
                        <div class="vault__failure-stat">
                            <span>Faibles</span>
                            <strong>{{ audit.summary.weak }}</strong>
                        </div>
                        <div class="vault__failure-stat">
                            <span>Réutilisées</span>
                            <strong>{{ audit.summary.reused }}</strong>
                        </div>
                        <div class="vault__failure-stat">
                            <span>Verrouillage auto</span>
                            <strong>3 min</strong>
                        </div>
                    </div>
                    <div class="vault__overview-grid">
                        <div class="vault__overview-card">
                            <div class="vault__overview-card-head">
                                <strong>Faibles détectés</strong>
                                <button type="button" class="audit-panel__button" data-audit-toggle>Voir</button>
                            </div>
                            <div class="audit-panel__content" hidden>
                                <p>{{ audit.summary.weak }} entrée(s) à corriger.</p>
                                {% if audit.weak is not empty %}
                                    <p>{{ audit.weak|map(item => item.title)|join(', ') }}</p>
                                {% endif %}
                            </div>
                        </div>
                        <div class="vault__overview-card">
                            <div class="vault__overview-card-head">
                                <strong>Réutilisations</strong>
                                <button type="button" class="audit-panel__button" data-audit-toggle>Voir</button>
                            </div>
                            <div class="audit-panel__content" hidden>
                                <p>{{ audit.summary.reused }} entrée(s) partagent déjà un mot de passe identique.</p>
                                {% if audit.reused is not empty %}
                                    <p>{{ audit.reused|map(item => item.title)|join(', ') }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </section>

                <section class="vault__panel vault__panel--full vault__module-section" data-vault-section="list" hidden>
                    <div class="vault__list-tools">
                        <form method="get" action="{{ path('app_password_manager') }}" class="vault__searchform" data-search-form>
                            <input class="vault__search" type="search" name="q" value="{{ query }}" placeholder="Rechercher un identifiant, un site, une note..." autocomplete="off" data-search-input data-entry-search>
                        </form>
                        <button class="vault__filter-button" type="button" data-entry-title-sort data-direction="az" data-active="true" aria-label="Tri alphabétique A-Z">
                            <span data-entry-title-sort-label>A-Z</span>
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="m8 10 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </button>
                        <button class="vault__filter-button" type="button" data-entry-date-sort data-direction="" data-active="false" aria-label="Trier par mise à jour">
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M5 5h14v14H5zM8 3v4M16 3v4M5 9h14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <span data-entry-date-sort-label>Date</span>
                        </button>
                    </div>
                    <p class="vault__empty" data-entry-empty {% if entries is not empty %}hidden{% endif %}>Aucune entrée ne correspond à ta recherche.</p>
                    <div class="entry-list" data-entry-list>
                        {% for entry in entries %}
                                <article
                                    class="entry-card"
                                    data-entry-card
                                    data-entry-strength="{{ entry.strength.weak ? 'weak' : 'good' }}"
                                    data-entry-url="{{ entry.url ? 'true' : 'false' }}"
                                    data-entry-notes="{{ entry.notes ? 'true' : 'false' }}"
                                    data-entry-title="{{ entry.title|lower|e('html_attr') }}"
                                    data-entry-updated="{{ entry.updatedAt|date('U') }}"
                                    data-entry-search="{{ (entry.title ~ ' ' ~ entry.username ~ ' ' ~ entry.url ~ ' ' ~ entry.notes)|lower|e('html_attr') }}"
                                >
                                    <div class="entry-card__top" role="button" tabindex="0" data-entry-summary aria-expanded="false">
                                        <div>
                                            <h3 class="entry-card__title">{{ entry.title }}</h3>
                                            <div class="entry-card__meta">
                                                Mise à jour le {{ entry.updatedAt|date('d/m/Y à H:i') }}
                                            </div>
                                        </div>
                                        <span class="tag {{ entry.strength.weak ? 'tag--weak' : 'tag--good' }}">
                                            {{ entry.strength.label }}
                                        </span>
                                    </div>

                                    <details class="entry-details">
                                        <summary>Afficher les détails</summary>
                                        <div class="entry-details__body">
                                            <div class="entry-row">
                                                <div class="entry-row__label">Identifiant</div>
                                                <div class="entry-row__value">{{ entry.username ?: '—' }}</div>
                                                <button type="button" class="entry-row__copy" data-copy-value="{{ entry.username|e('html_attr') }}">Copier</button>
                                            </div>
                                            <div class="entry-row">
                                                <div class="entry-row__label">Mot de passe</div>
                                                <div class="entry-row__value entry-row__value--secret" data-secret-value="{{ entry.password|e('html_attr') }}" data-secret-visible="false">
                                                    <span class="entry-row__secret-text" data-secret-label>••••••••</span>
                                                    <button type="button" class="entry-row__toggle" data-secret-toggle aria-label="Afficher le mot de passe" aria-pressed="false">
                                                        <svg data-password-icon="show" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                                            <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                                            <circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="1.8"/>
                                                        </svg>
                                                        <svg data-password-icon="hide" viewBox="0 0 24 24" fill="none" aria-hidden="true" hidden>
                                                            <path d="M3 3l18 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                                                            <path d="M10.6 10.6a3 3 0 0 0 4.24 4.24" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                                                            <path d="M6.2 6.2C4 7.7 2.6 10 2 12c1.3 4.2 5 7 10 7 1.9 0 3.7-.4 5.2-1.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                                            <path d="M9.4 4.3A10.7 10.7 0 0 1 12 4c6.4 0 10 8 10 8a19.2 19.2 0 0 1-3 4.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                                                        </svg>
                                                    </button>
                                                </div>
                                                <button type="button" class="entry-row__copy" data-copy-value="{{ entry.password|e('html_attr') }}">Copier</button>
                                            </div>
                                            <div class="entry-row">
                                                <div class="entry-row__label">URL</div>
                                                <div class="entry-row__value">{{ entry.url ?: '—' }}</div>
                                                <button type="button" class="entry-row__copy" data-copy-value="{{ entry.url|e('html_attr') }}">Copier</button>
                                            </div>
                                            <div class="entry-row">
                                                <div class="entry-row__label">Notes</div>
                                                <div class="entry-row__value entry-row__value--wrap">{{ entry.notes ?: '—' }}</div>
                                                <button type="button" class="entry-row__copy" data-copy-value="{{ entry.notes|e('html_attr') }}">Copier</button>
                                            </div>
                                        </div>
                                    </details>

                                    <div class="entry-card__actions">
                                        <button class="entry-card__menu-button" type="button" data-entry-menu-toggle aria-expanded="false" aria-label="Ouvrir les actions de {{ entry.title|e('html_attr') }}">
                                            <svg class="entry-card__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                                <path d="M5 7h14M5 12h14M5 17h14" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"></path>
                                            </svg>
                                        </button>
                                        <div class="entry-card__menu" data-entry-menu hidden>
                                            <button class="vault__button vault__button--ghost entry-card__menu-item" type="button" data-entry-details-toggle aria-label="Voir les détails" title="Voir">
                                                <svg class="entry-card__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                                    <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    <circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="1.8"></circle>
                                                </svg>
                                            </button>
                                            <a class="vault__button vault__button-link entry-card__menu-item" href="{{ path('app_password_manager', { edit: entry.id }) }}" aria-label="Modifier" title="Modifier">
                                                <svg class="entry-card__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                                    <path d="M12.5 4.5h-5A2.5 2.5 0 0 0 5 7v10A2.5 2.5 0 0 0 7.5 19.5h9A2.5 2.5 0 0 0 19 17v-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    <path d="M18.25 3.75a1.8 1.8 0 0 1 2.55 2.55l-8.8 8.8-3.3.75.75-3.3 8.8-8.8Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                                                </svg>
                                            </a>
                                            <form method="post" action="{{ path('app_password_manager_entry_delete', { id: entry.id }) }}">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('password_vault_delete_' ~ entry.id) }}">
                                                <button class="vault__button vault__button--ghost entry-card__menu-item" type="submit" aria-label="Supprimer" title="Supprimer" onclick="return confirm('Supprimer cette entrée ?');">
                                                    <svg class="entry-card__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                                        <path d="M4 7h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path>
                                                        <path d="M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path>
                                                        <path d="M7 7l1 13h8l1-13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M10 11v5M14 11v5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path>
                                                    </svg>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </article>
                        {% endfor %}
                    </div>
                    <div class="vault__pagination" data-entry-pagination hidden>
                        <button class="vault__button vault__button--ghost" type="button" data-entry-page-prev>Précédent</button>
                        <span class="vault__page-label" data-entry-page-label>1 / 1</span>
                        <button class="vault__button vault__button--ghost" type="button" data-entry-page-next>Suivant</button>
                    </div>
                </section>

            </div>
        {% endif %}
    </section>

    <script>
        (function () {
            const infoToggle = document.querySelector('[data-vault-info-toggle]');
            const infoPanel = document.querySelector('[data-vault-info-panel]');

            if (!infoToggle || !infoPanel) {
                return;
            }

            infoToggle.addEventListener('click', () => {
                const open = infoPanel.hidden;
                infoPanel.hidden = !open;
                infoToggle.dataset.open = open ? 'true' : 'false';
                infoToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
            });
        })();
    </script>

    {% if isUnlocked %}
        <form method="post" action="{{ path('app_password_manager_lock') }}" class="vault__lockform" data-auto-lock-form>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('password_vault_lock') }}">
        </form>
        <script>
            (function () {
                const root = document.querySelector('[data-vault-page]');
                const form = document.querySelector('[data-auto-lock-form]');
                const searchForm = document.querySelector('[data-search-form]');
                const searchInput = document.querySelector('[data-search-input]');
                const modeButtons = Array.from(document.querySelectorAll('[data-vault-mode]'));
                const moduleSections = Array.from(document.querySelectorAll('[data-vault-section]'));
                const entryCards = Array.from(document.querySelectorAll('[data-entry-card]'));
                const entryList = document.querySelector('[data-entry-list]');
                const entrySearch = document.querySelector('[data-entry-search]');
                const entryTitleSort = document.querySelector('[data-entry-title-sort]');
                const entryTitleSortLabel = document.querySelector('[data-entry-title-sort-label]');
                const entryDateSort = document.querySelector('[data-entry-date-sort]');
                const entryDateSortLabel = document.querySelector('[data-entry-date-sort-label]');
                const entryEmpty = document.querySelector('[data-entry-empty]');
                const entryPagination = document.querySelector('[data-entry-pagination]');
                const entryPageLabel = document.querySelector('[data-entry-page-label]');
                const entryPagePrev = document.querySelector('[data-entry-page-prev]');
                const entryPageNext = document.querySelector('[data-entry-page-next]');
                if (!root || !form) {
                    return;
                }

                const lockSeconds = Number(root.getAttribute('data-lock-seconds') || '180') * 1000;
                const entryPageSize = 5;
                let timer = null;
                let entryPage = 1;

                const setToggleState = (button, visible) => {
                    const showIcon = button.querySelector('[data-password-icon="show"]');
                    const hideIcon = button.querySelector('[data-password-icon="hide"]');

                    if (showIcon) {
                        showIcon.hidden = visible;
                    }

                    if (hideIcon) {
                        hideIcon.hidden = !visible;
                    }

                    button.setAttribute('aria-pressed', visible ? 'true' : 'false');
                    button.setAttribute('aria-label', visible ? 'Masquer le mot de passe' : 'Afficher le mot de passe');
                };

                const schedule = () => {
                    clearTimeout(timer);
                    timer = window.setTimeout(() => form.submit(), lockSeconds);
                };

                const setVaultMode = (mode) => {
                    modeButtons.forEach((button) => {
                        button.dataset.active = button.dataset.vaultMode === mode ? 'true' : 'false';
                    });

                    moduleSections.forEach((section) => {
                        section.hidden = section.dataset.vaultSection !== mode;
                    });

                    schedule();
                };

                ['mousemove', 'keydown', 'click', 'scroll', 'touchstart'].forEach((eventName) => {
                    window.addEventListener(eventName, schedule, { passive: true });
                });

                schedule();

                modeButtons.forEach((button) => {
                    button.addEventListener('click', () => {
                        setVaultMode(button.dataset.vaultMode);
                    });
                });

                setVaultMode(searchInput && searchInput.value.trim() ? 'list' : 'add');

                const getFilteredEntries = () => {
                    const query = (entrySearch ? entrySearch.value : '').trim().toLowerCase();
                    const titleSort = entryTitleSort ? entryTitleSort.dataset.direction : 'az';
                    const dateSort = entryDateSort ? entryDateSort.dataset.direction : '';

                    return entryCards.filter((card) => {
                        const matchesQuery = !query || (card.dataset.entrySearch || '').includes(query);

                        return matchesQuery;
                    }).sort((first, second) => {
                        const titleCompare = (first.dataset.entryTitle || '').localeCompare(second.dataset.entryTitle || '', 'fr', { sensitivity: 'base' });
                        const titleResult = 'az' === titleSort ? titleCompare : -titleCompare;

                        if (!dateSort) {
                            return titleResult;
                        }

                        const firstDate = Number(first.dataset.entryUpdated || '0');
                        const secondDate = Number(second.dataset.entryUpdated || '0');
                        const dateCompare = 'recent' === dateSort ? secondDate - firstDate : firstDate - secondDate;

                        return dateCompare || titleResult;
                    });
                };

                const renderEntries = () => {
                    const filteredEntries = getFilteredEntries();
                    const totalPages = Math.max(1, Math.ceil(filteredEntries.length / entryPageSize));
                    entryPage = Math.min(entryPage, totalPages);

                    entryCards.forEach((card) => {
                        card.hidden = true;
                    });

                    filteredEntries
                        .slice((entryPage - 1) * entryPageSize, entryPage * entryPageSize)
                        .forEach((card) => {
                            if (entryList) {
                                entryList.appendChild(card);
                            }
                            card.hidden = false;
                        });

                    if (entryEmpty) {
                        entryEmpty.hidden = filteredEntries.length > 0;
                    }

                    if (entryPagination && entryPageLabel && entryPagePrev && entryPageNext) {
                        entryPagination.hidden = filteredEntries.length <= entryPageSize;
                        entryPageLabel.textContent = `${entryPage} / ${totalPages}`;
                        entryPagePrev.disabled = entryPage <= 1;
                        entryPageNext.disabled = entryPage >= totalPages;
                    }
                };

                if (searchForm) {
                    searchForm.addEventListener('submit', (event) => {
                        event.preventDefault();
                    });
                }

                if (entryTitleSort) {
                    entryTitleSort.addEventListener('click', () => {
                        const nextDirection = entryTitleSort.dataset.direction === 'az' ? 'za' : 'az';
                        entryTitleSort.dataset.direction = nextDirection;
                        entryTitleSort.dataset.active = 'true';
                        entryTitleSort.setAttribute('aria-label', nextDirection === 'az' ? 'Tri alphabétique A-Z' : 'Tri alphabétique Z-A');
                        if (entryTitleSortLabel) {
                            entryTitleSortLabel.textContent = nextDirection === 'az' ? 'A-Z' : 'Z-A';
                        }

                        if (entryDateSort) {
                            entryDateSort.dataset.direction = '';
                            entryDateSort.dataset.active = 'false';
                        }

                        if (entryDateSortLabel) {
                            entryDateSortLabel.textContent = 'Date';
                        }

                        entryPage = 1;
                        renderEntries();
                        schedule();
                    });
                }

                if (entryDateSort) {
                    entryDateSort.addEventListener('click', () => {
                        const nextDirection = entryDateSort.dataset.direction === 'recent' ? 'old' : 'recent';
                        entryDateSort.dataset.direction = nextDirection;
                        entryDateSort.dataset.active = 'true';
                        entryDateSort.setAttribute('aria-label', nextDirection === 'recent' ? 'Mises à jour les plus récentes' : 'Mises à jour les plus anciennes');
                        if (entryDateSortLabel) {
                            entryDateSortLabel.textContent = nextDirection === 'recent' ? 'Récent' : 'Ancien';
                        }

                        if (entryTitleSort) {
                            entryTitleSort.dataset.active = 'false';
                        }

                        entryPage = 1;
                        renderEntries();
                        schedule();
                    });
                }

                [entrySearch].forEach((control) => {
                    if (!control) {
                        return;
                    }

                    control.addEventListener('input', () => {
                        entryPage = 1;
                        renderEntries();
                        schedule();
                    });

                    control.addEventListener('change', () => {
                        entryPage = 1;
                        renderEntries();
                        schedule();
                    });
                });

                if (entryPagePrev) {
                    entryPagePrev.addEventListener('click', () => {
                        entryPage = Math.max(1, entryPage - 1);
                        renderEntries();
                        schedule();
                    });
                }

                if (entryPageNext) {
                    entryPageNext.addEventListener('click', () => {
                        entryPage += 1;
                        renderEntries();
                        schedule();
                    });
                }

                renderEntries();

                const closeEntryMenus = (except = null) => {
                    document.querySelectorAll('[data-entry-menu]').forEach((menu) => {
                        if (except && menu === except) {
                            return;
                        }

                        menu.hidden = true;
                    });

                    document.querySelectorAll('[data-entry-menu-toggle]').forEach((button) => {
                        const card = button.closest('[data-entry-card]');
                        const menu = card ? card.querySelector('[data-entry-menu]') : null;
                        button.setAttribute('aria-expanded', menu && !menu.hidden ? 'true' : 'false');
                    });
                };

                document.querySelectorAll('[data-entry-menu-toggle]').forEach((button) => {
                    button.addEventListener('click', (event) => {
                        event.stopPropagation();
                        const card = button.closest('[data-entry-card]');
                        const menu = card ? card.querySelector('[data-entry-menu]') : null;
                        if (!menu) {
                            return;
                        }

                        const shouldOpen = menu.hidden;
                        closeEntryMenus(menu);
                        menu.hidden = !shouldOpen;
                        button.setAttribute('aria-expanded', shouldOpen ? 'true' : 'false');
                        schedule();
                    });
                });

                document.querySelectorAll('[data-entry-details-toggle]').forEach((button) => {
                    button.addEventListener('click', () => {
                        const card = button.closest('[data-entry-card]');
                        const details = card ? card.querySelector('.entry-details') : null;
                        if (!details) {
                            return;
                        }

                        details.open = !details.open;
                        card.dataset.open = details.open ? 'true' : 'false';
                        const summary = card.querySelector('[data-entry-summary]');
                        if (summary) {
                            summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
                        }
                        button.setAttribute('aria-label', details.open ? 'Masquer les détails' : 'Voir les détails');
                        button.setAttribute('title', details.open ? 'Masquer' : 'Voir');
                        closeEntryMenus();
                        schedule();
                    });
                });

                document.querySelectorAll('[data-entry-summary]').forEach((summary) => {
                    const toggleDetails = () => {
                        const card = summary.closest('[data-entry-card]');
                        const details = card ? card.querySelector('.entry-details') : null;
                        if (!details) {
                            return;
                        }

                        details.open = !details.open;
                        card.dataset.open = details.open ? 'true' : 'false';
                        summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
                        closeEntryMenus();
                        schedule();
                    };

                    summary.addEventListener('click', toggleDetails);
                    summary.addEventListener('keydown', (event) => {
                        if (event.key !== 'Enter' && event.key !== ' ') {
                            return;
                        }

                        event.preventDefault();
                        toggleDetails();
                    });
                });

                document.addEventListener('click', () => closeEntryMenus());

                document.querySelectorAll('[data-copy-value]').forEach((button) => {
                    button.addEventListener('click', async () => {
                        const value = button.getAttribute('data-copy-value') || '';
                        if (!value) {
                            return;
                        }

                        try {
                            await navigator.clipboard.writeText(value);
                            button.textContent = 'Copié';
                            window.setTimeout(() => {
                                button.textContent = 'Copier';
                            }, 1200);
                            schedule();
                        } catch (error) {
                            console.error(error);
                        }
                    });
                });

                document.querySelectorAll('[data-password-toggle]').forEach((button) => {
                    const targetId = button.getAttribute('data-password-target');
                    const input = targetId ? document.getElementById(targetId) : null;
                    if (!input) {
                        return;
                    }

                    setToggleState(button, false);

                    button.addEventListener('click', () => {
                        const shouldShow = 'password' === input.type;
                        input.type = shouldShow ? 'text' : 'password';
                        setToggleState(button, shouldShow);
                    });
                });

                document.querySelectorAll('[data-secret-toggle]').forEach((button) => {
                    const row = button.closest('[data-secret-value]');
                    const label = row ? row.querySelector('[data-secret-label]') : null;
                    if (!row || !label) {
                        return;
                    }

                    const secret = row.getAttribute('data-secret-value') || '';
                    const masked = '••••••••';

                    const sync = (visible) => {
                        row.setAttribute('data-secret-visible', visible ? 'true' : 'false');
                        label.textContent = visible ? secret : masked;
                        setToggleState(button, visible);
                    };

                    sync(false);

                    button.addEventListener('click', () => {
                        const visible = row.getAttribute('data-secret-visible') !== 'true';
                        sync(visible);
                    });
                });

                document.querySelectorAll('[data-audit-toggle]').forEach((button) => {
                    button.addEventListener('click', () => {
                        const card = button.closest('.vault__overview-card');
                        const content = card ? card.querySelector('.audit-panel__content') : null;
                        if (!content) {
                            return;
                        }

                        const isHidden = content.hasAttribute('hidden');
                        if (isHidden) {
                            content.removeAttribute('hidden');
                            button.textContent = 'Masquer';
                        } else {
                            content.setAttribute('hidden', '');
                            button.textContent = 'Voir';
                        }
                    });
                });
            })();
        </script>
    {% endif %}
{% endblock %}