{% extends "admin/change_list.html" %}
{% load i18n 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 %}
        <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;
            {{ opts.verbose_name_plural|capfirst|escape }}
            {# TODO might remove this or add reset #}
            {% if request.GET.q or request.POST.q %}
            &rsaquo; {% trans "Search" %}
            {% endif %}
        </div>
    {% endblock %}
{% endif %}

{% block content_title %}{% 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-top-right 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 }}" class="js-cms-pagetree-site-trigger" data-id="{{ site.pk }}">{{ 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 }}">{{ site.name }}</option>
                                {% endfor %}
                            </select>
                            {% csrf_token %}
                        </form>
                    </div>

                    {# INFO: "new page" button #}
                    {% if has_add_permission %}
                        <a href="{% url opts|admin_urlname:'add' %}" class="cms-pagetree-header-create cms-btn cms-btn-toolbar cms-btn-action">
                            {% blocktrans with opts.verbose_name|title as name %}
                                New {{ name }}
                            {% endblocktrans %}
                        </a>
                    {% endif %}
                </div>
            </div>

            <form id="changelist-form" action="" method="post" novalidate>{% csrf_token %}
                <div class="cms-pagetree cms-pagetree-section">
                    <h2>{% trans "Main Navigation" %}</h2>
                    <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-right-top">
                                    <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-alias"></span>
                                                <span>{% trans "Paste" %}</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>

                {# INFO: javascript is loaded from cms.pagetree.js #}

            </form>

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