{% requireAdmin %}

{% extends "_layouts/cp" %}
{% set title = "Fields"|t('app') %}

{% do view.registerAssetBundle("craft\\web\\assets\\fields\\FieldsAsset") %}
{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}

{% do view.registerTranslations('app', [
    "What do you want to name the group?",
    "Could not create the group:",
    "Could not create the group:",
    "Are you sure you want to delete this group and all its fields?",
    "Could not delete the group.",
    "Group renamed.",
    "Name",
    "Handle",
    "Type",
    "Group",
    "This field’s values are used as search keywords.",
    "This group doesn’t have any fields yet.",
    "No fields exist yet.",
]) %}

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

{% set groups = craft.app.fields.getAllGroups()|index('id') %}

{% if groupId is defined %}
    {% if groups[groupId] is not defined %}
        {% exit 404 %}
    {% endif %}

    {% set fields = groups[groupId].getFields() %}
    {% set emptyMessage = "This group doesn’t have any fields yet."|t('app') %}
{% else %}
    {% set emptyMessage = "No fields exist yet."|t('app') %}
    {% set fields = craft.app.fields.getAllFields() %}
{% endif %}


{% block actionButton %}
    {% if groups %}
        {% set newFieldUrl = url('settings/fields/new', (groupId is defined ? { groupId: groupId } : null)) %}
        <a href="{{ newFieldUrl }}" class="submit btn add icon">{{ "New field"|t('app') }}</a>
    {% endif %}
{% endblock %}


{% block sidebar %}
    <nav>
        <ul id="groups">
            <li><a href="{{ url('settings/fields') }}"{% if groupId is not defined %} class="sel"{% endif %}>{{ "All Fields"|t('app') }}</a></li>
            {% for group in groups %}
                <li><a href="{{ url('settings/fields/'~group.id) }}"{% if groupId is defined and group.id == groupId %} class="sel"{% endif %} data-id="{{ group.id }}">{{ group.name|t('site') }}</a></li>
            {% endfor %}
        </ul>
    </nav>

    <div class="buttons">
        <button type="button" id="newgroupbtn" class="btn add icon">{{ "New group"|t('app') }}</button>

        {% if groupId is defined %}
            <button type="button" id="groupsettingsbtn" class="btn settings icon menubtn" title="{{ 'Settings'|t('app') }}" aria-label="{{ 'Settings'|t('app') }}"></button>
            <div class="menu">
                <ul>
                    <li><a data-action="rename" role="button">{{ "Rename selected group"|t('app') }}</a></li>
                    <li><a data-action="delete" role="button">{{ "Delete selected group"|t('app') }}</a></li>
                </ul>
            </div>
        {% endif %}
    </div>
{% endblock %}


{% block content %}
    <div id="fields-vue-admin-table"></div>
{% endblock %}

{% set tableData = [] %}
{% for field in fields %}
    {% set fieldIsMissing = false %}

    {% if field is missing %}
        {% set fieldIsMissing = true %}
    {% endif %}

    {% set group = field.getGroup() %}

    {% set tableData = tableData|merge([{
        id: field.id,
        title: field.name|t('site'),
        translatable: field.getIsTranslatable() ? (field.getTranslationDescription() ?? 'This field is translatable.'|t('app')),
        searchable: field.searchable ? true : false,
        url: url('settings/fields/edit/' ~ field.id),
        handle: field.handle,
        type: {
            isMissing: fieldIsMissing,
            label: fieldIsMissing ? field.expectedType : field.displayName()
        },
        group: group ? group.name|t('site')|e : "<span class=\"error\">#{'(Ungrouped)'|t('app')}</span>",
    }]) %}
{% endfor %}

{% js %}
    var columns = [
        { name: '__slot:title', title: Craft.t('app', 'Name') },
        {
            name: 'searchable',
            titleClass: 'thin',
            callback: value => {
                if (!value) {
                    return null;
                }
                return `<div class="badge-icon" data-icon="search" title="${Craft.t('app', 'This field’s values are used as search keywords.')}" aria-label="${Craft.t('app', 'This field’s values are used as search keywords.')}" role="img"></div>`;
            }
        },
        {% if craft.app.isMultiSite %}
        {
            name: 'translatable',
            titleClass: 'thin',
            callback: value => {
                if (!value) {
                    return null;
                }
                return `<div class="badge-icon" data-icon="language" title="${value}" aria-label="${value}" role="img"></div>`;
            }
        },
        {% endif %}
        { name: '__slot:handle', title: Craft.t('app', 'Handle') },
        {
            name: 'type',
            title: Craft.t('app', 'Type'),
            callback: function(value) {
                if (value.isMissing) {
                    return '<span class="error">' + value.label + '</span>'
                }

                return value.label
            }
        },
    ];

    {% if groupId is not defined %}
        columns.push({
            name: 'group',
            title: Craft.t('app', 'Group'),
        })
    {% endif %}

    new Craft.VueAdminTable({
        columns: columns,
        container: '#fields-vue-admin-table',
        deleteAction: 'fields/delete-field',
        emptyMessage: Craft.t('app', '{{ emptyMessage }}'),
        tableData: {{ tableData|json_encode|raw }},
    });
{% endjs %}