{% extends admin_base_template %}
{% block head_css %}
    {{ super() }}
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
    <style>
        body {
            padding-top: 0px;
        }
        .container {
            width: 100% !important;
            max-width: 100%;
        }
        .icon-minus-sign {
            color: red;
        }
        .icon-ok-circle {
            color: green;
        }

       .navbar {
           background-color: {{ config['STYLE_NAV_BACKGROUND_COLOR'] }} !important;
           width: 100vw;
           position: relative;
           left: 50%;
           right: 50%;
           margin-left: -50vw;
           margin-right: -50vw;
           padding-left: 0;
           padding-right: 0;
           border-radius: 0;
       }
       
       .navbar .container {
           max-width: 100% !important;
           padding-left: 15px;
           padding-right: 15px;
       }

       .navbar .nav-link {
           color: {{ config['STYLE_NAV_LINK_COLOR'] }} !important;
           padding: 0.35rem 0.7rem !important;
           margin: 0 0.175rem;
       }
       
       .navbar-nav .nav-item {
           margin: 0 0.14rem;
       }

       /* Navbar Brand Styling */
       .navbar-brand {
           color: white !important;
           font-weight: 600;
           transition: all 0.3s ease;
           padding: 0.25rem 0.75rem;
           display: flex;
           align-items: center;
           height: auto;
           min-height: 48px;
       }
       
       .navbar-brand:hover {
           color: #f8f9fa !important;
           text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
           transform: translateY(-1px);
       }
       
       .navbar-logo {
           width: 38px;
           height: 38px;
           object-fit: contain;
           filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
           transition: all 0.3s ease;
           margin-right: 12px;
           flex-shrink: 0;
       }
       
       .navbar-brand:hover .navbar-logo {
           filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
           transform: scale(1.05);
       }
       
       .brand-text {
           display: flex;
           flex-direction: column;
           line-height: 1.1;
       }
       
       .brand-name {
           font-size: 1.2rem;
           font-weight: 700;
           letter-spacing: -0.5px;
           text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
       }
       
       .brand-hint {
           font-size: 0.65rem;
           opacity: 0.85;
           font-weight: 400;
           margin-top: -2px;
           text-transform: uppercase;
           letter-spacing: 0.5px;
       }
       
       /* 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;
       }
       
       .navbar-nav.navbar-right {
           margin-right: 15px !important;
           max-width: calc(100vw - 300px);
           overflow: hidden;
       }

       /* Responsive Design */
       @media (max-width: 576px) {
           .navbar-logo {
               width: 32px;
               height: 32px;
           }
           
           .brand-name {
               font-size: 1rem;
           }
           
           .brand-hint {
               font-size: 0.55rem;
           }
           
           .navbar-brand {
               padding: 0.2rem 0.5rem;
               min-height: 40px;
           }
           
           .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;
      }

      .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>
{% 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 and toggle get grouped for better mobile display -->
            <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 brand %}
                <a class="navbar-brand d-flex align-items-center text-decoration-none" href="{{ config['BASE_PREFIX'] }}admin">
                    <img src="{{ config['BASE_PREFIX'] }}static/logo_white.png" alt="Logo" class="navbar-logo me-2">
                    <div class="brand-text">
                        <span class="brand-name">{{ admin_view.admin.name }}</span>
                        {% if config['HEADER_HINT'] %}
                        <small class="brand-hint">{{config['HEADER_HINT']}}</small>
                        {% endif %}
                    </div>
                </a>
            {% endblock %}
            {% 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 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();
            $.get("{{config['BASE_PREFIX']}}admin/config/commit_changes", 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 %}