{% load django_cards_tags %}<style>
    .drop-placeholder {
        height: 2px;
        background: #007bff;
        margin: 4px 0;
    }
</style>


{% include 'cards/standard/_cards_on_ready.html' %}
<script>
    var last_loaded_entry_id = null;

    function load_details(entry_id) {
        last_loaded_entry_id = entry_id;
        var active = document.querySelectorAll('.cards-list-group-item.active');
        for (var i = 0; i < active.length; i++) {
            active[i].classList.remove('active');
        }
        var item = document.getElementById('list_' + entry_id);
        if (item) item.classList.add('active');
        {% if modal %}
            django_modal.send_inputs({'button': '{{ details_button_action_name }}', 'entry_id': entry_id})
        {% else %}
            ajax_helpers.post_json({'data': {'button': '{{ details_button_action_name }}', 'entry_id': entry_id}});
        {% endif %}
    }

    function load_empty_details() {
        last_loaded_entry_id = null;
        var active = document.querySelectorAll('.cards-list-group-item.active');
        for (var i = 0; i < active.length; i++) {
            active[i].classList.remove('active');
        }
        {% if modal %}
            django_modal.send_inputs({'button': '{{ details_empty_button_action_name }}'})
        {% else %}
            ajax_helpers.post_json({'data': {'button': '{{ details_empty_button_action_name }}'}});
        {% endif %}
    }

    window.cards_on_ready(function () {
         var selected = document.getElementById('list_{{ selected_id }}');
         if (selected) selected.focus();
    });

    ajax_helpers.command_functions.load_details = function (command) {
        var entry_id = last_loaded_entry_id;
        if (typeof command.entry_id !== "undefined") {
            entry_id = command.entry_id;
        }
        if(entry_id == null) {
            load_empty_details(entry_id);
        } else {
            load_details(entry_id);
        }
    }
</script>
<div class="{{ card_css_class }}" id="{{ card.code }}" data-title="">
    {% if show_header %}
    <div class="card-header {{ card.header_css_class }}">
        <div class="d-flex align-items-center">
            <h5 class="mr-auto">{% if card.header_icon %}<i class="{{ card.header_icon }}"></i> {% endif %}{{ card.title }}</h5>
            {{ card.menu.render }}
            {% pack_path 'cards/standard/_reload_button.html' as pack_include %}{% include pack_include %}
        </div>
    </div>
    {% endif %}
    {{ card.tab_menu.render }}
    <div class="{{ card_body_css_class }}" id="{{ card.code }}_body" {% if card_body_css_style %}style="{{ card_body_css_style }}"{% endif %}>
    {% for entry in entries %}

    <a class="{{ card_link_css_class }}{% if enable_reorder %} draggable-entry{% endif %}"
       id="list_{{ entry.pk }}"
       href="javascript:load_details('{{ entry.pk }}')"
       {% if enable_reorder %} draggable="true" data-entry-id="{{ entry.pk }}"{% endif %}
    >
            <div class="row">
                <div class="col-sm-12">
                    <h4 class="list-group-item-heading {{ entry.class }}">{% if enable_reorder %}
                        <i class="btn btn-outline-secondary btn-sm fas fa-arrows-alt-v pl-0 pr-0 " style="width: 20px"></i>{% endif %}
                        {% if entry.colour %}<i class="fa fa-square"
                                                style="color: #{{ entry.colour }};opacity: 1;"></i>{% endif %}{{ entry.name }}
                    </h4>
                </div>
            </div>
        </a>
        {% if selected_id == entry.pk %}
            <script>window.cards_on_ready(function () { load_details('{{ entry.pk }}'); });</script>
        {% endif %}
        {% empty %}
        <div class="list-group-item">
            <div class="alert alert-warning">{{ empty_list_message }}</div>
        </div>

        <script>
            window.cards_on_ready(function () {load_empty_details();});

        </script>

    {% endfor %}
    </div>
{% if card.footer %}
    <div class="card-footer">
        <small style="text-align: left">{{ card.footer|safe }}</small>
    </div>
{% endif %}
{% if enable_reorder %}
<script>
    let draggedItem = null;
    let placeholder = document.createElement('div');
    placeholder.classList.add('drop-placeholder');

    document.addEventListener("DOMContentLoaded", function () {
        const container = document.getElementById('{{ card.code }}_body');

        container.addEventListener('dragstart', function (e) {
            if (e.target.classList.contains('draggable-entry')) {
                draggedItem = e.target;
                e.dataTransfer.effectAllowed = 'move';
                e.target.classList.add('dragging');
            }
        });

        container.addEventListener('dragend', function (e) {
            if (draggedItem) {
                draggedItem.classList.remove('dragging');
                placeholder.remove();
                draggedItem = null;
            }
        });

        container.addEventListener('dragover', function (e) {
            e.preventDefault();
            const afterElement = getDragAfterElement(container, e.clientY);
            if (afterElement == null) {
                container.appendChild(placeholder);
            } else {
                container.insertBefore(placeholder, afterElement);
            }
        });

        container.addEventListener('drop', function (e) {
            e.preventDefault();
            if (placeholder && draggedItem) {
                container.insertBefore(draggedItem, placeholder);
                placeholder.remove();
                const newOrder = Array.from(container.querySelectorAll('.draggable-entry')).map((el, i) => [i, parseInt(el.dataset.entryId)]);
                ajax_helpers.post_json({data: {button: 'save_list_order', sort: newOrder}});
            }
        });
    });

    function getDragAfterElement(container, y) {
        const draggableElements = [...container.querySelectorAll('.draggable-entry:not(.dragging)')];

        return draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect();
            const offset = y - box.top - box.height / 2;
            if (offset < 0 && offset > closest.offset) {
                return { offset: offset, element: child };
            } else {
                return closest;
            }
        }, { offset: Number.NEGATIVE_INFINITY }).element;
    }
</script>
{% endif %}
</div>
{% include 'cards/standard/_reload_script.html' %}