section.colors-table.admin-status-table
    div.project-values-title
        h2 {{ sectionName | translate }}
        a.button.button-gray.show-add-new(href="", title="{{'ADMIN.US_STATUS.ACTION_ADD_STATUS' | translate}}")
            span(translate="ADMIN.US_STATUS.ACTION_ADD_STATUS")

    div.table-header
        div.row
            div.color-column(translate="COMMON.FIELDS.COLOR")
            div.status-name(translate="COMMON.FIELDS.NAME")
            div.status-slug(translate="COMMON.FIELDS.SLUG")
            div.is-closed-column(translate="COMMON.FIELDS.IS_CLOSED")
            div.options-column

    div.table-main
        div.sortable
            div(ng-repeat="value in values", tg-bind-scope)
                form(tg-bind-scope)
                    div.row.table-main.visualization
                        svg.icon.icon-drag
                            use(xlink:href="#icon-drag")
                        div.color-column
                            div.current-color(ng-style="{background: value.color}")

                        div.status-name
                            span {{ value.name }}

                        div.status-slug
                            span {{ value.slug }}

                        div.is-closed-column
                            svg.icon.icon-check(ng-show="value.is_closed")
                                use(xlink:href="#icon-check")

                        div.options-column
                            svg.edit-value.icon.icon-edit(title="{{'ADMIN.COMMON.TITLE_ACTION_EDIT_VALUE' | translate}}")
                                use(xlink:href="#icon-edit")
                            svg.delete-value.icon.icon-trash(title="{{'ADMIN.COMMON.TITLE_ACTION_DELETE_VALUE' | translate}}")
                                use(xlink:href="#icon-trash")

                    div.row.table-main.edition.hidden
                        div.color-column(
                            tg-color-selection
                            ng-model="value"
                        )
                            div.current-color(ng-style="{background: value.color}")
                            include ../../components/select-color

                        div.status-name
                            input(
                                name="name"
                                type="text"
                                placeholder="{{'ADMIN.STATUS.PLACEHOLDER_WRITE_STATUS_NAME' | translate}}"
                                ng-model="value.name"
                                data-required="true"
                                data-maxlength="255"
                            )

                        div.is-closed-column
                            select(
                                name="is_closed"
                                ng-model="value.is_closed"
                                data-required="true"
                                ng-options="e.id as e.name | translate for e in [{'id':true, 'name':'COMMON.YES'},{'id':false, 'name': 'COMMON.NO'}]")

                        div.options-column
                            svg.save.icon.icon-save(title="{{'COMMON.SAVE' | translate}}")
                                use(xlink:href="#icon-save")
                        svg.cancel.icon.icon-close(title="{{'COMMON.CANCEL' | translate}}")
                            use(xlink:href="#icon-close")

        form
            div.row.table-main.new-value.hidden
                div.color-column(
                    tg-color-selection
                    ng-model="newValue"
                )
                    div.current-color(ng-style="{background: newValue.color}")
                    include ../../components/select-color

                div.status-name
                    input(
                        name="name"
                        type="text"
                        placeholder="{{'ADMIN.STATUS.PLACEHOLDER_WRITE_STATUS_NAME' | translate}}"
                        ng-model="newValue.name"
                        data-required="true"
                        data-maxlength="255"
                    )

                div.is-closed-column
                    select(
                        name="is_closed"
                        ng-model="newValue.is_closed"
                        data-required="true"
                        ng-options="e.id as e.name | translate for e in [{'id':true, 'name': 'COMMON.YES'},{'id':false, 'name': 'COMMON.NO'}]"
                    )

                div.options-column
                    svg.add-new.icon.icon-save(title="{{'COMMON.ADD' | translate}}")
                        use(xlink:href="#icon-save")
                    svg.delete-new.icon.icon-close(title="{{'COMMON.CANCEL' | translate}}")
                        use(xlink:href="#icon-close")