{% requireAdmin %}

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

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

{% 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.",
]) %}

{% 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() %}
{% else %}
    {% 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">
        <div id="newgroupbtn" class="btn add icon">{{ "New group"|t('app') }}</div>

        {% if groupId is defined %}
            <div id="groupsettingsbtn" class="btn settings icon menubtn" title="{{ 'Settings' }}"></div>
            <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 %}
    <p id="nofields"{% if fields %} class="hidden"{% endif %}>
        {% if groupId is defined %}
            {{ "This group doesn’t have any fields yet."|t('app') }}
        {% else %}
            {{ "No fields exist yet."|t('app') }}
        {% endif %}
    </p>

    {% if fields %}
        <table id="fields" class="data fullwidth collapsible">
            <thead>
                <th scope="col">{{ "Name"|t('app') }}</th>
                <th scope="col">{{ "Handle"|t('app') }}</th>
                <th scope="col">{{ "Type"|t('app') }}</th>
                {% if groupId is not defined %}<th scope="col">{{ "Group"|t('app') }}</th>{% endif %}
                <td class="thin"></td>
            </thead>
            <tbody>
                {% for field in fields %}
                    <tr data-id="{{ field.id }}" data-name="{{ field.name|t('site') }}">
                        <th scope="row" data-title="{{ 'Name'|t('app') }}"><a href="{{ url('settings/fields/edit/' ~ field.id) }}">{{ field.name|t('site') }}</a>
                            {%- if field.required %} <span class="required"></span>{% endif -%}
                        </th>
                        <td data-title="{{ 'Handle'|t('app') }}"><code>{{ field.handle }}</code></td>
                        <td data-title="{{ 'Type'|t('app') }}">
                            {% if field is missing %}
                                <span class="error">{{ field.expectedType }}</span>
                            {% else %}
                                {{ field.displayName() }}
                            {% endif %}
                        </td>
                        {% if groupId is not defined %}<td data-title="{{ 'Group'|t('app') }}">{{ field.group.name|t('site') }}</td>{% endif %}
                        <td class="thin"><a class="delete icon" title="{{ 'Delete'|t('app') }}" role="button"></a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
{% endblock %}


{% js %}
    new Craft.AdminTable({
        tableSelector: '#fields',
        noItemsSelector: '#nofields',
        deleteAction: 'fields/delete-field'
    });
{% endjs %}
