{% extends admin_base_template %}
{% block head_css %}
    {{ super() }}
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
    <style>
        /* Inject the runtime-configurable theme colors as CSS custom
           properties so the static cmdbsyncer.css file (shared with
           ``base.html``) can pick them up. */
        :root {
            --nav-bg: {{ config['STYLE_NAV_BACKGROUND_COLOR'] }};
            --nav-link: {{ config['STYLE_NAV_LINK_COLOR'] }};
        }
    </style>
    <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;
       }

       /* Changes Badge Styling */
       #changes {
           margin-left: 1px;
           display: flex;
           align-items: center;
       }
       #changes .badge {
           font-size: 0.8rem;
           padding: 0.4rem 0.6rem;
           border-radius: 50px;
           white-space: nowrap;
           max-width: 60px;
           overflow: hidden;
           text-overflow: ellipsis;
           box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
           animation: cmdb-nav-pulse 2.2s infinite;
       }
       @keyframes cmdb-nav-pulse {
           0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5); }
           70%  { box-shadow: 0 0 0 10px 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);
           overflow: hidden;
       }

       @media (max-width: 576px) {
           .navbar-nav.navbar-right {
               margin-right: 5px !important;
               max-width: calc(100vw - 200px);
           }
           #changes .badge {
               font-size: 0.7rem;
               padding: 0.3rem 0.5rem;
               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;
      }

    .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 dropdown (Flask-Admin sub-categories). Bootstrap
           dropped submenus after BS3, so we re-add the hover-open
           pattern explicitly. Applied whenever a <li> inside a
           .dropdown-menu has its own .dropdown-menu child — flask
           admin marks these with class="submenu" on the wrapping li. */
        .navbar .dropdown-menu .dropdown-submenu,
        .navbar .dropdown-menu li.submenu {
            position: relative;
        }
        .navbar .dropdown-menu .dropdown-submenu > a::after,
        .navbar .dropdown-menu li.submenu > a::after {
            content: "▸";
            float: right;
            margin-left: 0.5rem;
            color: #888;
        }
        .navbar .dropdown-menu .dropdown-submenu > .dropdown-menu,
        .navbar .dropdown-menu li.submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
            margin-left: 0;
            display: none;
        }
        .navbar .dropdown-menu .dropdown-submenu:hover > .dropdown-menu,
        .navbar .dropdown-menu li.submenu:hover > .dropdown-menu {
            display: block;
        }
        /* 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 .dropdown-submenu > .dropdown-menu,
            .navbar .dropdown-menu li.submenu > .dropdown-menu {
                left: auto;
                right: 100%;
            }
        }
    </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="Pending approvals waiting for a second admin">
                        <i class="fa fa-hourglass-half"></i>
                        <span class="badge badge-warning"
                              style="background:#f39c12;color:#000;">
                          {{ pending_approval_count }} waiting
                        </span>
                      </a>
                    </li>
                    {% endif %}
                    {% if config['CHANGES'] %} <li id='changes'><span class="badge badge-warning">{{config['CHANGES']}}</span></li>{% endif %}
                </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();
            }

        });



        $("a#enabled>span.icon-minus-sign").parents('tr').css("background-color", "#f0f0f0").css("color", "grey");

        // 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',
                onEnd: function() {
                    renumberInlineFields(listEl);
                }
            });
        });
    });

    </script>
{% endblock %}