section.custom-fields-table.basic-table
    div.project-values-title
        h2 {{ customFieldSectionTitle | translate }}
        a.button.button-gray.show-add-new.js-add-custom-field-button(href="", title="{{ customFieldButtonTitle | translate }}")
            span(translate="ADMIN.CUSTOM_ATTRIBUTES.ADD")

    div.table-header
        div.row
            div.custom-name
                span(translate="COMMON.FIELDS.NAME")
            div.custom-description
                span(translate="COMMON.FIELDS.DESCRIPTION")
            div.custom-field-type
                span(translate="COMMON.FIELDS.TYPE")
            div.custom-options

    div.table-body
        div.js-sortable
            form.js-form(ng-repeat="attr in customAttributes track by attr.id", tg-bind-scope)
                div.row.single-custom-field.js-view-custom-field
                    span.icon.icon-drag-v
                    div.custom-name
                        span {{ attr.name }}
                    div.custom-description
                        span {{ attr.description }}
                    div.custom-field-type
                        span(translate="ADMIN.CUSTOM_FIELDS.FIELD_TYPE_{{ attr.field_type }}")
                    div.custom-options
                        div.custom-options-wrapper
                            a.js-edit-custom-field-button.icon.icon-edit(href="", title="{{'ADMIN.CUSTOM_ATTRIBUTES.EDIT' | translate}}")
                            a.js-delete-custom-field-button.icon.icon-delete(href="", title="{{'ADMIN.CUSTOM_ATTRIBUTES.DELETE' | translate}}")

                div.row.single-custom-field.js-edit-custom-field.hidden
                    fieldset.custom-name
                        input(type="text", name="name", placeholder="{{'ADMIN.CUSTOM_ATTRIBUTES.SET_FIELD_NAME' | translate}}",
                              ng-model="attr.name", data-required="true" data-maxlength="64")
                    fieldset.custom-description
                        input(type="text", name="description", placeholder="{{'ADMIN.CUSTOM_ATTRIBUTES.SET_FIELD_DESCRIPTION' | translate}}",
                              ng-model="attr.description")
                    fieldset.custom-field-type
                        select(ng-model="attr.field_type",
                               ng-options="e.id as e.name | translate for e in [{'id':'TEXT', 'name': 'ADMIN.CUSTOM_FIELDS.FIELD_TYPE_TEXT'},{'id':'MULTI', 'name': 'ADMIN.CUSTOM_FIELDS.FIELD_TYPE_MULTI'}]")

                    fieldset.custom-options
                        div.custom-options-wrapper
                            a.js-update-custom-field-button.icon.icon-floppy(href="", title="{{'ADMIN.CUSTOM_ATTRIBUTES.ACTION_UPDATE' | translate}}")
                            a.js-cancel-edit-custom-field-button.icon.icon-delete(href="", title="{{'ADMIN.CUSTOM_ATTRIBUTES.ACTION_CANCEL_EDITION' | translate}}")

        form.row.single-custom-field.js-new-custom-field.hidden
            fieldset.custom-name
                input(type="text", name="name", placeholder="{{'ADMIN.CUSTOM_ATTRIBUTES.SET_FIELD_NAME' | translate}}",
                      ng-model="newAttr.name", data-required="true", data-maxlength="64")
            fieldset.custom-description
                input(type="text", name="description", placeholder="{{'ADMIN.CUSTOM_ATTRIBUTES.SET_FIELD_DESCRIPTION' | translate}}",
                      ng-model="newAttr.description")
            fieldset.custom-field-type
                select(ng-model="newAttr.field_type",
                      ng-options="e.id as translate(e.name) for e in [{'id':'TEXT', 'name': 'ADMIN.CUSTOM_FIELDS.FIELD_TYPE_TEXT'},{'id':'MULTI', 'name': 'ADMIN.CUSTOM_FIELDS.FIELD_TYPE_MULTI'}]")
            fieldset.custom-options
                div.custom-options-wrapper
                    a.js-create-custom-field-button.icon.icon-floppy(href="", title="{{'ADMIN.CUSTOM_ATTRIBUTES.SAVE_TITLE' | translate}}")
                    a.js-cancel-new-custom-field-button.icon.icon-delete(href="", title="{{'ADMIN.CUSTOM_ATTRIBUTES.CANCEL_TITLE' | translate}}")