<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">

<t t-name="website.view_hierarchy">
    <Layout display="{ controlPanel: {} }" className="'overflow-auto h-100'">
            <HierarchyNavbar
                toggleInactive.bind="toggleInactive"
                websites="websites"
                selectWebsite.bind="selectWebsite"
                searchView.bind="searchView"
                />
            <div class="o_tree_container ms-2 container mt-2" style="margin-bottom: 50px;">
                <div t-if="siblingViews.length > 0" class="alert alert-info m-1 p-1">
                    Multiple tree exists for this view
                    <a t-foreach="siblingViews" t-as="siblingView" t-key="siblingView.id" href="#" class="o_load_hierarchy" t-on-click.stop.prevent="() => this.onShowHierarchy(siblingView.id)">
                        <i class="oi oi-arrow-right me-1"/>
                        <t t-esc="siblingView.display_name"/>
                        &lt;<t t-esc="siblingView.key"/>&gt;
                        <t t-if="siblingView.website_id">
                            [<t t-esc="siblingView.website_id[1]"/>]
                        </t>
                    </a>
                </div>
                <t t-set="viewTree" t-value="state.viewTree"/>
                <t t-call="website.report_viewhierarchy_children"/>
            </div>
    </Layout>
</t>

<t t-name="website.report_viewhierarchy_children">
    <p t-on-click="() => this.onCollapseClick(viewTree)"
    t-attf-class="o_tree_entry mb-0 d-flex align-items-center {{viewTree.active ? '': 'text-muted fw-normal'}} {{viewTree.inherit_children.length ? 'o_has_child' : ''}} {{state.searchedView.id === viewTree.id ? 'o_search_found border border-info rounded px-2': ''}}">
        <i t-if="hasChildToUnfold(viewTree)" t-attf-class="js_fold o_fold_icon fa {{ viewTree.collapsed ? 'fa-plus-square-o' : 'fa-minus-square-o' }} me-1"/>
        <i t-if="viewTree.arch_updated" class="fa fa-pencil-square me-1 o_text_pink" title="This view arch has been modified"/>
        <!-- Yellow bg to highlight requested view as google does -->
        <span class="js_fold" t-att-style="viewId === viewTree.id ? 'background-color: yellow': ''">
            <t t-esc="viewTree.name"/> (<span class="fw-bold" t-esc="viewTree.key"/>)
            <span class="o_text_orange" t-if="viewTree.website_name" t-esc="`[${viewTree.website_name}]`"/>
        </span>
        <a href="#" t-on-click.stop.prevent="() => this.openFormView(viewTree.id)">
            <i class="fa fa-eye ms-2 text-muted" title="Go to View"/>
        </a>
        <a class="o_show_diff" href="#" t-on-click.stop.prevent="() => this.onShowDiffClick(viewTree.id)">
            <i class="fa fa-files-o ms-2 text-muted" title="Show Arch Diff"/>
        </a>
        <t t-if="state.searchedView.id === viewTree.id">
            <span class="o_tab_hint text-info ms-auto small fst-italic pe-2">Press &lt;Tab&gt; for next [<t t-esc="state.searchedView.index+1"/>/<t t-esc="state.searchedView.total"/>]</span>
        </t>
    </p>

    <ul t-if="viewTree.inherit_children">
        <t t-foreach="viewTree.inherit_children" t-as="child" t-key="child.id">
            <li t-if="isViewDisplayed(child)"
                t-attf-class="{{child.active ? '' : 'o_is_inactive'}}">
                <t t-call="website.report_viewhierarchy_children">
                    <t t-set="viewTree" t-value="child"/>
                </t>
            </li>
        </t>
    </ul>
</t>
</templates>
