{{ block title }}
Runde {{round_display}}: Gemeinsamkeiten mit Ihrem Transaktionspartner
{{ endblock }}
{{block style}}
<style>
    .tab-pane {
    display: none; /* Hide all by default */
}

.tab-pane.active.show {
    display: block; /* Only show the active tab */
}
.nav-link{
 width: 210px;
    word-break: break-all;
}
.nav-item a {
    text-decoration: none;
    word-break: break-all;
}
</style>
{{endblock}}
{{ block content }}
<p>Sie haben auf Basis Ihrer Antworten aus dem Fragebogen von Teil 1 des Experiments mit allen potentiellen Transakionspartnern <b>im Durchschnitt {{social_proximity_score |to2 }} </b> Gemeinsamkeiten.
    <br><br>Mit Ihrem aktuellen Transaktionspartner haben Sie {{if above_average}}<b>überdurchschnittlich</b> {{else}}<b>unterdurchschnittlich</b> {{endif}} viele Gemeinsamkeiten.
    <br><br>Durch Klicken der einzelnen Reiter können Sie die gemeinsamen Antworten einsehen. Bei nicht vorhandenen Überschneidungen sind die Fragen/Aussagen durchgestrichen. Sobald Sie sich alle für Sie interessanten Informationen angesehen haben, gehen Sie bitte auf Weiter.
</p> <br>

<!-- Container for Tab Buttons -->
<ul class="nav justify-content-center flex-wrap" id="tab-buttons">
</ul>


<!-- Container for Tab Content -->
<div id="tab-content"></div>


{{ formfields }}
<br><br>
<div id="nextButtonDiv">
    <button class="btn btn-primary">Weiter</button>
</div>


{{ endblock }}
{{ block script }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabsData = JSON.parse(js_vars.tabs_data);
    const notFound = js_vars.not_found; // jetzt danach filtern und den classtag kursiv geben / farbe anders
    const tabButtons = document.getElementById('tab-buttons');
    const tabContentContainer = document.getElementById('tab-content');

    // Function to remove active classes and hide all tab contents
    function deactivateTabsAndContents() {
        document.querySelectorAll('.nav-link').forEach(link => {
            link.classList.remove('active');
        });
        document.querySelectorAll('.tab-pane').forEach(pane => {
            pane.classList.remove('show', 'active');
        });
    }

    // Function to activate a tab and its content
    function activateTab(tabId) {
        const tabLink = document.querySelector(`.nav-link[href="#${tabId}"]`);
        const tabPane = document.getElementById(tabId);
        if (tabLink && tabPane) {
            tabLink.classList.add('active');
            tabPane.classList.add('show', 'active');
        }
    }

    // Initialize tabs and contents
    Object.keys(tabsData).forEach((tabName, index) => {
        const tabInfo = tabsData[tabName];
        const tabId = `tab-${tabName.toLowerCase().replace(/\s+/g, '-')}`;

        // Creating tab button
        const tabButton = document.createElement('li');
        tabButton.className = 'nav-item';
        const tabLink = document.createElement('a');
        tabLink.className = 'nav-link text-wrap';

        tabLink.href = `#${tabId}`;
        tabLink.textContent = tabInfo.header;
        if (index === 0) { // Set the first tab as active by default
            tabLink.classList.add('active');
        }
        tabButton.appendChild(tabLink);
        tabButtons.appendChild(tabButton);

        // Creating tab content
        const tabPane = document.createElement('div');
        tabPane.id = tabId;
        tabPane.className = 'tab-pane fade';
        if (index === 0) { // Show the first tab content by default
            tabPane.classList.add('show', 'active');
        }
        tabContentContainer.appendChild(tabPane);

        // Populate the tab content
        tabInfo.questions.forEach(question => {
            const questionElem = document.createElement('p');
            var innerrText = ""
            //todo: check for anzeige (grau kursiv vs schwarz und bold

            if (question.answers.length == 1 && question.answers[0] == notFound){
                innerrText = `<p class='fw-bold text-decoration-line-through fst-italic'>${question.name}</p>`
            }
            else{
                innerrText = `<p class='fw-bold'>${question.name}</p>${question.answers.join("<br> ")}`
            }
            innerrText += "<br>" // problem mit abstand lisa 19.6
            questionElem.innerHTML = innerrText;
            tabPane.appendChild(questionElem);
        });
    });

    // Handle clicking on tabs
    tabButtons.addEventListener('click', function(e) {
        e.preventDefault();
        if (e.target && e.target.nodeName === "A") {
            deactivateTabsAndContents(); // Deactivate all tabs and hide their contents
            activateTab(e.target.getAttribute('href').substring(1)); // Activate the clicked tab and its content
        }
    });
});
</script>


{{ endblock }}