{% load ocyanjson i18n %}
{% ocyanjson "themes" "theme" "default" as theme_default %}
{% with selected_theme=request.GET.previewtheme|default:theme_default %}
<div class='theme-switcher'>
    <a class="open_switcher">
        <i class="fa fa-layer-plus"></i>
    </a>
    <div class="theme-menu-wrapper">
        <ul class="list-unstyled">
            <li>
                <a rel="nofollow" tabindex="-1" href="?previewtheme=default"{% if selected_theme == "default" %} class="active"{% endif %}>{% translate "default" context "theme switcher" %}</a>
            </li>
            <li>
                <a rel="nofollow" tabindex="-1" href="?previewtheme=dark"{% if selected_theme == "dark" %} class="active"{% endif %}>{% translate "dark" context "theme switcher" %}</a>
            </li>
            <li>
                <a rel="nofollow" tabindex="-1" href="?previewtheme=header_footer_contrast"{% if selected_theme == "header_footer_contrast" %} class="active"{% endif %}>{% translate "header_footer_contrast" context "theme switcher" %}</a>
            </li>
            <li>
                <a rel="nofollow" tabindex="-1" href="?previewtheme=sticky_header"{% if selected_theme == "sticky_header" %} class="active"{% endif %}>{% translate "sticky_header" context "theme switcher" %}</a>
            </li>
            <li>
                <a rel="nofollow" tabindex="-1" href="?previewtheme=product_shadow"{% if selected_theme == "product_shadow" %} class="active"{% endif %}>{% translate "product_shadow" context "theme switcher" %}</a>
            </li>
            <li>
                <a rel="nofollow" tabindex="-1" href="?previewtheme=product_borders"{% if selected_theme == "product_borders" %} class="active"{% endif %}>{% translate "product_borders" context "theme switcher" %}</a>
            </li>
            <li>
                <a rel="nofollow" tabindex="-1" href="?previewtheme=page_above_header"{% if selected_theme == "page_above_header" %} class="active"{% endif %}>{% translate "page_above_header" context "theme switcher" %}</a>
            </li>
            <li>
                <a rel="nofollow" tabindex="-1" href="?previewtheme=readability"{% if selected_theme == "readability" %} class="active"{% endif %}>{% translate "readability" context "theme switcher" %}</a>
            </li>
            <li>
                <a rel="nofollow" tabindex="-1" href="?previewtheme=wide_container"{% if selected_theme == "wide_container" %} class="active"{% endif %}>{% translate "wide_container" context "theme switcher" %}</a>
            </li>
        </ul>
    </div>
</div>
{% endwith %}