<div class="detail-view fullheight" data-ng-controller="ItemDetailCtrl as item">
    <div class="btn-toolbar">

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

                <h3 data-in-place-edit
                    data-ipe-key="'name'"
                    data-ipe-value="item.item.name"
                    data-api-name="'item'"
                    data-api-id="item.item.id"
                    data-ipe-name="'items.name'|translate"></h3>

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

                <div class="slideanim-buttons slideanim3-buttons btn-group-sm pull-right">
                    <button class="btn btn-link" data-ng-click="item.setPage(1)" data-ng-class="{active: item.showPage==1}"><i class="md md-lg md-comment"></i><span class="hidden-xs hidden-sm"> {{'global.description' | translate}}</span></button><button class="btn btn-link" data-ng-click="item.setPage(2)" data-ng-class="{active: item.showPage==2}"><i class="md md-lg md-payment"></i><span class="hidden-xs hidden-sm"> {{'items.pricing' | translate}}</span></button><button class="btn btn-link" data-ng-click="item.setPage(3)" data-ng-class="{active: item.showPage==3}"><i class="md md-lg md-link"></i><span class="hidden-xs hidden-sm"> {{'items.connections'|translate}}</span></button>               </div>
            </div>
        </div>
    </div>
    <div class="detail-inner nopadding">


        <div class="slideanim3 fullheight" data-ng-class="{panel2: item.showPage==2, panel3: item.showPage==3}">

            <div class="slideanim-item fullheight">

                <div class="ipe-wysiwyg-fullheight">
                    <p data-in-place-edit
                       data-ipe-key="'description'"
                       data-ipe-value="item.item.description"
                       data-ipe-type="'wysiwyg'"
                       data-api-name="'item'"
                       data-api-id="item.item.id"
                       data-ipe-name="'global.description'|translate"></p>
                </div>

            </div>

            <div class="slideanim-item fullheight scroll-y">
                <div class="detail-block">
                    <div class="row detail-block">
                        <div class="col-sm-2 col-md-1"><div class="sidelabel"><i class="md md-attach-money"></i></div></div>
                        <div class="col-sm-10 col-md-11">
                            <div class="listinfo-row">
                                <div class="row">
                                    <div class="col-xs-8">
                                        <span data-in-place-edit
                                              data-ipe-key="'hourlyrates'"
                                              data-ipe-value="item.item.hourlyrates"
                                              data-api-name="'item'"
                                              data-api-id="item.item.id"
                                              data-ipe-name="'items.hourlyRates'|translate"
                                              data-ipe-type="'price'"
                                              data-output-value="item.item.hourlyrates|twoDecimals"></span> {{'items.hours'|translate}} à <span data-in-place-edit
                                                                                                                                        data-ipe-type="'price'"
                                                                                                                                        data-ipe-value="item.item.hourlyrate"
                                                                                                                                        data-ipe-key="'hourlyrate'"
                                                                                                                                        data-api-name="'item'"
                                                                                                                                        data-api-id="item.item.id"
                                                                                                                                        data-ipe-name="'items.hourlyRate'|translate"
                                                                                                                                        data-output-value="item.item.hourlyrate|price"></span>
                                        <br />
                                        <span class="less-important">{{'items.hourlyRate'|translate}}</span>
                                    </div>
                                    <div class="col-xs-4">
                                        <a class="listinfo-action listinfo-action-icon listinfo-action-info"
                                           data-ng-if="item.item.userate == 1"
                                           title="{{'items.currentUseRate' | translate}}">
                                            <i class="md md-star"></i>
                                        </a>
                                        <a class="listinfo-action listinfo-action-icon"
                                           data-ng-if="item.item.userate != 1"
                                           data-ng-click="item.changeUseRate(1)"
                                           title="{{'items.changeUseRate' | translate}}"
                                           data-ng-mouseenter="hoverHourly = true"
                                           data-ng-mouseleave="hoverHourly = false"
                                           data-ng-class="{'listinfo-action-info':hoverHourly}">
                                            <i class="md" data-ng-class="{'md-star info':hoverHourly,'md-star-outline':!hoverHourly}"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="listinfo-row">
                                <div class="row">
                                    <div class="col-xs-8">
                                        <span data-in-place-edit
                                              data-ipe-key="'dailyrates'"
                                              data-ipe-value="item.item.dailyrates"
                                              data-api-name="'item'"
                                              data-api-id="item.item.id"
                                              data-ipe-name="'items.dailyRates'|translate"
                                              data-ipe-type="'price'"
                                              data-output-value="item.item.dailyrates|twoDecimals"></span> {{'items.days'|translate}} à <span data-in-place-edit
                                                                                                                                      data-ipe-type="'price'"
                                                                                                                                      data-ipe-value="item.item.dailyrate"
                                                                                                                                      data-ipe-key="'dailyrate'"
                                                                                                                                      data-api-name="'item'"
                                                                                                                                      data-api-id="item.item.id"
                                                                                                                                      data-ipe-name="'items.dailyRate'|translate"
                                                                                                                                      data-output-value="item.item.dailyrate|price"></span>
                                        <br />
                                        <span class="less-important">{{'items.dailyRate'|translate}}</span>
                                    </div>
                                    <div class="col-xs-4">
                                        <a class="listinfo-action listinfo-action-icon listinfo-action-info"
                                           data-ng-if="item.item.userate == 2"
                                           title="{{'items.currentUseRate' | translate}}">
                                            <i class="md md-star"></i>
                                        </a>
                                        <a class="listinfo-action listinfo-action-icon"
                                           data-ng-if="item.item.userate != 2"
                                           data-ng-click="item.changeUseRate(2)"
                                           title="{{'items.changeUseRate' | translate}}"
                                           data-ng-mouseenter="hoverDaily = true"
                                           data-ng-mouseleave="hoverDaily = false"
                                           data-ng-class="{'listinfo-action-info':hoverDaily}">
                                            <i class="md" data-ng-class="{'md-star info':hoverDaily,'md-star-outline':!hoverDaily}"></i>
                                        </a>
                                    </div>
                                </div>


                            </div>
                            <div class="listinfo-row">
                                <div class="row">
                                    <div class="col-xs-8">
                                        <span data-in-place-edit
                                              data-ipe-type="'price'"
                                              data-ipe-value="item.item.fixedrate"
                                              data-ipe-key="'fixedrate'"
                                              data-api-name="'item'"
                                              data-api-id="item.item.id"
                                              data-ipe-name="'items.fixedRate'|translate"
                                              data-output-value="item.item.fixedrate|price"></span>
                                        <br />
                                        <span class="less-important">{{'items.fixedRate'|translate}}</span>
                                    </div>
                                    <div class="col-xs-4">
                                        <a class="listinfo-action listinfo-action-icon listinfo-action-info"
                                           data-ng-if="item.item.userate == 0"
                                           title="{{'items.currentUseRate' | translate}}">
                                            <i class="md md-star"></i>
                                        </a>
                                        <a class="listinfo-action listinfo-action-icon"
                                           data-ng-if="item.item.userate != 0"
                                           data-ng-click="item.changeUseRate(0)"
                                           title="{{'items.changeUseRate' | translate}}"
                                           data-ng-mouseenter="hoverFixed = true"
                                           data-ng-mouseleave="hoverFixed = false"
                                           data-ng-class="{'listinfo-action-info':hoverFixed}">
                                            <i class="md" data-ng-class="{'md-star info':hoverFixed,'md-star-outline':!hoverFixed}"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="detail-block">
                    <div class="row">
                        <div class="col-sm-2 col-md-1"><div class="sidelabel"><i class="md md-access-alarm"></i></div></div>
                        <div class="col-sm-10 col-md-11">
                            <div data-ng-repeat="time in item.time.times" class="listinfo-row">
                                <div data-ng-if="time.end">
                                    <div class="row">
                                        <div class="col-xs-8">
                                            {{time.username}} {{'items.workedOn'|translate}}<br />
                                            <span class="less-important"><span data-in-place-edit
                                                                               data-ipe-key="'start'"
                                                                               data-ipe-value="time.start"
                                                                               data-ipe-type="'datetime'"
                                                                               data-api-name="'time'"
                                                                               data-api-id="time.id"
                                                                               data-ipe-name="'time.start'|translate"
                                                                               data-ipe-deletable="false"
                                                                               data-ipe-max-datetime="{{time.end}}"
                                                                               data-ipe-callback="item.getTime()"
                                                                               data-output-value="time.start|amaDate:'dd.MM.yyyy HH:mm'"></span> - <span data-in-place-edit
                                                                                                                                                         data-ipe-key="'end'"
                                                                                                                                                         data-ipe-value="time.end"
                                                                                                                                                         data-ipe-type="'datetime'"
                                                                                                                                                         data-ipe-min-datetime="{{time.start}}"
                                                                                                                                                         data-api-name="'time'"
                                                                                                                                                         data-api-id="time.id"
                                                                                                                                                         data-ipe-name="'time.end'|translate"
                                                                                                                                                         data-ipe-deletable="false"
                                                                                                                                                         data-ipe-callback="item.getTime()"
                                                                                                                                                         data-output-value="time.end|amaDate:'dd.MM.yyyy HH:mm'"></span></span>
                                        </div>
                                        <div class="col-xs-4">
                                            <a class="listinfo-action listinfo-action-danger listinfo-action-icon" data-ng-click="item.deleteTime(time.id)"><i class="md md-delete"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div data-ng-if="!time.end">
                                    <div class="row">
                                        <div class="col-xs-8">{{time.username}} {{'items.workingOn'|translate}}<br />
                                            <span class="less-important">{{'items.workingOnSince'|translate}} {{time.start|amaDate:'dd.MM.yyyy HH:mm'}}</span>
                                        </div>
                                        <div class="col-xs-4">
                                            <a class="listinfo-action listinfo-action-warning listinfo-action-icon" data-ng-if="!time.end" data-ng-click="item.stopTime(time.id)"><i class="md md-stop"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="listinfo-row">
                                <div class="row">
                                    <div class="col-xs-8">
                                        {{'items.newTime'|translate}}
                                    </div>
                                    <div class="col-xs-4">
                                        <a class="listinfo-action listinfo-action-success listinfo-action-icon" data-ng-click="item.startTime()"><i class="md md-play-arrow"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="listinfo-row">
                                {{'items.totalTime'|translate}}: {{item.time.totaltime||0}} {{'items.hours'|translate}} <a data-ng-if="item.time.totaltime" data-ng-click="item.setTotaltimeAsTime()" class="btn btn-link btn-icon-round btn-success" title="{{'items.totaltimeAsHourlyRates'|translate}}"><i class="md md-check"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="slideanim-item fullheight scroll-y">

                <h2>{{'items.thisitem'|translate}}</h2>
                <div class="row margin-bottom-lg">
                    <div class="col-sm-4">
                        <button class="btn btn-block btn-danger" data-ng-click="item.deleteItem()"><i class="md md-lg md-delete"></i> {{'items.deleteItem'|translate}}</button>
                    </div>
                    <div class="col-sm-4">
                        <button class="btn btn-block btn-warning" data-ng-click="item.removeItemFromDocument()"><i class="md md-lg md-remove-circle-outline"></i> {{'items.removeItem'|translate}}</button>
                    </div>
                    <div class="col-sm-4">
                        <button class="btn btn-block btn-success" data-ng-click="item.moveItem()">{{'items.moveItem'|translate}} <i class="md md-lg md-forward"></i></button>
                    </div>
                </div>
                <h3>{{'items.alsoIn'|translate}}</h3>
                <div data-ng-if="item.isConnected" class="margin-bottom">
                    <div data-ng-if="item.connections.offer.id" class="listinfo-row listinfo-link" data-ui-sref="app.offerDetail({id:item.connections.offer.id})">
                        <div class="row">
                            <div class="col-fixedwidth-46">
                                <i class="icon-docstate icon-docstate-{{item.connections.offer.state}}"></i>
                            </div>
                            <div class="col-beneath-fixedwidth-46">
                                {{item.connections.offer.name}}<br/>
                                <span class="less-important">{{'offer.name'|translate}} - {{item.connections.offer.refnumber}}</span>
                            </div>
                        </div>
                    </div>
                    <div data-ng-if="item.connections.contract.id" class="listinfo-row listinfo-link" data-ui-sref="app.contractDetail({id:item.connections.contract.id})">
                        <div class="row">
                            <div class="col-fixedwidth-46">
                                <i class="icon-docstate icon-docstate-contract"></i>
                            </div>
                            <div class="col-beneath-fixedwidth-46">
                                {{item.connections.contract.name}}<br/>
                                <span class="less-important">{{'contract.name'|translate}} - {{item.connections.contract.refnumber}}</span>
                            </div>
                        </div>
                    </div>
                    <div data-ng-if="item.connections.todo.id" class="listinfo-row listinfo-link" data-ui-sref="app.todoDetail({id:item.connections.todo.id})">
                        <div class="row">
                            <div class="col-fixedwidth-46">
                                <i class="icon-docstate icon-docstate-{{item.connections.todo.state}} icon-todostate"></i>
                            </div>
                            <div class="col-beneath-fixedwidth-46">
                                {{item.connections.todo.name}}<br/>
                                <span class="less-important">{{'todo.name'|translate}}<span data-ng-if="item.conenctions.todo.due"> - {{item.connections.todo.due|amaDate:'dd.MM.yyyy'}}</span></span>
                            </div>
                        </div>
                    </div>
                    <div data-ng-if="item.connections.acceptance.id" class="listinfo-row listinfo-link" data-ui-sref="app.contractDetail({id:item.connections.acceptance.id})">
                        <div class="row">
                            <div class="col-fixedwidth-46">
                                <i class="icon-docstate icon-docstate-{{item.connections.acceptance.state}}"></i>
                            </div>
                            <div class="col-beneath-fixedwidth-46">
                                {{item.connections.acceptance.name}}<br/>
                                <span class="less-important">{{'acceptance.name'|translate}} - {{item.connections.acceptance.refnumber}}</span>
                            </div>
                        </div>
                    </div>
                    <div data-ng-if="item.connections.invoice.id" class="listinfo-row listinfo-link" data-ui-sref="app.invoiceDetail({id:item.connections.invoice.id})">
                        <div class="row">
                            <div class="col-fixedwidth-46">
                                <i class="icon-docstate icon-docstate-{{item.connections.invoice.state}}"></i>
                            </div>
                            <div class="col-beneath-fixedwidth-46">
                                {{item.connections.invoice.name}}<br/>
                                <span class="less-important">{{'invoice.name'|translate}} - {{item.connections.invoice.refnumber}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="margin-bottom" data-ng-if="!item.isConnected">{{'items.alsoInNone'|translate}}</p>


            </div>



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