<div class="row detail fullheight" data-ng-controller="TodoDetailCtrl as todo">



    <div class="col-lg-8 col-md-8 col-sm-7 fullheight">

        <div class="row detail-top-bar">
            <div class="col-sm-12 fullheight">
                <div class="panel panel-default fullheight shadow-0 bg-primary">
                    <div class="panel-body">

                        <h1>
                            <span data-in-place-edit
                                  data-api-id="todo.todo.id"
                                  data-api-name="'todo'"
                                  data-ipe-key="'name'"
                                  data-ipe-value="todo.todo.name"
                                  data-ipe-name="'global.name'|translate"
                                  data-ipe-deletable="false"
                                    ></span>
                        </h1>
                        <span data-ng-if="todo.todo.items_done < todo.todo.items_total">{{'todo.someopen' | translate}}</span>
                        <span data-ng-if="todo.todo.items_done == todo.todo.items_total">{{'todo.alldone' | translate}}</span>
                        <div class="detail-inline">
                            <i class="md md-folder"></i> <a data-ui-sref="app.projectDetail({id: todo.todo.project.id})">{{todo.todo.project.name}}</a>
                        </div>
                        <div class="detail-inline detail-inline-date">
                            <i class="md md-schedule"></i>
                            <div class="date-container">
                                <span data-in-place-edit
                                      data-api-id="todo.todo.id"
                                      data-api-name="'todo'"
                                      data-ipe-key="'due'"
                                      data-ipe-value="todo.todo.due"
                                      data-ipe-name="'todo.dueDate'|translate"
                                      data-ipe-deletable="true"
                                      data-ipe-type="'date'"
                                      data-output-value="todo.todo.due|amaDate:'dd.MM.yyyy'"
                                        ></span>
                            </div>
                        </div>

                        <div class="delete-document">
                            <button class="btn btn-warning btn-icon-round btn-link" title="{{'global.transformTo'|translate}}" data-ng-click="todo.nextStep()"><i class="md md-content-copy"></i></button>
                            <button class="btn btn-danger btn-icon-round btn-link" title="{{'todo.deleteTodo'|translate}}" data-ng-click="todo.deleteTodo()"><i class="md md-delete"></i></button>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="under-detail-top-bar next-fullheight">
            <div data-master-detail
                 data-master-list="todo.todo.items"
                 data-master-tpl="'templates/pages/items/masterTodo.html'"
                 data-detail-tpl="'templates/pages/items/detail.html'"
                 data-detail="todo.todo.items[0]"
                 data-master-loaded="todo.loaded"></div>
        </div>

    </div>


    <div class="col-lg-4 col-md-4 col-sm-5 fullheight">

        <div class="panel panel-default fixedheight-320 shadow-1">
            <div class="panel-body">

                <div class="margin-bottom-lg" data-todo-stats="todo.todo"></div>

                <div class="varcheck" data-ng-class="{true: 'var-is-true', false: 'var-is-false'}[todo.todo.items_done != todo.todo.items_total]">
                    <button class="btn btn-block btn-success varcheck-if-false" data-ng-click="todo.nextStep()">
                        {{'todo.ready'|translate}}
                    </button>
                    <button class="btn btn-block btn-info disabled varcheck-if-true">
                        {{'todo.someopen'|translate}}
                    </button>
                </div>
            </div>
        </div>


        <div class="panel panel-default under-fixedheight-320">
            <div class="panel-heading">
                <h3>{{'clients.client' | translate}}</h3>
            </div>
            <div class="panel-body scroll-y">

                <div data-client-box="todo.todo.project.client"></div>

            </div>
        </div>

    </div>


</div>