<html xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<div class="t3js-module-content" data-upgrade-docs-mark-read-token="{upgradeDocsMarkReadToken}" data-upgrade-docs-unmark-read-token="{upgradeDocsUnmarkReadToken}">

    <div class="form-group">
        <label for="upgrade-docs-search-field" class="visually-hidden">Search</label>
        <input
            type="search"
            autocomplete="off"
            id="upgrade-docs-search-field"
            class="form-control t3js-upgradeDocs-fulltext-search"
            placeholder="Enter searchword"
            disabled
        >
    </div>
    <div class="form-group">
        <div class="input-group flex-nowrap">
            <span class="input-group-text">Filter by:</span>
            <select-pure
                default-label="Select category"
                class="t3js-upgradeDocs-select-pure"
                multiple
                tabindex=""
                disabled
                >
            </select-pure>
        </div>
    </div>

    <div class="panel-group" role="tablist" aria-multiselectable="true">
        <f:for each="{upgradeDocsVersions}" as="version" iteration="iterator">
            <div class="panel panel-default panel-version t3js-version-changes" data-version="{version}">
                <div class="panel-heading" role="tab">
                    <div class="panel-heading-row">
                        <button
                            type="button"
                            class="panel-button collapsed"
                            data-bs-toggle="collapse"
                            data-bs-target="#version-{iterator.index}"
                            aria-controls="version-{iterator.index}"
                            aria-expanded="false"
                            id="heading-{iterator.index}"
                        >
                            <div class="panel-title">
                                Version: <strong>{version}</strong>
                                <span class="t3js-panel-loading"><core:icon identifier="spinner-circle" size="small" /></span>
                            </div>
                            <span class="caret"></span>
                        </button>
                    </div>
                </div>
                <div class="panel-collapse collapse"
                        id="version-{iterator.index}" role="tabpanel" data-group-version="{version}">
                    <div class="panel-body t3js-changelog-list" role="tablist" aria-multiselectable="false"></div>
                </div>
            </div>
        </f:for>

        <div class="panel panel-default panel-version">
            <div class="panel-heading" role="tab">
                <div class="panel-heading-row">
                    <button
                        type="button"
                        class="panel-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseRead"
                        aria-controls="collapseRead"
                        aria-expanded="false"
                        id="heading-read"
                    >
                        <div class="panel-title">
                            Files marked as read
                        </div>
                        <span class="caret"></span>
                    </button>
                </div>
            </div>
            <div class="panel-collapse collapse" id="collapseRead" role="tabpanel" data-group-version="read">
                <div class="panel-body panel-body-read t3js-changelog-list" role="tablist" aria-multiselectable="false"></div>
            </div>
        </div>

        <div class="panel panel-default panel-version">
            <div class="panel-heading" role="tab">
                <div class="panel-heading-row">
                    <button
                        type="button"
                        class="panel-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseNotAffected"
                        aria-controls="collapseNotAffected"
                        aria-expanded="false"
                        id="heading-not-affected"
                    >
                        <div class="panel-title">
                            Files marked as not affected by extension scanner
                        </div>
                        <span class="caret"></span>
                    </button>
                </div>
            </div>
            <div class="panel-collapse collapse" id="collapseNotAffected" role="tabpanel" data-group-version="notAffected">
                <div class="panel-body panel-body-not-affected t3js-changelog-list" role="tablist" aria-multiselectable="false"></div>
            </div>
        </div>
    </div>
</div>

</html>
