section.colors-table
    div.table-header
        div.row
            div.color-column Color
            div.status-name Name
            div.is-closed-column Is closed?
            div.options-column

    div.table-main
        form.sortable
            div(ng-repeat="value in values")
                div.row.table-main.visualization
                    span.icon.icon-drag-v
                    div.color-column
                        div.current-color(style="background: {{ value.color }}")
                    div.status-name
                        span {{ value.name }}
                    div.is-closed-column
                        div.icon.icon-check-square(ng-show="value.is_closed")
                    div.options-column
                        a.edit-value.icon.icon-edit(href="", title="Edit value")
                        a.delete-value.icon.icon-delete(href="", title="Delete value")

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

                    div.status-name
                        input(name="name", type="text", placeholder="Write a name for the new status", ng-model="value.name", data-required="true", data-maxlength="255")
                    div.is-closed-column
                        select(name="is_closed", ng-model="value.is_closed", ng-options="e.id as e.name for e in [{'id':true, 'name':'Yes'},{'id':false, 'name': 'No'}]", data-required="true")
                    div.options-column
                        a.save.icon.icon-floppy(href="", title="Add")
                        a.cancel.icon.icon-delete(href="", title="Delete")

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

                div.status-name
                    input(name="name", type="text", placeholder="Write a name for the new status", ng-model="newValue.name", data-required="true", data-maxlength="255")
                div.is-closed-column
                    select(name="is_closed", ng-model="newValue.is_closed", ng-options="e.id as e.name for e in [{'id':true, 'name':'Yes'},{'id':false, 'name': 'No'}]", data-required="true")
                div.options-column
                    a.add-new.icon.icon-floppy(href="", title="Add")
                    a.delete-new.icon.icon-delete(href="", title="Delete")
