{% extends 'cp-nav/_layouts' %}
{% import '_includes/forms' as forms %}

{% set crumbs = [
    { label: 'Control Panel Nav' | t, url: url('cp-nav') },
    { label: 'Navigation' | t, url: url('cp-nav') }
] %}

{% set selectedTab = 'navigation' %}

{% set layoutOptions = [] %}
{% for layout in layouts %}
    {% set layoutOptions = layoutOptions | merge([{ label: layout.name, value: layout.id }]) %}
{% endfor %}

{% set layoutId = craft.app.request.param('layoutId') ?? '' %}

{% block actionButton %}
    <div class="btngroup">
        <a class="btn submit add icon add-new-menu-item">
            <div class="label">{{ 'New menu item' | t('cp-nav') }}</div>
            <div class="spinner spinner-absolute"></div>
        </a>

        <div class="btn submit menubtn"></div>
        <div class="menu">
            <ul>
                <li>
                    <a class="add-new-menu-item" data-type="divider">
                        {{ 'New divider item' | t('cp-nav') }}
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block blockContent %}

<div class="cp-nav-notice">
    {{ 'CP Nav: Editing {name}' | t('cp-nav', { name: layout.name }) }}
</div>

{% if layouts | length == 1 %}
    {{ hiddenInput('layoutId', layouts[0].id) }}
{% else %}
    <div class="layout-select">
        {{ forms.selectField({
            first: true,
            label: 'Layout' | t('cp-nav'),
            instructions: 'Choose a Layout to edit.' | t('cp-nav'),
            id: 'layoutId',
            name: 'layoutId',
            value: layoutId,
            options: layoutOptions,
        }) }}
    </div>
{% endif %}

<div id="cp-nav-items">
    <table class="data fullwidth" data-max-levels="2">
        <thead>
            <th scope="col">{{ 'Show' | t('cp-nav') }}</th>
            <th scope="col">{{ 'Label' | t('cp-nav') }}</th>
            <th scope="col">{{ 'URL' | t('cp-nav') }}</th>
            <th scope="col">{{ 'Type' | t('cp-nav') }}</th>
            <th class="thin"></th>
        </thead>
        <tbody>
        {% set padding = craft.app.locale.getOrientation() == 'ltr' ? 'left' : 'right' -%}

        {% if navItems is defined and navItems | length > 0 %}
            {% for nav in navItems %}
                {% set totalDescendants = nav.getChildren() %}

                <tr class="cp-nav-item" data-id="{{ nav.id }}" data-name="{{ nav.currLabel }}" data-level="{{ nav.level }}" data-descendants="{{ totalDescendants | length }}" tabindex="0">
                    <td class="thin lightswitch-cell">
                        {{ forms.lightswitchField({
                            name: 'navEnabled',
                            on: nav.enabled,
                            small: true,
                        }) }}
                    </td>

                    <th data-title="{{ nav.currLabel }}" data-titlecell style="padding-{{ padding }}: {{ (nav.level - 1) * 22 }}px;">
                        <a class="move icon" title="{{ 'Reorder' | t('cp-nav') }}" aria-label="{{ 'Reorder' | t('cp-nav') }}" role="button"></a>

                        <span class="element">
                            <a href="#" class="js-edit-nav">{{ (nav.currLabel ?? '[none]') | t('app') }}</a>

                            {% if nav.prevLabel %}
                                <span>({{ nav.prevLabel | t('app') }})</span>
                            {% endif %}
                        </span>
                    </th>

                    <td>
                        <span class="original-nav-link">{{ nav.url }}</span>
                    </td>

                    <td>
                        {% if nav.type %}
                            <div class="nav-type">
                                <span class="nav-type-{{ nav.type }}">{{ nav.type }}</span>
                            </div>
                        {% endif %}
                    </td>

                    <td>
                        {% if nav.isManual() or nav.isDivider() %}
                            <a class="delete icon" title="{{ 'Delete' | t('cp-nav') }}" role="button"></a>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        {% endif %}
        </tbody>
    </table>
</div>

{% endblock %}