<div class="modal-dialog modal-dialog-centered related-finding-modal bg-dark">
    <div class="modal-content bg-dark text-light border-secondary">
        <div class="modal-content bg-dark text-light">
            <h5 class="modal-title">Related findings from case</h5>
        </div>
        <div class="modal-body">
            <details class="help-text">
                <summary><i class="bi bi-info-circle"></i> Help</summary>
                <p>This form is designed to quickly populate the same finding across different series.</p>
                <p>Cloning a finding from this form will populate the details with a blank viewport (you will need to add visual annotation and set the display as intended).</p>
            </details>
            <ul class="list-group list-group-flush bg-dark">
                {% for finding in findings %}
                    <li class="list-group-item bg-dark text-light border-secondary">
                        <div class="fw-bold mb-1 text-info">{{ finding.title }}</div>
                        {% if finding.description %}
                            Description:
                            <div class="text-muted small mb-1" style="color:#b0b0b0 !important;">{{ finding.description|truncatechars:100 }}</div>
                        {% endif %}
                        {% if finding.findings.all %}
                            <div class="mb-1">
                                <span class="fw-semibold text-warning">Findings:</span>
                                {% for subfinding in finding.findings.all %}
                                    {{ subfinding.get_link }}{% if not forloop.last %}, {% endif %}
                                {% endfor %}
                            </div>
                        {% endif %}
                        {% if finding.structures.all %}
                            <div class="mb-1">
                                <span class="fw-semibold text-warning">Structures:</span>
                                {% for structure in finding.structures.all %}
                                    {{ structure.get_link }}{% if not forloop.last %}, {% endif %}
                                {% endfor %}
                            </div>
                        {% endif %}
                        {% if finding.conditions.all %}
                            <div class="mb-1">
                                <span class="fw-semibold text-warning">Conditions:</span>
                                {% for condition in finding.conditions.all %}
                                    {{ condition.get_link }}{% if not forloop.last %}, {% endif %}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <div class="mt-2">
                            <button
                                class="btn btn-sm btn-primary text-light use-finding-base-btn"
                                type="button"
                                data-finding-id="{{ finding.pk }}"
                                data-finding-description="{{ finding.description|default_if_none:''|escapejs }}"
                                {% if finding.conditions.all %}
                                    data-finding-conditions="{% for c in finding.conditions.all %}{{ c.pk }}{% if not forloop.last %},{% endif %}{% endfor %}"
                                    data-finding-conditions-names="{% for c in finding.conditions.all %}{{ c }}{% if not forloop.last %}|{% endif %}{% endfor %}"
                                {% endif %}
                                {% if finding.structures.all %}
                                    data-finding-structures="{% for s in finding.structures.all %}{{ s.pk }}{% if not forloop.last %},{% endif %}{% endfor %}"
                                    data-finding-structures-names="{% for s in finding.structures.all %}{{ s }}{% if not forloop.last %}|{% endif %}{% endfor %}"
                                {% endif %}
                                {% if finding.findings.all %}
                                    data-finding-findings="{% for f in finding.findings.all %}{{ f.pk }}{% if not forloop.last %},{% endif %}{% endfor %}"
                                    data-finding-findings-names="{% for f in finding.findings.all %}{{ f }}{% if not forloop.last %}|{% endif %}{% endfor %}"
                                {% endif %}
                            >Use as finding base</button>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
</div>
<script>
    document.querySelectorAll('.use-finding-base-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            console.log('Button clicked:', btn);
            // Example: populate #hidden-form fields with finding data
            const form = window.parent.document.querySelector('#hidden-form');
            if (!form) return;

            form.style.display = 'block'; // Show the form if hidden
            document.querySelector('#add-finding-button').style.display = 'none'; // Hide the button


            // Set values (adjust field names as needed)
            form.querySelector('[name="description"]').value = btn.getAttribute('data-finding-description');



            function setSelect2Values(fieldName, dataAttr, namesAttr) {
                const values = btn.getAttribute(dataAttr);
                const names = btn.getAttribute(namesAttr);
                const select = form.querySelector(`[name="${fieldName}"]`);
                if (values && select) {
                    const valueArr = values.split(',').map(v => v.trim()).filter(Boolean);
                    const nameArr = names ? names.split('|') : [];
                    valueArr.forEach((val, idx) => {
                        if (val && !Array.from(select.options).some(opt => opt.value == val)) {
                            const opt = document.createElement('option');
                            opt.value = val;
                            opt.text = nameArr[idx] || val;
                            opt.selected = true;
                            select.appendChild(opt);
                        }
                    });
                    $(select).val(valueArr).trigger('change');
                }
            }

// Usage inside your click handler:
            setSelect2Values('conditions', 'data-finding-conditions', 'data-finding-conditions-names');
            setSelect2Values('structures', 'data-finding-structures', 'data-finding-structures-names');
            setSelect2Values('findings', 'data-finding-findings', 'data-finding-findings-names');


            // Optionally, close the modal (if using Bootstrap modal JS)
            const modal = window.parent.document.querySelector('#clone-findings-modal');
            if (modal) {
                const modalInstance = bootstrap.Modal.getInstance(modal);
                if (modalInstance) modalInstance.hide();
            }
        });
    });
</script>