<template>
    [% template toggle %]
    [% if $context?features?playground?enabled %]
    <li>
        <details class="dropdown-button">
            <summary><pb-i18n key="document.selectODD">Select ODD</pb-i18n></summary>
            <ul>
                [% for $odd in sort($config:odd-available) %]
                <li><a href="?odd=[[$odd]]">[[$odd]]</a></li>
                [% endfor %]
            </ul>
        </details>
    </li>
    [% endif %]
    [% endtemplate %]

    [% template after 1 %]
    [% if empty($context?doc) and $context?features?playground?enabled %]
    <div class="alert" xml:space="preserve">
        <p><pb-i18n key="browse.login-1">Log in as</pb-i18n> "tei" <pb-i18n key="browse.login-2">with password</pb-i18n>
            "simple" <pb-i18n key="browse.login-3">to experiment with your own files and ODDs</pb-i18n></p>
    </div>
    [% endif %]
    [% endtemplate %]
    
    [% template after 3 %]
    [% if empty($context?doc) and $context?features?playground?enabled %]
    <div>
        <h3><pb-i18n key="odd.files">ODDs</pb-i18n></h3>
        <pb-manage-odds id="manage-odds" target="document-list" emit="search"/>
    </div>
    [% endif %]
    [% endtemplate %]

    [% template styles %]
    [% if empty($context?doc) %]
    <style>
        .alert {
            margin-top: 0;
        }
    </style>
    [% endif %]
    [% endtemplate %]
</template>