section.project-us-status

    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.colors-table
        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="ADMIN.US_STATUS.IS_CLOSED_COLUMN")
                div.is-archived-column(translate="ADMIN.US_STATUS.IS_ARCHIVED_COLUMN")
                div.status-wip-limit(translate="ADMIN.US_STATUS.WIP_LIMIT_COLUMN")
                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
                            tg-svg(svg-icon="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
                                tg-svg(
                                    ng-show="value.is_closed",
                                    svg-icon="icon-check"
                                )

                            div.is-archived-column
                                tg-svg(
                                    ng-show="value.is_archived",
                                    svg-icon="icon-check"
                                )

                            div.status-wip-limit
                                span(ng-hide="value.is_archived") {{ value.wip_limit }}

                            div.options-column
                                a.edit-value(href="")
                                    tg-svg(
                                        title="{{'ADMIN.COMMON.TITLE_ACTION_EDIT_VALUE' | translate}}",
                                        svg-icon="icon-edit"
                                    )
                                a.delete-value(href="")
                                    tg-svg(
                                        title="{{'ADMIN.COMMON.TITLE_ACTION_DELETE_VALUE' | translate}}",
                                        svg-icon="icon-trash"
                                    )

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


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

                            .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'}]"
                                )

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

                            .status-wip-limit
                                input(
                                    name="wip_limit"
                                    type="number"
                                    ng-hide="value.is_archived"
                                    ng-model="value.wip_limit"
                                    data-type="digits"
                                    placeholder="{{'ADMIN.US_STATUS.WIP_LIMIT_COLUMN' | translate}}"
                                )

                            .options-column
                                a.save.e2e-save(href="", title="{{'COMMON.SAVE' | translate}}")
                                    tg-svg(svg-icon="icon-save")
                            a.cancel(href="", title="{{'COMMON.CANCEL' | translate}}")
                                tg-svg(svg-icon="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"
                            ng-model="newValue.name"
                            data-required="true"
                            data-maxlength="255"
                            placeholder="{{'ADMIN.US_STATUS.PLACEHOLDER_WRITE_NAME' | translate}}"
                        )

                    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.is-archived-column
                        select(
                            name="is_archived"
                            ng-model="newValue.is_archived"
                            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.status-wip-limit
                        input(
                            name="wip_limit"
                            type="number"
                            ng-hide="newValue.is_archived"
                            ng-model="newValue.wip_limit"
                            data-type="digits"
                            placeholder="{{'ADMIN.US_STATUS.WIP_LIMIT_COLUMN' | translate}}"
                        )

                    div.options-column
                        a.add-new.e2e-save(href="", title="{{'COMMON.ADD' | translate}}")
                            tg-svg(svg-icon="icon-save")

                        a.delete-new(href="", title="{{'COMMON.CANCEL' | translate}}")
                            tg-svg(svg-icon="icon-trash")