{% extends "_layouts/cp" %}

{% import "_includes/forms" as forms %}

{% includeCssResource 'fieldmanager/css/fieldmanager.css' %}
{% includeJsResource 'fieldmanager/js/fieldmanager.js' %}

{% set title = 'Field Manager' %}

{% set tabs = {
    fields: { label: "Fields"|t, url: url('fieldmanager') },
    import: { label: "Import"|t, url: url('fieldmanager/import') },
} %}

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

{% set sidebar %}
    <nav class="sidebar-nav">
        <ul>
            <li class="heading"><span>{{ 'Field Groups'|t }}</span></li>
            <li class="active"><a href="#" data-groupid="all">{{ 'All'|t }}</a></li>
            {% for group in groups %}
                <li><a href="#" data-groupid="{{ group.id }}">{{ group.name }}</a></li>
            {% endfor %}
        </ul>
    </nav>
{% endset %}

{% set content %}

<form method="POST" accept-charset="UTF-8">
    <input type="hidden" name="action" value="fieldManager/export">
    {{ getCsrfInput() }}

    <table id="fieldmanager" class="data fullwidth collapsible">
        <thead>
            <th>{{ "Group Name"|t }}</th>
            <th>{{ "Handle"|t }}</th>
            <th>{{ "Type"|t }}</th>
            <th></th>
            <th></th>
        </thead>
        <tbody>
            {% for group in groups %}
                {% set fields = craft.fields.getFieldsByGroupId(group.id) %}

                <tr class="group" data-groupid="{{ group.id }}">
                    <th scope="row">
                        {% set label %}<a class="go" href="{{ url('settings/fields/' ~ group.id) }}">{{ group.name }}</a>{% endset %}
                        {{ forms.checkboxField({
                            label: label
                        }) }}
                    </th>
                    <td></td>
                    <td></td>
                    <td class="thin"><div class="btn small clone-btn element">Clone Group</div></td>
                    <td class="thin delete-row"><a class="delete-group icon" title="{{ 'Delete'|t }}" role="button"></a></td>
                </tr>

                {% for field in fields %}
                    <tr class="field" data-id="{{ field.id }}" data-groupid="{{ group.id }}" data-name="{{ field.name }}">
                        <th scope="row" class="name">
                            {% set label %}<a class="go" href="{{ url('settings/fields/edit/' ~ field.id) }}">{{ field.name }}</a>{% endset %}
                            {{ forms.checkboxField({
                                name: 'selectedFields[]',
                                value: field.id,
                                label: label
                            }) }}
                        </td>
                        <td><code>{{ field.handle }}</code></td>
                        <td>{{ field.type }}</td>
                        <td class="thin"><div class="btn small clone-btn element">Clone</div></td>
                        <td class="thin delete-row"><a class="delete icon" title="{{ 'Delete'|t }}" role="button"></a></td>
                    </tr>
                {% endfor %}
            {% endfor %}
        </tbody>
    </table>

    <hr>

    <div class="buttons">
        <input type="submit" class="btn submit disabled export-btn" disabled value="Export selected">
    </div>
</form>

{% endset %}

{% set js %}
    new Craft.AdminTable({
        tableSelector: '#fieldmanager',
        noObjectsSelector: '#nofields',
        deleteAction: 'fields/deleteField'
    });
{% endset %}
{% includeJs js %}