{% extends "admin/change_list.html" %}
{% load i18n l10n admin_list static admin_urls cms_admin cms_js_tags cms_static cms_tags %}

{# TODO might not need that #}
{% block title %}{% trans "List of pages" %}{% endblock %}
{% block bodyclass %}{{ block.super }} change-list cms-pagetree-wrapper{% endblock %}
{% block coltype %}flex{% endblock %}
{% block date_hierarchy %}{% endblock %}
{% block pagination %}{% endblock %}

{% block extrahead %}
    {{ block.super }}
    {# INFO: we need to add styles here instead of "extrastyle" to avoid conflicts with adminstyle #}
    <link rel="stylesheet" href="{% static_with_version 'cms/css/cms.base.css' %}">
    <link rel="stylesheet" href="{% static_with_version 'cms/css/cms.pagetree.css' %}">
    <script src="{% static_with_version 'cms/js/dist/bundle.admin.base.min.js' %}"></script>
    <script src="{% static_with_version 'cms/js/dist/bundle.admin.pagetree.min.js' %}"></script>
{% endblock extrahead %}

{% if not is_popup %}
    {% block breadcrumbs %}
        {% django_version_gte 6 1 as new_breadcrumbs %}
        {% if new_breadcrumbs %}
        <ol class="breadcrumbs cms-pagetree-breadcrumbs">
            <li><a href="{% url 'admin:index' %}">{% trans "Home" %}</a></li>
            <li><a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a></li>
            {# TODO might remove this or add reset #}
            {% if request.GET.q or request.POST.q %}
            <li>{% trans "Pages" %}</li>
            <li aria-current="page">{% trans "Search" %}</li>
            {% else %}
            <li aria-current="page">Pages</li>
            {% endif %}
        </ol>
        {% else %}
        <div class="breadcrumbs cms-pagetree-breadcrumbs">
            <a href="{% url 'admin:index' %}">{% trans "Home" %}</a> &rsaquo;
            <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a> &rsaquo;
            Pages
            {# TODO might remove this or add reset #}
            {% if request.GET.q or request.POST.q %}
            &rsaquo; {% trans "Search" %}
            {% endif %}
        </div>
        {% endif %}
    {% endblock %}
{% endif %}
{% block content_title %}{% endblock %}
{% block object-tools-items %}{% endblock %}

{% block content %}
    {% spaceless %}
    <div id="content-main">
        <div class="cms-pagetree-root module{% if tree.is_filtered %} filtered{% endif %}" id="changelist">
            <div class="cms-pagetree cms-pagetree-header">
                <div class="cms-pagetree-header-cell cms-pagetree-header-cell-fluid">
                    <div class="cms-pagetree-header-row cms-pagetree-search-container">
                        <div class="cms-pagetree-header-cell">
                            <div class="cms-pagetree-header-title">
                                <h1>
                                    {% trans "Page Tree" %} <span>({{ tree.site.name }})</span>
                                </h1>
                            </div>

                            {% if tree.is_filtered or request.GET.q %}
                                {# INFO: show reset button when filtering is active #}
                                <a href="{% url opts|admin_urlname:'changelist' %}" class="cms-pagetree-header-cell cms-pagetree-header-search-reset">{% trans "Reset filter"|lower %}</a>
                            {% endif %}
                        </div>
                        <div class="cms-pagetree-header-cell cms-pagetree-header-cell-search">
                            {# INFO: visible search field with filtering #}
                            <form method="get" class="cms-pagetree-header-search js-cms-pagetree-header-search">
                                <label for="field-searchbar" class="cms-hidden">{% trans "Search" %}</label>
                                <div class="cms-pagetree-header-filter">
                                    <input type="text" size="40" name="q" id="field-searchbar" value="{{ tree.query }}" placeholder="{% trans "Search" %}">
                                    <div class="cms-pagetree-header-filter-trigger js-cms-pagetree-header-filter-trigger">
                                        <a href="#"><span class="cms-icon cms-icon-arrow"></span></a>
                                    </div>
                                    <div class="cms-pagetree-header-filter-container js-cms-pagetree-header-filter-container">
                                        {% for field in changelist_form.visible_fields %}
                                            {% render_filter_field request field %}
                                        {% endfor %}
                                        <a href="#" class="cms-pagetree-header-search-close js-cms-pagetree-header-search-close">
                                            <span class="cms-icon cms-icon-close"></span>
                                        </a>
                                    </div>
                                </div>
                                <button type="submit" class="cms-pagetree-header-search-btn">
                                    <span class="cms-icon cms-icon-search"></span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="cms-pagetree-header-cell cms-pagetree-header-body">
                    {# INFO: hidden search field with dynamic content #}
                    <div class="js-cms-pagetree-header-search-copy cms-hidden">
                        <div id="toolbar">
                            <form id="changelist-search" method="get">
                                <div><!-- DIV needed for valid HTML -->
                                    <label for="searchbar"><img src="{% static "admin/img/search.svg" %}" alt="Search" /></label>
                                    <input type="text" size="40" name="{{ search_var }}" value="{{ tree.query }}" id="searchbar" autofocus />
                                    <input type="submit" value="{% trans 'Search' %}" />
                                    {% for pair in changelist_form.get_filter_items %}
                                        {% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}"/>{% endif %}
                                    {% endfor %}
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="cms-clear-mobile"></div>

                    {# INFO: dropdown for changing sites and recover deleted pages #}
                    <div class="cms-pagetree-sites-list cms-pagetree-dropdown js-cms-pagetree-dropdown">
                        <a href="#" class="cms-pagetree-dropdown-trigger js-cms-pagetree-dropdown-trigger">
                            <span class="cms-icon cms-icon-squares"></span>
                        </a>
                        <div class="cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu-condensed cms-pagetree-dropdown-menu-arrow-block-start-inline-end js-cms-pagetree-dropdown-menu">
                            <ul class="cms-pagetree-dropdown-menu-inner">
                                <li>
                                    <span class="label">{% trans "Sites" %}</span>
                                </li>
                                {% for site in tree.sites %}
                                    <li{% if site.pk == tree.site.pk %} class="active"{% endif %}>
                                        <a href="#{{ site.pk|unlocalize }}" class="js-cms-pagetree-site-trigger" data-id="{{ site.pk|unlocalize }}">{{ site.name }}</a>
                                    </li>
                                {% endfor %}
                                {% if has_recover_permission %}
                                    <li class="cms-pagetree-dropdown-separator">&nbsp;</li>
                                    <li>
                                        <a href="{% url opts|admin_urlname:'recoverlist' %}" class="recoverlink">
                                            {% blocktrans with opts.verbose_name_plural|escape as name %}
                                                Restore deleted {{ name }}
                                            {% endblocktrans %}
                                        </a>
                                    </li>
                                {% endif %}
                            </ul>
                        </div>
                        {# INFO: hidden site form when using the dropdown site switcher #}
                        <form method="post" class="js-cms-pagetree-site-form cms-hidden">
                            <select name="site">
                                {% for site in tree.sites %}
                                    <option value="{{ site.pk|unlocalize }}">{{ site.name }}</option>
                                {% endfor %}
                            </select>
                            {% csrf_token %}
                        </form>
                    </div>

                    {# INFO: "new page" button #}
                    {% if has_add_permission %}
                        <a href="{% url opts|admin_urlname:'add' %}?language={{ preview_language }}" class="cms-pagetree-header-create cms-btn cms-btn-toolbar cms-btn-action">
                            {% trans "New Page" %}
                        </a>
                    {% endif %}
                </div>
            </div>

            <div class="clear"></div>

            <form id="changelist-form" action="" method="post" novalidate>{% csrf_token %}
                <div class="cms-pagetree cms-pagetree-section cms-pagetree-section-header">
                    <h2>{% trans "Main Navigation" %}</h2>
                    {% if site_languages|length > 1 %}
                        <select class="js-cms-pagetree-languages">
                            {% for language_code, name in site_languages %}
                                <option value="{{ language_code }}" {% if preview_language == language_code %} selected{% endif %}>{{ name }}</option>
                            {% endfor %}
                        </select>
                    {% endif %}
                    <div class="cms-pagetree-section-nav">
                        {% if has_add_permission %}
                            <div class="cms-pagetree-dropdown js-cms-pagetree-dropdown">
                                <a href="#root" data-node-id="#root" data-id="#root" class="js-cms-pagetree-dropdown-trigger js-cms-pagetree-options cms-pagetree-dropdown-trigger cms-btn cms-btn-default cms-btn-no-border cms-icon cms-icon-menu">
                                    <span class="sr-only">{% trans "Options" %}</span>
                                </a>

                                <div class="js-cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu-arrow-inline-end-block-start">
                                    <ul class="cms-pagetree-dropdown-menu-inner">
                                        <li>
                                            <a href="#" data-node-id="#root" data-id="#root" class="js-cms-tree-item-paste cms-pagetree-dropdown-item-disabled">
                                                <span class="cms-icon cms-icon-paste"></span>
                                                <span>{% trans "Paste" %}</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>

                {# INFO: javascript is loaded from cms.pagetree.js #}
                {% if tree.has_items %}
                    <div class="cms-pagetree cms-pagetree-container">
                        <div class="cms-pagetree-jstree js-cms-pagetree" data-json='{
                            "urls": {
                                "tree": "{% url opts|admin_urlname:'get_tree' %}",
                                "move": "../page/{id}/move-page/",
                                "copy": "../page/{id}/copy-page/",
                                "copyPermission": "../page/{id}/dialog/copy/",
                                "theme": "{% static 'cms/css/' %}"
                            },
                            "csrf": "{{ csrf_token }}",
                            "static": "{{ STATIC_URL }}",
                            "permission": {{ CMS_PERMISSION|bool }},
                            "debug": {{ DEBUG|bool }},
                            "filtered": {% if tree.is_filtered %}true{% else %}false{% endif %},
                            "site": {{ tree.site.pk|unlocalize }},
                            "hasAddRootPermission": {{ has_add_permission|yesno:"true,false" }},
                            "lang": {
                                "code": "{{ preview_language|lower }}",
                                "success": "{% filter escapejs %}{% trans "Successfully moved" %}{% endfilter %}",
                                "changes": "{% filter escapejs %}{% trans "Changes within the tree might require a refresh." %}{% endfilter %}",
                                "error": "{% filter escapejs %}{% trans "Error:" %}{% endfilter %}",
                                "apphook": "{% filter escapejs %}{% trans "This page cannot be copied because an application is attached to it. See the Page's Advanced settings to manage apphooks." %}{% endfilter %}",
                                "publish": "{% filter escapejs %}{% trans "Are you sure you want to § this page?" %}{% endfilter %}",
                                "reload": "{% trans "Reload" %}",
                                "loading": "{% trans "Loading..." %}",
                                "newNode": "{% trans 'New node' %}",
                                "nodes": "{% trans 'nodes' %}"
                            },
                            "columns": [{
                                "title": "&nbsp;",
                                "key": "",
                                "width": "100%"
                            }, {
                                "title": "&nbsp;",
                                "key": "view",
                                "cls": "jstree-grid-cell-regular-options"
                            }, {
                                "title": "{{ _('View')|escapejs }}",
                                "key": "preview"
                            }, {
                                "title": "<a href=\"{% url opts|admin_urlname:'changelist' %}?language={{ preview_language }}\" class=\"js-pagetree-header-lang cms-pagetree-header-lang active\">{{ preview_language|upper }}</a>",
                                "key": "{{ preview_language }}"
                            }, {
                                "title": "{{ _('Menu')|escapejs }}",
                                "key": "menu"
                            },
                            {% block extra_cols %}
                            {% endblock %}
                            {
                                "title": "&nbsp;",
                                "key": "options"
                            }]
                        }' data-settings-url="{% cms_admin_url "cms_usersettings_session_store" %}">
                            <ul>
                                {% if tree.is_filtered %}
                                    {# INFO: load html data source when filtering #}
                                    {% show_admin_menu_for_pages tree.items depth=0 %}
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                    {% include "admin/cms/page/tree/legend.html" %}
                {% else %}
                    {# INFO: show add a page button when there are no items #}
                    <div class="cms-pagetree cms-pagetree-empty js-cms-pagetree" data-json='{
                        "empty": true,
                        "urls": {
                            "tree": "{% url opts|admin_urlname:'get_tree' %}",
                            "move": "../page/{id}/move-page/",
                            "copy": "../page/{id}/copy-page/",
                            "copyPermission": "../page/{id}/dialog/copy/",
                            "theme": "{% static 'cms/css/' %}"
                        },
                        "csrf": "{{ csrf_token }}",
                        "static": "{{ STATIC_URL }}",
                        "permission": {{ CMS_PERMISSION|bool }},
                        "debug": {{ DEBUG|bool }},
                        "filtered": {% if tree.is_filtered %}true{% else %}false{% endif %},
                        "site": {{ tree.site.pk|unlocalize }},
                        "hasAddRootPermission": {{ has_add_permission|yesno:"true,false" }},
                        "lang": {
                            "code": "{{ preview_language|lower }}",
                            "success": "{% filter escapejs %}{% trans "Successfully moved" %}{% endfilter %}",
                            "changes": "{% filter escapejs %}{% trans "Changes within the tree might require a refresh." %}{% endfilter %}",
                            "error": "{% filter escapejs %}{% trans "Error:" %}{% endfilter %}",
                            "apphook": "{% filter escapejs %}{% trans "This page cannot be copied because an application is attached to it. See the Page's Advanced settings to manage apphooks." %}{% endfilter %}",
                            "publish": "{% filter escapejs %}{% trans "Are you sure you want to § this page?" %}{% endfilter %}",
                            "reload": "{% trans "Reload" %}",
                            "loading": "{% trans "Loading..." %}",
                            "newNode": "{% trans 'New node' %}",
                            "nodes": "{% trans 'nodes' %}"
                        },
                        "columns": [{
                            "title": "&nbsp;",
                            "key": "",
                            "width": "100%"
                        }, {
                            "title": "&nbsp;",
                            "key": "view",
                            "cls": "jstree-grid-cell-regular-options"
                        }, {
                            "title": "{{ _('View')|escapejs }}",
                            "key": "preview"
                        }, {
                            "title": "<a href=\"{% url opts|admin_urlname:'changelist' %}?language={{ preview_language }}\" class=\"js-pagetree-header-lang cms-pagetree-header-lang active\">{{ preview_language|upper }}</a>",
                            "key": "{{ preview_language }}"
                        }, {
                            "title": "{{ _('Menu')|escapejs }}",
                            "key": "menu"
                        },
                        {
                            "title": "&nbsp;",
                            "key": "options"
                        }]
                    }' data-settings-url="{% cms_admin_url "cms_usersettings_session_store" %}">
                        {% url opts|admin_urlname:'add' as add_url %}
                        {% blocktrans with object=_('page') %}
                            <em>There is no {{ object }} around yet.</em>
                            <br>
                            <a href="{{ add_url }}" class="addlink">Add {{ object }}</a> now.
                        {% endblocktrans %}
                    </div>
                {% endif %}
            </form>

            {# INFO: used when copying nodes #}
            <div class="cms-tree-dialog js-cms-tree-dialog"></div>
        </div>
    </div>
    {% endspaceless %}
{% endblock content %}