{% from '_includes/forms.twig' import button %}
{% requireAdmin false %}

{% extends "_layouts/cp" %}
{% set title = "Routes"|t('app') %}
{% set readOnly = not craft.app.config.general.allowAdminChanges %}

{% block actionButton %}
    {% if not readOnly %}
        <button type="button" id="add-route-btn" class="btn submit add icon">{{ "New route"|t('app') }}</button>
    {% endif %}
{% endblock %}

{% set crumbs = [
    { label: "Settings"|t('app'), url: url('settings') }
] %}

{% do view.registerAssetBundle("craft\\web\\assets\\routes\\RoutesAsset") %}

{% do view.registerTranslations('app', [
    "Add a token",
    "Are you sure you want to delete this route?",
    "Couldn’t save new route order.",
    "Couldn’t save route.",
    "Create a new route",
    "Edit Route",
    "Global",
    "If the URI looks like this",
    "Load this template",
    "New route order saved.",
    "Route deleted.",
    "Route Saved.",
    "The URI can’t begin with the {setting} config setting.",
]) %}


{% set routes = craft.routes.getProjectConfigRoutes() %}

{% set actionMenuItems = [
    {
        icon: 'arrow-up',
        label: 'Move up'|t('app'),
        attributes: {
            data: {action: 'moveUp'},
        },
    },
    {
        label: 'Move down'|t('app'),
        attributes: {
            data: {icon: 'arrow-down', action: 'moveDown'},
        },
    },
] %}

{% block main %}
    <div id="routes">
        {% if readOnly %}
            <div id="content-notice">
                {{ readOnlyNotice()|raw }}
            </div>
        {% endif %}

        <p id="noroutes"{% if routes %} class="hidden"{% endif %}>
            {{ "No routes exist yet."|t('app') }}
        </p>

        {% for route in routes %}
            <div class="route{{ readOnly ? ' inactive' : '' }}" data-uid="{{ route.uid }}"{% if route.siteUid %} data-site-uid="{{ route.siteUid }}"{% endif %}>
                <div class="uri-container">
                    {%- apply spaceless %}
                        {% if craft.app.getIsMultiSite() %}
                            <span class="site">{{ route.siteUid ? craft.app.sites.getSiteByUid(route.siteUid).name|t('site') : "Global"|t('app') }}</span>
                        {% endif %}
                        <span class="uri">{{ route.uriDisplayHtml|raw }}</span>
                    {% endapply -%}
                </div>
                <div class="template">{{ route.template }}</div>
                {% if not readOnly %}
                    <div class="actions">
                        {{ button({
                            class: ['chromeless', 'small', 'edit-btn'],
                            icon: 'edit',
                            attributes: {
                                title: 'Edit'|t('app'),
                                aria: {label: 'Edit'|t('app')},
                                role: 'none',
                            },
                        }) }}
                        {{ disclosureMenu(actionMenuItems, {
                            hiddenLabel: 'Actions'|t('app'),
                            buttonAttributes: {
                                class: ['action-btn', 'small'],
                                title: 'Actions'|t('app'),
                                data: {
                                    'disclosure-trigger': true,
                                },
                            },
                        }) }}
                        {{ tag('a', {
                            class: ['move', 'icon'],
                            title: 'Reorder'|t('app'),
                            aria: {label: 'Reorder'|t('app')},
                            tabindex: '-1',
                        }) }}
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>
{% endblock %}


{% js %}
    Craft.routes.tokens = {
        {% for name, pattern in tokens %}
            {% if not loop.first %},{% endif %}
            "{{ name|e('js') }}": "{{ pattern|e('js') }}"
        {% endfor %}
    };
{% endjs %}