{% extends admin_base_template %}
{% block head_css %}
    {{ super() }}
    <link rel="icon" type="image/png" href="{{ config['BASE_PREFIX'] }}static/favicon.png">
    {# Vendored, never a CDN: syncer installations run offline. #}
    <script src="{{ config['BASE_PREFIX'] }}static/js/Sortable.min.js"></script>
    {% include '_theme.html' %}
    <link rel="stylesheet" href="{{ config['BASE_PREFIX'] }}static/css/cmdbsyncer.css">
    <style>
       /* Admin-only navbar extensions: dropdown menus, the
          "pending changes" badge animation, and the responsive
          right-side menu width clamp. The shared brand / navbar /
          base utility CSS lives in ``static/css/cmdbsyncer.css``. */
       .navbar .dropdown-menu {
           border: 1px solid rgba(0, 0, 0, 0.06);
           border-radius: 10px;
           box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
           padding: 0.4rem 0.35rem;
           margin-top: 0.35rem;
       }
       .navbar .dropdown-item {
           padding: 0.45rem 0.8rem;
           border-radius: 6px;
       }
       .navbar .dropdown-item:hover,
       .navbar .dropdown-item:focus {
           background-color: #eef2f6;
           color: #2c3e50;
       }
       .navbar .dropdown-divider {
           margin: 0.35rem 0.25rem;
       }
       /* Group separators in the top bar (NavDivider). Flask-Admin has
          no divider for a horizontal menu, so the entry is an empty
          nav-link turned into a thin rule here. */
       .navbar .nav-link.nav-divider {
           position: relative;
           display: inline-block;
           width: 1px;
           height: 100%;
           /* cmdbsyncer.css sets the nav-link padding with !important,
              so the rule has to be beaten on its own terms. */
           padding: 0 !important;
           margin: 0 0.7rem;
           background: none;
           pointer-events: none;
       }
       /* The link only spans the menu row; the rule itself runs the full
          height of the bar. The bar centres its children, so a rule as
          tall as the bar and centred on the row lands exactly on its
          edges — both values come from cmdbsyncer.css, so changing the
          bar's height moves the rule with it. It fades out towards those
          edges: a hairline running solid through the empty zones above
          and below the entries reads like a table border. */
       .navbar .nav-link.nav-divider::before {
           content: "";
           position: absolute;
           left: 0;
           width: 1px;
           top: 50%;
           height: calc(var(--nav-row-height) + 2 * var(--nav-pad-y));
           transform: translateY(-50%);
           background: linear-gradient(to bottom,
               transparent 0%, currentColor 30%,
               currentColor 70%, transparent 100%);
           opacity: 0.45;
       }
       /* Collapsed navbar: the entries stack, so the rule has to lie
          down with them. */
       @media (max-width: 991.98px) {
           .navbar .nav-link.nav-divider {
               display: block;
               width: auto;
               height: 1px;
               margin: 0.45rem 0.8rem;
           }
           .navbar .nav-link.nav-divider::before {
               top: 0;
               left: 0;
               right: 0;
               width: auto;
               height: 1px;
               transform: none;
               background: linear-gradient(to right,
                   transparent 0%, currentColor 10%,
                   currentColor 90%, transparent 100%);
           }
       }

       /* Module marks (menu_icon_type='image'): size them like the
          Font Awesome glyphs of the neighbouring entries and give them
          the same gap, otherwise the img renders at its natural size. */
       .navbar .dropdown-item > img,
       .navbar .dropdown-toggle > img,
       .navbar .nav-link > img {
           width: 16px;
           height: 16px;
           margin-right: 0.2rem;
           vertical-align: -3px;
       }

       /* Commit button with the pending-changes count inside it. */
       #commit-button {
           display: flex;
           align-items: center;
       }
       #commit-button .btn {
           display: inline-flex;
           align-items: center;
           gap: 0.4rem;
           white-space: nowrap;
       }
       #commit-button .commit-count {
           font-size: 0.82rem;
           font-weight: 700;
           padding: 0.15rem 0.55rem;
           border-radius: 50px;
           background: #ffc107;
           color: #1a1a1a;
           max-width: 60px;
           overflow: hidden;
           text-overflow: ellipsis;
           box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
           animation: cmdb-nav-pulse 2.2s infinite;
       }
       @keyframes cmdb-nav-pulse {
           0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6); }
           70%  { box-shadow: 0 0 0 8px rgba(255, 193, 7, 0); }
           100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
       }

       .navbar-nav.navbar-right {
           margin-right: 15px !important;
           max-width: calc(100vw - 300px);
           /* No overflow:hidden here — it clipped the profile dropdown
              (the ul is only as tall as the navbar). The width clamp is
              kept; the badges inside carry their own ellipsis rules. */
       }

       @media (max-width: 576px) {
           .navbar-nav.navbar-right {
               margin-right: 5px !important;
               max-width: calc(100vw - 200px);
           }
           #commit-button .commit-count {
               font-size: 0.7rem;
               max-width: 50px;
           }
       }

      h3 {
          font-size: 1.2rem !important;
      }

      /* Modernized list tables (flask-admin's `.model-list` class).
         Softer borders, polished header, better hover feedback;
         detail-view tables are styled separately below so they keep
         readable Key/Value separators. */
      .table-responsive {
          border-radius: 10px;
          /* `overflow: hidden` or any non-visible overflow on a parent
             kills `position: sticky` on thead. Keep the visual border +
             shadow but let content flow; list tables are width-capped
             by `column_list` anyway. */
          overflow: visible;
          border: 1px solid #e6e9ec;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      }
      .table {
          margin-bottom: 0;
          background: #fff;
      }
      .model-list thead th {
          background: #f5f7fa;
          border-bottom: 2px solid #e6e9ec !important;
          border-top: 0;
          font-weight: 600;
          font-size: 0.85rem;
          color: #2c3e50;
          padding: 0.55rem 0.75rem;
          vertical-align: middle;
      }
      .model-list td,
      .model-list th {
          border-top: 1px solid #eef0f3;
          border-left: 0;
          border-right: 0;
          padding: 0.55rem 0.75rem;
          vertical-align: middle;
      }
      .table-striped tbody tr:nth-of-type(odd) {
          background-color: #fafbfc;
      }
      .table-hover tbody tr:hover {
          background-color: #eef5fb !important;
      }
      .table .list-checkbox-column {
          width: 38px;
          text-align: center;
      }

      /* Detail view (flask-admin `.searchable`) and any explicit
         `.table-bordered` key/value layout: discreet full borders
         so the two-column grid actually reads as a grid. */
      .table.searchable,
      .table.table-bordered {
          border: 1px solid #e6e9ec;
          border-radius: 8px;
          overflow: hidden;
          background: #fff;
      }
      .table.searchable td,
      .table.searchable th,
      .table.table-bordered td,
      .table.table-bordered th {
          border: 1px solid #eef0f3;
          padding: 0.55rem 0.75rem;
          vertical-align: top;
      }
      .table.searchable td:first-child {
          background: #fafbfc;
          font-weight: 600;
          color: #2c3e50;
          width: 20%;
          white-space: nowrap;
      }
      .table.searchable tbody tr:hover {
          background-color: #f8fbff;
      }
      /* Sticky table headers — keep the column labels visible while the
         user scrolls long lists. The header sticks just below the fixed
         top navbar (~60 px). `background` + `box-shadow` keep tbody
         cells with their own background (searchable key column, hover
         row) from bleeding through while the header glides over them.
         `z-index` sits above row backgrounds but below the navbar. */
      .table thead th {
          position: sticky;
          top: 60px;
          z-index: 5;
          background: #f8f9fa;
          box-shadow: inset 0 -1px 0 #dee2e6;
      }
      /* Tables nested in a modal or in their own scroll container
         should stick to the LOCAL top (0), not to the page navbar. */
      .modal-body .table thead th,
      .table-responsive .table thead th {
          top: 0;
      }
      /* Row-action icons: clearly visible by default (details eye,
         edit pencil, debug rocket), brand blue on hover. */
      .table td a.icon {
          color: #2c3e50;
          margin: 0 2px;
          transition: color 0.12s;
      }
      .table td a.icon:hover {
          color: #3498db;
      }
      /* Pagination styling */
      .pagination {
          margin-top: 1rem;
      }
      .pagination .page-link {
          color: #2c3e50;
          border-radius: 6px;
          margin: 0 2px;
          border: 1px solid #e6e9ec;
      }
      .pagination .page-item.active .page-link {
          background-color: #3498db;
          border-color: #3498db;
      }
      .pagination .page-link:hover {
          background-color: #eef5fb;
      }

      .hidden {
          display: none;
      }

      .inline-field-list > .inline-field {
          cursor: grab;
      }
      .inline-field-list > .inline-field:active {
          cursor: grabbing;
      }
      .inline-field-list > .inline-field.sortable-ghost {
          opacity: 0.4;
          background-color: #d4edda !important;
      }
      .inline-field-list > .inline-field legend small::before {
          content: '\f0dc';
          font-family: 'Font Awesome 5 Free', 'FontAwesome';
          font-weight: 900;
          font-size: 1rem !important;
          margin-right: 6px;
          color: #999;
      }

      /* JS-injected ✕ button on every inline-list card.
         See `injectRemoveButton` at the bottom of this template. */
      .cmdb-inline-remove {
          position: absolute;
          top: 8px;
          right: 8px;
          z-index: 5;
          width: 28px;
          height: 28px;
          line-height: 22px;
          padding: 0;
          text-align: center;
          border-radius: 50%;
          background: #f5f5f5;
          color: #c0392b;
          border: 1px solid #e0e0e0;
          font-size: 14px;
          font-weight: 700;
          cursor: pointer;
      }
      .cmdb-inline-remove:hover,
      .cmdb-inline-remove:focus {
          background: #c0392b;
          color: #fff;
          outline: none;
      }
      /* Hide the (unreliable) upstream remove link — our floating
         button replaces it. */
      a.inline-remove-field {
          display: none !important;
      }

    .loader {
      width: 40px;
      aspect-ratio: 1;
      --c: linear-gradient(#000 0 0);
      --r1: radial-gradient(farthest-side at bottom,#000 93%,#0000);
      --r2: radial-gradient(farthest-side at top   ,#000 93%,#0000);
      background:
        var(--c) ,var(--r1),var(--r2),
        var(--c) ,var(--r1),var(--r2),
        var(--c) ,var(--r1),var(--r2);
      background-repeat: no-repeat;
      animation: l2 1s infinite alternate;
    }
    @keyframes l2 {
      0%,25% {
        background-size: 8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
        background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
     }
     50% {
        background-size: 8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
        background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
     }
     75% {
        background-size: 8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
        background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
     }
     95%,100% {
        background-size: 8px 100%,8px 4px, 8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px;
        background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(0% - 2px),100% calc(100% + 2px);
     }
    }
    </style>
    <style type="text/css">
        /* Eingebettete CSS für Syntax-Highlighting */
        .hll { background-color: #ffffcc }
        .c { color: #408080; font-style: italic } /* Kommentare */
        .err { border: 1px solid #FF0000 }       /* Fehler */
        .k { color: #008000; font-weight: bold } /* Schlüsselwörter */
        .nv { color: #32CD32; font-weight: bold; }
    </style>
    <style type="text/css">
        /* Nested dropdowns (Flask-Admin sub-categories). Bootstrap
           dropped submenus after BS3, so the side-open pattern is
           re-added here. Flask-Admin wraps every category in a
           <li class="dropdown">, top level and nested alike — the
           nested ones are those sitting inside a .dropdown-menu. */
        .navbar .dropdown-menu li.dropdown {
            position: relative;
        }
        .navbar .dropdown-menu li.dropdown > .dropdown-menu {
            top: 0;
            left: 100%;
            /* Cancels the menu's own top padding, so its first entry
               lines up with the entry that opened it. */
            margin-top: -0.4rem;
            margin-left: 0;
        }
        /* These open to the side, so their caret should point that way
           instead of down like the ones in the bar. The caret is taken out
           of the flow and the entry reserves room for it with padding — as
           a float it dropped onto a second line as soon as the label was
           long enough to fill the menu's width. */
        .navbar .dropdown-menu li.dropdown > .dropdown-toggle {
            position: relative;
            padding-right: 1.9rem;
        }
        .navbar .dropdown-menu li.dropdown > .dropdown-toggle::after {
            position: absolute;
            top: 50%;
            right: 0.8rem;
            margin-top: -0.15em;
            transform: rotate(-90deg);
        }
        /* On narrow viewports the submenu would be cut off; flip it to
           open on the left side of the parent item instead. */
        @media (max-width: 992px) {
            .navbar .dropdown-menu li.dropdown > .dropdown-menu {
                left: auto;
                right: 100%;
            }
        }

        /* Menus open on hover, top level and submenus alike, and stay
           open until another menu takes over or a click lands outside —
           see the script at the end of the page, which owns the class.
           Hovering only ever opens: a small menu is easy to slip out of,
           and closing on that would make the bar feel jumpy.
           Bootstrap's click handler is untouched, so keyboard use still
           works — and the rules are limited to real pointers on the
           expanded bar, where hover is a gesture that exists at all. */
        @media (hover: hover) and (pointer: fine) and (min-width: 992px) {
            .navbar li.dropdown.cmdb-menu-open > .dropdown-menu {
                display: block;
            }
            /* A top level menu hangs 0.35rem below its entry. The bridge
               over the gap keeps the pointer inside the menu on its way
               down, so travelling into it never lands on the page behind. */
            .navbar .navbar-nav > li.dropdown > .dropdown-menu::before {
                content: "";
                position: absolute;
                top: -0.4rem;
                left: 0;
                right: 0;
                height: 0.4rem;
            }
        }
    </style>
{% endblock %}

{% block page_body %}
    <div class="container{% if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-2" role="navigation">
            {# Brand sits OUTSIDE the collapse div so it stays visible
               on mobile and lines up with base.html's logout/login
               navbar (where the brand also sits as a direct child of
               <nav>). Keeps the standard Bootstrap 4 navbar pattern. #}
            {% block brand %}
                {% set brand_name = admin_view.admin.name %}
                {% include '_brand.html' %}
            {% endblock %}
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#admin-navbar-collapse"
                    aria-controls="admin-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- navbar content -->
            <div class="collapse navbar-collapse" id="admin-navbar-collapse">
            {% block main_menu %}
                <ul class="nav navbar-nav mr-auto">
                    {{ layout.menu() }}
                </ul>
            {% endblock %}

                {% block menu_links %}
                <ul class="nav navbar-nav navbar-right">
                    {{ layout.menu_links() }}
                    {% if pending_approval_count and pending_approval_count > 0 %}
                    <li id='pending-approvals' class="nav-item">
                      <a href="{{ pending_approval_url }}" class="nav-link"
                         title="Critical label changes waiting for approval">
                        <i class="fa fa-hourglass-half"></i>
                        <span class="badge badge-warning"
                              style="background:#f39c12;color:#000;">
                          {{ pending_approval_count }} label approvals
                        </span>
                      </a>
                    </li>
                    {% endif %}
                    {# Commit button with the pending-changes count inside
                       it — no separate floating badge. Committing writes,
                       so a read-only user does not get the button. #}
                    {% if not user_readonly %}
                    <li id="commit-button" class="nav-item">
                      <a href="#activate_changes"
                         class="toggle_activate_modal btn btn-primary commit-changes-btn"
                         title="Commit pending changes">
                        <i class="fa fa-check-circle"></i> Commit
                        {% if config['CHANGES'] %}
                        <span id="changes" class="commit-count">{{ config['CHANGES'] }}</span>
                        {% endif %}
                      </a>
                    </li>
                    {% endif %}
                    {# Profile: per-user actions as an icon-only dropdown on
                       the far right — the usual webapp pattern. Same markup
                       as Flask-Admin's own navbar dropdowns, so the dropdown
                       JS and the theme CSS apply unchanged. #}
                    <li class="dropdown" id="profile-menu">
                      <a class="dropdown-toggle nav-link" data-toggle="dropdown"
                         href="javascript:void(0)" title="Profile"
                         aria-label="Profile">
                        <i class="fa fa-user-circle fa-lg"></i>
                      </a>
                      <ul class="dropdown-menu dropdown-menu-right">
                        {% if current_user and current_user.is_authenticated %}
                        <li class="dropdown-header">{{ current_user.email }}</li>
                        {% endif %}
                        <li><a class="dropdown-item"
                               href="{{ url_for('first_steps.index') }}">
                          <i class="fa fa-rocket"></i> First Steps</a></li>
                        <li><a class="dropdown-item"
                               href="{{ config['BASE_PREFIX'] }}change-password">
                          <i class="fa fa-key"></i> Change Password</a></li>
                        <li><a class="dropdown-item"
                               href="{{ config['BASE_PREFIX'] }}set-2fa">
                          <i class="fa fa-shield"></i> Set 2FA Code</a></li>
                        <li><a class="dropdown-item"
                               href="{{ config['BASE_PREFIX'] }}api-tokens">
                          <i class="fa fa-terminal"></i> API Tokens</a></li>
                        <li><a class="dropdown-item"
                               href="{{ url_for('saved_searches.index_view') }}">
                          <i class="fa fa-bookmark"></i> Saved Searches</a></li>
                        <li><a class="dropdown-item"
                               href="{{ config['BASE_PREFIX'] }}set-theme">
                          <i class="fa fa-paint-brush"></i> Theme</a></li>
                        <li class="dropdown-divider"></li>
                        <li><a class="dropdown-item"
                               href="{{ config['BASE_PREFIX'] }}logout">
                          <i class="fa fa-sign-out"></i> Logout</a></li>
                      </ul>
                    </li>
                </ul>
                {% endblock %}
            {% block access_control %}
            {% endblock %}
            </div>
        </nav>

        {% block messages %}
            {{ layout.messages() }}
        {% endblock %}

        {# store the jinja2 context for form_rules rendering logic #}
        {% set render_ctx = h.resolve_ctx() %}

        {% block body %}{% endblock %}
    </div>

    <div id="activate_changes" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Activate Changes running</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p id="activate_result"></p>
          </div>
        </div>
      </div>
    </div>

{% endblock %}

{% block tail %}
    {{ super() }}
    <script type="text/javascript">

    $(document).on("click", ".btnCondition", function(){
        var job = $(this).val();

        var host_cond = $(this).nextAll('.cond-host').first();
        var attr_cond = $(this).nextAll('.cond-attr').first();
        var match_type = $(this).nextAll('.hidden').first().find('.cond-match-type');

        if (job == 'host'){
            attr_cond.hide();
            host_cond.show();
            match_type.val('host');
        } else {
            attr_cond.show();
            host_cond.hide();
            match_type.val('tag');
        }
    });


    $( document ).ready(function() {


        $('.btnCondition').each(function(i, obj) {
            var host_cond = $(this).nextAll('.cond-host').first();
            var attr_cond = $(this).nextAll('.cond-attr').first();
            var match_type = $(this).nextAll('.hidden').first().find('.cond-match-type');

            if (match_type.val() == 'host'){
                attr_cond.hide();
                host_cond.show();
            } else {
                attr_cond.show();
                host_cond.hide();
            }

        });



        // Mark rows whose `enabled` boolean is False so per-theme CSS can
        // style them. The legacy version applied `background-color:#f0f0f0;
        // color:grey` as inline styles, which beat every theme override and
        // turned the row white-ish on Gruvbox / Dracula / Nord.
        // Scoped to the `enabled` field: matching ANY empty boolean cell
        // also hit e.g. the user list's `disabled` column and grayed out
        // every active user.
        $('a#enabled[data-role="x-editable-boolean"][data-value=""]').closest('tr').addClass('rule-disabled');
        $('a#enabled > span.icon-minus-sign').closest('tr').addClass('rule-disabled');

        // Gray out Commit Changes button when no changes pending
        function updateCommitButton() {
            var changesCount = {% if config['CHANGES'] %}{{ config['CHANGES'] }}{% else %}0{% endif %};
            var commitBtn = $('.commit-changes-btn');
            if (changesCount == 0 || !changesCount) {
                commitBtn.removeClass('btn-primary').addClass('btn-secondary').prop('disabled', true);
                commitBtn.css('opacity', '0.6');
            } else {
                commitBtn.removeClass('btn-secondary').addClass('btn-primary').prop('disabled', false);
                commitBtn.css('opacity', '1');
            }
        }
        updateCommitButton();

        $('.toggle_activate_modal').click(function(e){
            var changesCount = {% if config['CHANGES'] %}{{ config['CHANGES'] }}{% else %}0{% endif %};
            if (changesCount == 0 || !changesCount) {
                e.preventDefault();
                return false;
            }
            // Gray out button immediately when commit starts
            var commitBtn = $('.commit-changes-btn');
            commitBtn.removeClass('btn-primary').addClass('btn-secondary').prop('disabled', true);
            commitBtn.css('opacity', '0.6');

            $("#activate_result").html("<div class=loader></div>");
            $('#activate_changes').modal();
            $.ajax({
                url: "{{config['BASE_PREFIX']}}admin/config/commit_changes",
                type: "POST",
                headers: {"X-CSRFToken": "{{ csrf_token() }}"},
                success: function(data) {
                    $("#activate_result").html(data);
                    setTimeout(function() {
                        $('#activate_changes').modal('hide');
                        $('#changes').hide();
                    }, 1000);
                }
            });
        });

        var password_field = $("#password").get(0);
        var password_input = $("#password")
        if (password_field) {
            password_field.type = 'password';
            password_input.on('click', function(x) {
                if( password_field.type == 'text') {
                    password_field.type = 'password';
                } else {
                    password_field.type = 'text';
                }

            });
        }

    });

    // Make all embedded document lists sortable via drag-and-drop
    $(document).ready(function() {
        if (typeof Sortable === 'undefined') return;

        function renumberInlineFields(listEl) {
            var container = $(listEl).closest('.inline-field');
            var prefix = container.attr('id');
            if (!prefix) return;

            var items = $(listEl).children('.inline-field');

            // Pass 1: rename to temporary prefix to avoid collisions
            items.each(function() {
                var item = $(this);
                var oldId = item.attr('id');
                if (!oldId) return;
                var tmpId = oldId.replace(prefix + '-', prefix + '-tmp-');
                item.attr('id', tmpId);
                var oldPrefix = oldId;
                var tmpPrefix = tmpId;
                item.find('[name]').each(function() {
                    $(this).attr('name', $(this).attr('name').replace(oldPrefix, tmpPrefix));
                });
                item.find('[id]').each(function() {
                    $(this).attr('id', $(this).attr('id').replace(oldPrefix, tmpPrefix));
                });
                item.find('[for]').each(function() {
                    $(this).attr('for', $(this).attr('for').replace(oldPrefix, tmpPrefix));
                });
            });

            // Pass 2: assign final sequential indices
            items.each(function(newIndex) {
                var item = $(this);
                var oldId = item.attr('id');
                if (!oldId) return;
                var match = oldId.match(/^(.+)-tmp-(\d+)$/);
                if (!match) return;
                var tmpPrefix = prefix + '-tmp-' + match[2];
                var newPrefix = prefix + '-' + newIndex;

                item.attr('id', newPrefix);
                item.find('[name]').each(function() {
                    $(this).attr('name', $(this).attr('name').replace(tmpPrefix, newPrefix));
                });
                item.find('[id]').each(function() {
                    $(this).attr('id', $(this).attr('id').replace(tmpPrefix, newPrefix));
                });
                item.find('[for]').each(function() {
                    $(this).attr('for', $(this).attr('for').replace(tmpPrefix, newPrefix));
                });
                // Update the "#N" display in legend
                item.find('legend small').contents().filter(function() {
                    return this.nodeType === 3;
                }).each(function() {
                    this.textContent = this.textContent.replace(/#\d+/, '#' + (newIndex + 1));
                });
            });
        }

        $('.inline-field-list').each(function() {
            var listEl = this;
            Sortable.create(listEl, {
                animation: 150,
                ghostClass: 'sortable-ghost',
                handle: 'legend',
                filter: '.inline-remove-field, input, label',
                preventOnFilter: false,
                // Native HTML5 drag-and-drop on <legend> handles is
                // broken in Firefox <=142 (works in newer Firefox and
                // Chromium). forceFallback uses SortableJS's own mouse
                // event implementation, which behaves identically in
                // every browser and sidesteps the quirk.
                forceFallback: true,
                fallbackTolerance: 4,
                onEnd: function() {
                    renumberInlineFields(listEl);
                }
            });
        });
    });

    // Inject a guaranteed-visible ✕ button into every inline-list
    // entry. The Flask-Admin upstream <a class="inline-remove-field">
    // approach turned out to be unreliable on this admin (sometimes
    // the legend renders empty, sometimes the FA glyph is invisible),
    // so we draw our own absolute-positioned button on every
    // .inline-field card and bind a click handler that removes the
    // card from the DOM. Idempotent + works for entries cloned in
    // afterwards via "Add".
    (function() {
      function injectRemoveButton(card) {
        if (!card || card.classList.contains('inline-field-template')) { return; }
        if (card.querySelector(':scope > .cmdb-inline-remove')) { return; }
        // Skip the outer wrapper — only the inner per-entry cards.
        if (!card.id || !card.id.match(/-\d+$/)) { return; }
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'cmdb-inline-remove';
        btn.title = 'Remove this entry';
        btn.setAttribute('aria-label', 'Remove this entry');
        btn.textContent = '✕';
        btn.addEventListener('click', function(ev) {
          ev.preventDefault();
          if (!confirm('Remove this entry?')) { return; }
          card.parentNode.removeChild(card);
        });
        // Make the card the positioning context.
        if (getComputedStyle(card).position === 'static') {
          card.style.position = 'relative';
        }
        card.appendChild(btn);
      }
      function scan(scope) {
        (scope || document).querySelectorAll(
          '.inline-field-list > .inline-field'
        ).forEach(injectRemoveButton);
      }
      $(document).ready(function() { scan(); });
      $(document).ready(function() {
        if (typeof MutationObserver === 'undefined') { return; }
        var obs = new MutationObserver(function(records) {
          records.forEach(function(rec) {
            rec.addedNodes && rec.addedNodes.forEach(function(node) {
              if (node.nodeType === 1) { scan(node.parentNode || document); }
            });
          });
        });
        document.querySelectorAll('.inline-field-list').forEach(function(el) {
          obs.observe(el, {childList: true, subtree: true});
        });
      });
    })();

    /* Owner of the .cmdb-menu-open class the stylesheet renders.
       Hovering a menu entry opens it; leaving it does NOT close it,
       because a small menu is easy to slip out of by a few pixels. A
       menu closes when another one opens, when a click lands outside
       the bar, when its own entry is clicked again, or on Escape.

       Bootstrap's click handler would latch a menu open with .show,
       which nothing here can undo — so a mouse click on a toggle is
       swallowed and handled below instead. Keyboard activation still
       reaches Bootstrap (a click from Enter or Space reports a detail
       of 0), so the menus stay reachable without a mouse. The media
       query has to match the stylesheet's exactly. */
    (function() {
      var OPEN = 'cmdb-menu-open';
      var MENU = '.navbar li.dropdown';
      var hoverOpensMenus = window.matchMedia(
        '(hover: hover) and (pointer: fine) and (min-width: 992px)');
      /* The menu a click has just shut. The pointer is still on its
         entry, so moving onto a child of it (the icon inside the label)
         would fire a fresh mouseover and open the menu right back up.
         It stays shut until the pointer has left the entry. */
      var closedByClick = null;

      function openMenus() {
        return Array.prototype.slice.call(
          document.querySelectorAll(MENU + '.' + OPEN));
      }

      function closeAll(except) {
        var keep = except || [];
        openMenus().forEach(function(item) {
          if (keep.indexOf(item) === -1) { item.classList.remove(OPEN); }
        });
      }

      /* The entry plus every menu it is nested in — everything else is
         closed, which is what makes a sibling menu take over. */
      function chainOf(item) {
        var chain = [];
        while (item) {
          chain.push(item);
          item = item.parentNode && item.parentNode.closest
            ? item.parentNode.closest(MENU) : null;
        }
        return chain;
      }

      function open(item) {
        var chain = chainOf(item);
        closeAll(chain);
        chain.forEach(function(entry) { entry.classList.add(OPEN); });
      }

      document.addEventListener('mouseover', function(ev) {
        if (!hoverOpensMenus.matches || !ev.target || !ev.target.closest) {
          return;
        }
        if (closedByClick) {
          if (closedByClick.contains(ev.target)) { return; }
          closedByClick = null;
        }
        var entry = ev.target.closest('.navbar li');
        if (!entry) { return; }
        if (entry.classList.contains('dropdown')) {
          if (!entry.classList.contains(OPEN)) { open(entry); }
          return;
        }
        /* A plain entry: keep the menu it lives in open and put away
           the submenu of the neighbour we just came from. Entries
           outside any menu leave everything as it is — moving the
           pointer off the bar must not close what is open. */
        var parent = entry.parentNode && entry.parentNode.closest
          ? entry.parentNode.closest(MENU) : null;
        if (parent) { open(parent); }
      });

      document.addEventListener('click', function(ev) {
        if (!hoverOpensMenus.matches || !ev.target || !ev.target.closest) {
          return;
        }
        var toggle = ev.detail !== 0
          && ev.target.closest('.navbar .dropdown-toggle');
        var item = toggle ? toggle.closest(MENU) : null;
        if (item) {
          ev.preventDefault();
          ev.stopPropagation();
          if (item.classList.contains(OPEN)) {
            closeAll(chainOf(item).slice(1));
            closedByClick = item;
          } else {
            open(item);
          }
          return;
        }
        /* A click on a menu entry navigates away anyway; only clicks
           next to the bar have to put the open menu away. */
        if (!ev.target.closest('.navbar')) { closeAll(); }
      }, true);

      document.addEventListener('keydown', function(ev) {
        if (ev.key === 'Escape') { closeAll(); }
      });

      hoverOpensMenus.addEventListener('change', function() { closeAll(); });
    })();

    </script>
{% endblock %}