{% extends "base_template.html" %}

{% block title %}{{ _('Menus') }}{% endblock %}

{% block content %}
<style>
  .nav-row--hidden { opacity: .55; }
  #nav-rows, #footer-rows { list-style: none; padding-left: 0; }
  /* One row per menu entry: its kind, what it says and where it goes, and
     the buttons that move it. The row wraps instead of squeezing, so on a
     phone the buttons share the first line with the kind and the fields
     take the whole width below; nothing is cut at the card's edge. */
  .menu-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .menu-row__main { flex: 1 1 14rem; min-width: 0; }
  .menu-row__inputs { display: flex; flex-wrap: wrap; gap: .5rem; }
  .menu-row__inputs > .form-control { flex: 1 1 10rem; min-width: 0; }
  .menu-row__label { max-width: 15rem; }
  .menu-row__href { display: block; overflow-wrap: anywhere; }
  .menu-row__actions { display: flex; gap: .5rem; margin-left: auto; }
  @media (max-width: 575.98px) {
    .menu-row { padding-inline: .75rem; }
    .menu-row__actions { order: 1; }
    .menu-row__main { order: 2; flex-basis: 100%; }
    .menu-row__label { max-width: none; }
  }
</style>

{# The admin panel's page heading, the one the dashboard and Users open
   with. The two lists below are sections of it, a size smaller. #}
<div class="d-flex flex-column align-items-start gap-2 mb-4">
    <h1 class="h2 mb-0"><b>{{ _('Menus') }}</b></h1>
    <p class="text-muted mb-0">
        {{ _('The main navigation is composed from the installed features, and each content feature contributes its page. Reorder, rename or hide them, and add custom external links. Changes apply immediately.') }}
    </p>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
        <div class="alert alert-{{ 'danger' if category == 'danger' else 'success' }} py-2">{{ message }}</div>
    {% endfor %}
{% endwith %}

<form method="POST">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <h2 class="h3">{{ _('Main navigation') }}</h2>
    <ul id="nav-rows">
        {% for row in rows %}
        {% if row.type == 'custom' %}
        <li class="nav-row card mb-2 {{ 'nav-row--hidden' if not row.visible }}" data-type="custom">
            <div class="card-body menu-row py-2">
                <input type="hidden" name="row_type" value="custom">
                <input type="hidden" name="row_key" value="">
                <input type="hidden" name="row_visible" class="row-visible" value="{{ '1' if row.visible else '0' }}">
                <span class="badge bg-info-subtle text-info-emphasis border">{{ _('custom') }}</span>
                <div class="menu-row__main menu-row__inputs">
                    <input name="row_label" class="form-control form-control-sm menu-row__label" value="{{ row.label }}" placeholder="{{ _('Label') }}" aria-label="{{ _('Label') }}">
                    <input name="row_href" class="form-control form-control-sm" value="{{ row.href }}" placeholder="https://…" aria-label="{{ _('Address') }}">
                </div>
                <div class="menu-row__actions">
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-up" title="{{ _('Move up') }}" aria-label="{{ _('Move up') }}">↑</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-down" title="{{ _('Move down') }}" aria-label="{{ _('Move down') }}">↓</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-toggle" title="{{ _('Show or hide') }}">{{ _('Hide') if row.visible else _('Show') }}</button>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove" title="{{ _('Remove') }}" aria-label="{{ _('Remove') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
                </div>
            </div>
        </li>
        {% else %}
        <li class="nav-row card mb-2 {{ 'nav-row--hidden' if not row.visible }}" data-type="feature">
            <div class="card-body menu-row py-2">
                <input type="hidden" name="row_type" value="feature">
                <input type="hidden" name="row_key" value="{{ row.key }}">
                <input type="hidden" name="row_href" value="{{ row.href }}">
                <input type="hidden" name="row_visible" class="row-visible" value="{{ '1' if row.visible else '0' }}">
                {% if row.missing %}
                <span class="badge bg-danger-subtle text-danger-emphasis border" title="{{ _('This feature is no longer installed') }}">{{ _('not installed') }}</span>
                {% else %}
                <span class="badge bg-light text-muted border">{{ _('feature') }}</span>
                {% endif %}
                <div class="menu-row__main">
                    <input name="row_label" class="form-control form-control-sm menu-row__label" value="{{ row.label }}" placeholder="{{ row.default_label }}" aria-label="{{ _('Label') }}">
                    <small class="text-muted menu-row__href">{% if row.href %}→ {{ row.href }}{% else %}{{ _('(unavailable)') }}{% endif %}</small>
                </div>
                <div class="menu-row__actions">
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-up" title="{{ _('Move up') }}" aria-label="{{ _('Move up') }}">↑</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-down" title="{{ _('Move down') }}" aria-label="{{ _('Move down') }}">↓</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-toggle" title="{{ _('Show or hide') }}">{{ _('Hide') if row.visible else _('Show') }}</button>
                    {% if row.missing %}
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove" title="{{ _('Remove') }}" aria-label="{{ _('Remove') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
                    {% endif %}
                </div>
            </div>
        </li>
        {% endif %}
        {% endfor %}
    </ul>

    <div class="mt-2">
        <button type="button" id="add-custom" class="btn btn-outline-primary btn-sm">+ {{ _('Add custom link') }}</button>
    </div>

    <h2 class="h3 mt-4">{{ _('Footer links') }}</h2>
    <p class="text-muted">
        {{ _('A row of plain links shown in the site footer, before the social links. A row is saved only with both a label and an address.') }}
    </p>
    <ul id="footer-rows">
        {% for row in footer_rows %}
        <li class="footer-row card mb-2">
            <div class="card-body menu-row py-2">
                <div class="menu-row__main menu-row__inputs">
                    <input name="footer_label" class="form-control form-control-sm menu-row__label" value="{{ row.label }}" placeholder="{{ _('Label') }}" aria-label="{{ _('Label') }}">
                    <input name="footer_href" class="form-control form-control-sm" value="{{ row.href }}" placeholder="https://…" aria-label="{{ _('Address') }}">
                </div>
                <div class="menu-row__actions">
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-up" title="{{ _('Move up') }}" aria-label="{{ _('Move up') }}">↑</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary btn-down" title="{{ _('Move down') }}" aria-label="{{ _('Move down') }}">↓</button>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove" title="{{ _('Remove') }}" aria-label="{{ _('Remove') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
                </div>
            </div>
        </li>
        {% endfor %}
    </ul>

    <div class="d-flex justify-content-between align-items-center mt-3">
        <button type="button" id="add-footer-link" class="btn btn-outline-primary btn-sm">+ {{ _('Add footer link') }}</button>
        <button type="submit" class="btn btn-primary">{{ _('Save menu') }}</button>
    </div>
</form>

<template id="custom-row-tpl">
    <li class="nav-row card mb-2" data-type="custom">
        <div class="card-body menu-row py-2">
            <input type="hidden" name="row_type" value="custom">
            <input type="hidden" name="row_key" value="">
            <input type="hidden" name="row_visible" class="row-visible" value="1">
            <span class="badge bg-info-subtle text-info-emphasis border">{{ _('custom') }}</span>
            <div class="menu-row__main menu-row__inputs">
                <input name="row_label" class="form-control form-control-sm menu-row__label" value="" placeholder="{{ _('Label') }}" aria-label="{{ _('Label') }}">
                <input name="row_href" class="form-control form-control-sm" value="" placeholder="https://…" aria-label="{{ _('Address') }}">
            </div>
            <div class="menu-row__actions">
                <button type="button" class="btn btn-sm btn-outline-secondary btn-up" title="{{ _('Move up') }}" aria-label="{{ _('Move up') }}">↑</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-down" title="{{ _('Move down') }}" aria-label="{{ _('Move down') }}">↓</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-toggle" title="{{ _('Show or hide') }}">{{ _('Hide') }}</button>
                <button type="button" class="btn btn-sm btn-outline-danger btn-remove" title="{{ _('Remove') }}" aria-label="{{ _('Remove') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
            </div>
        </div>
    </li>
</template>

<template id="footer-row-tpl">
    <li class="footer-row card mb-2">
        <div class="card-body menu-row py-2">
            <div class="menu-row__main menu-row__inputs">
                <input name="footer_label" class="form-control form-control-sm menu-row__label" value="" placeholder="{{ _('Label') }}" aria-label="{{ _('Label') }}">
                <input name="footer_href" class="form-control form-control-sm" value="" placeholder="https://…" aria-label="{{ _('Address') }}">
            </div>
            <div class="menu-row__actions">
                <button type="button" class="btn btn-sm btn-outline-secondary btn-up" title="{{ _('Move up') }}" aria-label="{{ _('Move up') }}">↑</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-down" title="{{ _('Move down') }}" aria-label="{{ _('Move down') }}">↓</button>
                <button type="button" class="btn btn-sm btn-outline-danger btn-remove" title="{{ _('Remove') }}" aria-label="{{ _('Remove') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
            </div>
        </div>
    </li>
</template>

<script>
(function () {
    var list = document.getElementById('nav-rows');
    var tpl = document.getElementById('custom-row-tpl');
    var labelHide = {{ _('Hide')|tojson }};
    var labelShow = {{ _('Show')|tojson }};

    function paintVisible(row) {
        var hid = row.querySelector('.row-visible');
        var on = hid.value === '1';
        row.classList.toggle('nav-row--hidden', !on);
        var btn = row.querySelector('.btn-toggle');
        if (btn) btn.textContent = on ? labelHide : labelShow;
    }

    list.addEventListener('click', function (e) {
        var btn = e.target.closest('button');
        if (!btn) return;
        var row = e.target.closest('.nav-row');
        if (!row) return;
        if (btn.classList.contains('btn-up') && row.previousElementSibling) {
            list.insertBefore(row, row.previousElementSibling);
        } else if (btn.classList.contains('btn-down') && row.nextElementSibling) {
            list.insertBefore(row.nextElementSibling, row);
        } else if (btn.classList.contains('btn-toggle')) {
            var hid = row.querySelector('.row-visible');
            hid.value = hid.value === '1' ? '0' : '1';
            paintVisible(row);
        } else if (btn.classList.contains('btn-remove')) {
            row.remove();
        }
    });

    document.getElementById('add-custom').addEventListener('click', function () {
        // Clone a static template node — never build DOM from user-entered values.
        var node = tpl.content.firstElementChild.cloneNode(true);
        list.appendChild(node);
    });

    Array.prototype.forEach.call(list.querySelectorAll('.nav-row'), paintVisible);
})();

(function () {
    // The footer rows mirror the nav rows minus visibility: custom links
    // only, so a row the admin does not want is simply removed.
    var list = document.getElementById('footer-rows');
    var tpl = document.getElementById('footer-row-tpl');

    list.addEventListener('click', function (e) {
        var btn = e.target.closest('button');
        if (!btn) return;
        var row = e.target.closest('.footer-row');
        if (!row) return;
        if (btn.classList.contains('btn-up') && row.previousElementSibling) {
            list.insertBefore(row, row.previousElementSibling);
        } else if (btn.classList.contains('btn-down') && row.nextElementSibling) {
            list.insertBefore(row.nextElementSibling, row);
        } else if (btn.classList.contains('btn-remove')) {
            row.remove();
        }
    });

    document.getElementById('add-footer-link').addEventListener('click', function () {
        // Clone a static template node — never build DOM from user-entered values.
        var node = tpl.content.firstElementChild.cloneNode(true);
        list.appendChild(node);
    });
})();
</script>
{% endblock %}