{% 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 layoutItems = [] %}
{% for layout in layouts %}
    {% set layoutItems = layoutItems | merge([{ label: layout.name, value: layout.id }]) %}
{% endfor %}

{# Always default to first layout #}
{% if craft.app.request.param('layoutId') %}
    {% set layoutId = craft.app.request.param('layoutId') %}
{% else %}
    {% set layoutId = 1 %}
{% endif %}

{% block actionButton %}
    <div class="btngroup">
        <a class="btn submit add icon add-new-menu-item">{{ 'New menu item' | t('cp-nav') }}</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 craft.app.getEditionName() != 'Solo' %}
    <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: layoutItems,
        }) }}
    </div>
{% endif %}

<table id="navItems" class="data fullwidth collapsible">
    <thead>
        <th scope="col">{{ 'Visible' | 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></th>
    </thead>
    <tbody>
    {% if navItems is defined and navItems | length > 0 %}
        {% for nav in navItems %}
            <tr class="nav-item" data-id="{{ nav.id }}" data-currLabel="{{ nav.currLabel }}" data-name="{{ nav.currLabel }}">
                <td class="thin">
                    {{ forms.lightswitchField({
                        name: 'navEnabled',
                        on: nav.enabled,
                    }) }}
                </td>

                <td data-title="{{ nav.currLabel | t('cp-nav') }}">
                    <a class="move icon" title="{{ 'Reorder' | t('cp-nav') }}" role="button"></a>
                    <a class="edit-nav">{{ nav.currLabel | t('cp-nav') }}</a>
                    <span class="original-nav">({{ nav.prevLabel | t('cp-nav') }})</span>
                </td>

                <td data-title="{{ nav.currLabel | t('cp-nav') }}">
                    <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 class="thin">
                    {% 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>

{% endblock %}