{% extends "freeform/_layouts/main" %}
{% hook "freeform.prepareCpTemplate" %}

{% set selectedSubnavItem = "fields" %}

{% block actionButton %}

    {% if currentUser.can("freeform-fieldsManage") %}
        <a class="btn submit add icon" href="{{ url('freeform/fields/new/') }}">
            {{ "New Field"|t('freeform') }}
        </a>
    {% endif %}

{% endblock %}

{% set title = "Fields"|t('freeform') %}

{% set content %}
    <div id="nofields"{% if fields %} class="hidden"{% endif %}>
        <p>{{ "No fields found"|t('freeform') }}</p>
    </div>

    {% if fields|length %}
        <table id="fields" class="data fullwidth collapsible">
            <thead>
            <th scope="col">{{ "Label"|t('freeform') }}</th>
            <th scope="col">{{ "Handle"|t('freeform') }}</th>
            <th scope="col">{{ "Type"|t('freeform') }}</th>
            <td class="thin"></td>
            </thead>
            <tbody>
            {% for field in fields %}
                {% if fieldTypes[field.type] is defined %}
                    <tr data-id="{{ field.id }}" data-name="{{ field.label|t('freeform') }}">
                        <th scope="row" data-title="{{ 'Label'|t('freeform') }}">
                            {% if currentUser.can("freeform-fieldsManage") %}
                                <a href="{{ url('freeform/fields/' ~ field.id) }}">
                                    {{ field.label }}
                                </a>
                            {% else %}
                                {{ field.label }}
                            {% endif %}
                        </th>
                        <td data-title="{{ 'Handle'|t('freeform') }}">
                            <code title="{{ field.handle }}">
                                {{ field.handle|truncater(50) }}
                            </code>
                        </td>
                        <td style="width: 50%;">
                            {{ fieldTypes[field.type] }}
                        </td>
                        <td class="thin">
                            <div class="action-buttons">
                                {% if currentUser.can("freeform-fieldsManage") %}
                                    <form method="post" action="{{ url("freeform/fields/duplicate") }}">
                                        {{ csrfInput() }}
                                        <input type="hidden" name="id" value="{{ field.id }}" />
                                        <a class="clone icon" title="{{ 'Clone'|t('freeform') }}" role="button"></a>
                                    </form>
                                    <a class="delete icon" title="{{ 'Delete'|t('freeform') }}" role="button"></a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% endif %}
            {% endfor %}
            </tbody>
        </table>
    {% endif %}
{% endset %}


{% js %}
    var adminTable = new Craft.AdminTable({
    tableSelector: '#fields',
    noObjectsSelector: '#nofields',
    newObjectBtnSelector: '#newfieldcontainer',
    deleteAction: 'freeform/fields/delete',
    confirmDeleteMessage: '{{ "Are you sure you want to delete this field?"|t('freeform') }}'
    });

    $("a.clone.icon").click(function() {
        $(this).parents("form:first").submit();

        return false;
    });
{% endjs %}