{{ attach_library('ajax_link/ajaxLink') }}
{{ attach_library('core/drupal.dialog.ajax') }}
{{ attach_library('budvue/select2-script') }}

<div class="folder-top-links">
    <a href="/budvue-public-library?field_slide_library_value=1&field_slide_type_value=horizontal" class="back-btn">Back</a>
    <a href="/admin/structure/taxonomy/manage/folders/add" data-dialog-class="your-class" data-dialog-options="{&quot;width&quot;:800}" data-dialog-type="modal" class="create-btn use-ajax" data-once="ajax">Create</a>
</div>

<div class="table-responsive">
    <table class="folders">
        <thead>
            <tr>
            <th class="name">Name</th>
            <th>Location</th>
            <th>Slides</th>
            <th>Remove</th>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
            <tr>
                <td class="name"><a class="edit-btn" href="/taxonomy/term/{{ row.term_id }}/edit?destination=/folders">{{ row.term_name }}</a></td>
                <td>
                <div id="list{{ loop.index }}" class="dropdown-check-list" tabindex="100">
                    <span class="anchor">Select Locations</span>
                    <ul class="items">
                    {% for location in store_locations %}
                        <li>
                            <input type="checkbox" value="{{ location.id }}" term-id="{{ row.term_id }}"
                            {% if folder_ownership_data[row.term_id] is not null and location.id in folder_ownership_data[row.term_id]|map(item => item.id) %}checked{% endif %} />
                            {{ location.label }}
                        </li>
                    {% endfor %}
                    </ul>
                </div>
                </td>
                <td>{{ row.node_count }}</td>
                <td> <button class="delete-btn" 
                data-term-id="{{ row.term_id }}" 
                data-term-name="{{ row.term_name }}" 
                style="background: none; border: none;">
                <img src="/themes/custom/budvue/images/png/trash.png" alt="Delete" style="width: 20px; height: 20px;" />
                </button></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{# <p class="but-cancel" onclick="goBack()">Cancel</p> #}
<div id="modal" class="modal">
    <div class="modal-content">
        <span class="close">×</span>
    </div>
</div>
<div id="loader" class="loader">
    <div class="loader-text"><p>Retrieving Data</p>
        <div class="loader">
            <img src="/modules/custom/cstv_main/images/loader.gif">
        </div>
    </div>
</div>