<div class="detail-view fullheight" data-ng-controller="ClientDetailCtrl as client">


    <div class="btn-toolbar">

        <div class="row">
            <div class="col-sm-5 col-md-6">
                <h3>
                <span data-in-place-edit
                      data-api-id="client.client.id"
                      data-api-name="'client'"
                      data-ipe-key="'companyname'"
                      data-ipe-value="client.client.companyname"
                      data-ipe-name="'clients.companyName'|translate"></span>
                </h3>
            </div>
            <div class="col-sm-7 col-md-6">

                <div class="slideanim-buttons slideanim3-buttons btn-group-sm pull-right">
                    <button class="btn btn-link" data-ng-click="client.showPage = 1" data-ng-class="{active: client.showPage==1}"><i class="md md-lg md-people"></i> {{'clients.data' | translate}}</button>
                    <button class="btn btn-link" data-ng-click="client.showPage = 2" data-ng-class="{active: client.showPage==2}"><i class="md md-lg md-folder"></i> {{'projects.projects' | translate}}</button>
                    <button class="btn btn-link" data-ng-click="client.showPage = 3" data-ng-class="{active: client.showPage==3}"><i class="md md-lg md-add-circle-outline"></i> {{'projects.new'|translate}}</button>
                </div>

            </div>
        </div>


    </div>

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

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

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="row detail-block">
                                <div class="col-sm-2 col-md-1">
                                    <h3 class="sidelabel"><i class="md md-person"></i></h3>
                                </div>
                                <div class="col-sm-10 col-md-11">
                                    <div class="detail-value">
                                    <span data-in-place-edit
                                          data-ipe-key="'contact_gender'"
                                          data-ipe-value="client.client.contact_gender"
                                          data-api-name="'client'"
                                          data-api-id="client.client.id"
                                          data-ipe-type="'select'"
                                          data-ipe-select-options="client.genders"
                                          data-ipe-select-option-value="id"
                                          data-ipe-select-option-name="name"
                                          data-ipe-name="'clients.gender'|translate"
                                          data-output-value="client.client.contact_gender | gender"></span><br/>
                                    <span data-in-place-edit
                                          data-ipe-key="'contact_firstname'"
                                          data-ipe-value="client.client.contact_firstname"
                                          data-api-name="'client'"
                                          data-api-id="client.client.id"
                                          data-ipe-name="'clients.firstName'|translate"></span>
                                    <span data-in-place-edit
                                          data-ipe-key="'contact_lastname'"
                                          data-ipe-value="client.client.contact_lastname"
                                          data-api-name="'client'"
                                          data-api-id="client.client.id"
                                          data-ipe-name="'clients.lastName'|translate"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row detail-block">
                                <div class="col-sm-2 col-md-1">
                                    <h3 class="sidelabel"><i class="md md-place"></i></h3>
                                </div>
                                <div class="col-sm-10 col-md-11">
                                    <address class="detail-value">
                                        <strong><span data-in-place-edit
                                                      data-ipe-key="'companyname'"
                                                      data-ipe-value="client.client.companyname"
                                                      data-api-name="'client'"
                                                      data-api-id="client.client.id"
                                                      data-ipe-name="'clients.companyName'|translate"></span></strong><br>
                                <span data-in-place-edit
                                      data-ipe-key="'street_no'"
                                      data-ipe-value="client.client.street_no"
                                      data-api-name="'client'"
                                      data-api-id="client.client.id"
                                      data-ipe-name="'clients.streetNo'|translate"></span><br>
                                <span data-in-place-edit
                                      data-ipe-key="'additional'"
                                      data-ipe-value="client.client.additional"
                                      data-api-name="'client'"
                                      data-api-id="client.client.id"
                                      data-ipe-name="'clients.additional'|translate"></span><br>
                                <span data-in-place-edit
                                      data-ipe-key="'zip'"
                                      data-ipe-value="client.client.zip"
                                      data-api-name="'client'"
                                      data-api-id="client.client.id"
                                      data-ipe-name="'clients.zip'|translate"></span> <span data-in-place-edit
                                                                                            data-ipe-key="'city'"
                                                                                            data-ipe-value="client.client.city"
                                                                                            data-api-name="'client'"
                                                                                            data-api-id="client.client.id"
                                                                                            data-ipe-name="'clients.city'|translate"></span><br>
                                <span data-in-place-edit
                                      data-ipe-key="'country'"
                                      data-ipe-value="client.client.country"
                                      data-api-name="'client'"
                                      data-api-id="client.client.id"
                                      data-ipe-name="'clients.country'|translate"></span>
                                    </address>
                                </div>
                            </div>
                            <div class="row detail-block">
                                <div class="col-sm-2 col-md-1">
                                    <h3 class="sidelabel"><i class="md md-mail"></i></h3>
                                </div>
                                <div class="col-sm-10 col-md-11">
                                    <div class="listinfo-row detail-value" data-ng-repeat="mail in client.client.data.mail">
                                        <div class="row">
                                            <div class="col-sm-9 col-md-10">
                                            <span data-in-place-edit
                                                  data-ipe-key="'value'"
                                                  data-ipe-value="mail.value"
                                                  data-api-name="'client_data'"
                                                  data-api-id="mail.id"
                                                  data-deletable-item="client.connectionDeleted"
                                                  data-ipe-name="'clients.mailAddress'|translate"></span> <span class="varcheck" data-ng-class="{true: 'var-is-true', false: 'var-is-false'}[mail.isdefault == 1]">
                                                                                                        <button class="varcheck-if-true btn btn-info btn-link btn-icon-round" disabled title="{{'clients.defaultMailAddress' | translate}}">
                                                                                                            <i class="md md-star"></i>
                                                                                                        </button>
                                                                                                        <button class="varcheck-if-false btn btn-link btn-icon-round"
                                                                                                                data-ng-click="client.makeMailDefault(mail.id)"
                                                                                                                title="{{'clients.setDefaultMailAddress' | translate}}"
                                                                                                                data-ng-class="{'btn-info':hover}"
                                                                                                                data-ng-mouseenter="hover = true"
                                                                                                                data-ng-mouseleave="hover = false">
                                                                                                            <i class="md" data-ng-class="{'md-star':hover,'md-star-outline':!hover}"></i>
                                                                                                        </button>
                                                                                                    </span><br />
                                            <span class="less-important" data-in-place-edit
                                                  data-ipe-key="'name'"
                                                  data-ipe-value="mail.name"
                                                  data-api-name="'client_data'"
                                                  data-api-id="mail.id"
                                                  data-deletable-item="client.connectionDeleted"
                                                  data-ipe-name="'clients.mail'|translate"></span>
                                            </div>
                                            <div class="col-sm-3 col-md-2">
                                                <a class="listinfo-action listinfo-action-icon listinfo-action-success"  title="{{'clients.sendMail' | translate}}" href="mailto:{{mail.value}}">
                                                    <i class="md md-mail"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row varcheck newentry" data-ng-class="{true: 'var-is-true', false: 'var-is-false'}[client.newConnectionFlag.mail]">
                                        <div class="col-sm-12 varcheck-if-false">
                                            <span class="btn btn-link btn-success" data-ng-click="client.setNewConnectionFlag('mail')" ><i class="md md-add"></i> {{'clients.addEmail'|translate}}</span>
                                        </div>
                                        <form class="varcheck-if-true" data-ng-submit="client.addConnection('mail')">
                                            <div class="col-sm-4 ">
                                                <div data-material-input
                                                     data-ng-model="client.newConnection.mail.name"
                                                     data-input-id="mail-name"
                                                     data-input-label="{{'global.name' |translate}}"
                                                     data-input-type="text"></div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div data-material-input
                                                     data-ng-model="client.newConnection.mail.value"
                                                     data-input-id="mail-value"
                                                     data-input-label="{{'clients.mail' |translate}}"
                                                     data-input-type="text"
                                                     data-input-required="true"></div>
                                            </div>
                                            <div class="col-sm-2">
                                                <button class="btn btn-icon-round btn-link btn-success" type="submit"><i class="md md-check"></i></button>
                                                <button class="btn btn-icon-round btn-link btn-warning" data-ng-click="client.setNewConnectionFlag('mail')" type="button"><i class="md md-close"></i></button>
                                            </div>
                                        </form>
                                    </div>

                                </div>
                            </div>
                            <div class="row detail-block">
                                <div class="col-sm-2 col-md-1">
                                    <h3 class="sidelabel"><i class="md md-phone"></i></h3>
                                </div>
                                <div class="col-sm-10 col-md-11">
                                    <div class="listinfo-row detail-value" data-ng-repeat="phone in client.client.data.phone">
                                        <div class="row">
                                            <div class="col-sm-9 col-md-10">
                                            <span data-in-place-edit
                                                  data-ipe-key="'value'"
                                                  data-ipe-value="phone.value"
                                                  data-api-name="'client_data'"
                                                  data-api-id="phone.id"
                                                  data-deletable-item="client.connectionDeleted"
                                                  data-ipe-name="'clients.phoneNumber'|translate"></span><br />
                                            <span class="less-important" data-in-place-edit
                                                  data-ipe-key="'name'"
                                                  data-ipe-value="phone.name"
                                                  data-api-name="'client_data'"
                                                  data-api-id="phone.id"
                                                  data-deletable-item="client.connectionDeleted"
                                                  data-ipe-name="'clients.phone'|translate"></span>
                                            </div>
                                            <div class="col-sm-3 col-md-2">
                                                <a class="listinfo-action listinfo-action-icon listinfo-action-success"  title="{{'clients.call' | translate}}" href="tel:{{phone.value}}">
                                                    <i class="md md-call"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row varcheck newentry" data-ng-class="{true: 'var-is-true', false: 'var-is-false'}[client.newConnectionFlag.phone]">
                                        <div class="col-sm-12 varcheck-if-false">
                                            <span class="btn btn-link btn-success" data-ng-click="client.setNewConnectionFlag('phone')" ><i class="md md-add"></i> {{'clients.addPhone' | translate}}</span>
                                        </div>
                                        <form class="varcheck-if-true" data-ng-submit="client.addConnection('phone')">
                                            <div class="col-sm-4 ">
                                                <div data-material-input
                                                     data-ng-model="client.newConnection.phone.name"
                                                     data-input-id="phone-name"
                                                     data-input-label="{{'global.name' |translate}}"
                                                     data-input-type="text"></div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div data-material-input
                                                     data-ng-model="client.newConnection.phone.value"
                                                     data-input-id="phone-value"
                                                     data-input-label="{{'clients.phone' |translate}}"
                                                     data-input-type="text"
                                                     data-input-required="true"></div>
                                            </div>
                                            <div class="col-sm-2">
                                                <button class="btn btn-icon-round btn-link btn-success" type="submit"><i class="md md-check"></i></button>
                                                <button class="btn btn-icon-round btn-link btn-warning" data-ng-click="client.setNewConnectionFlag('phone')" type="button"><i class="md md-close"></i></button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <div class="row detail-block">
                                <div class="col-sm-2 col-md-1">
                                    <h3 class="sidelabel"><i class="md md-print"></i></h3>
                                </div>
                                <div class="col-sm-10 col-md-11">
                                    <div class="detail-value listinfo-row" data-ng-repeat="fax in client.client.data.fax">
                                        <div class="row">
                                            <div class="col-sm-12">
                                            <span data-in-place-edit
                                                  data-ipe-key="'value'"
                                                  data-ipe-value="fax.value"
                                                  data-api-name="'client_data'"
                                                  data-api-id="fax.id"
                                                  data-deletable-item="client.connectionDeleted"
                                                  data-ipe-name="'clients.faxNumber'|translate"></span><br /><span class="less-important" data-in-place-edit
                                                                                                                   data-ipe-key="'name'"
                                                                                                                   data-ipe-value="fax.name"
                                                                                                                   data-api-name="'client_data'"
                                                                                                                   data-api-id="fax.id"
                                                                                                                   data-deletable-item="client.connectionDeleted"
                                                                                                                   data-ipe-name="'clients.fax'|translate"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row varcheck newentry" data-ng-class="{true: 'var-is-true', false: 'var-is-false'}[client.newConnectionFlag.fax]">
                                        <div class="col-sm-12 varcheck-if-false">
                                            <span class="btn btn-link btn-success" data-ng-click="client.setNewConnectionFlag('fax')" ><i class="md md-add"></i> {{'clients.addFax' | translate}}</span>
                                        </div>
                                        <form class="varcheck-if-true" data-ng-submit="client.addConnection('fax')">
                                            <div class="col-sm-4 ">
                                                <div data-material-input
                                                     data-ng-model="client.newConnection.fax.name"
                                                     data-input-id="fax-name"
                                                     data-input-label="{{'global.name' |translate}}"
                                                     data-input-type="text"></div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div data-material-input
                                                     data-ng-model="client.newConnection.fax.value"
                                                     data-input-id="fax-value"
                                                     data-input-label="{{'clients.fax' |translate}}"
                                                     data-input-type="text"
                                                     data-input-required="true"></div>
                                            </div>
                                            <div class="col-sm-2">
                                                <button class="btn btn-icon-round btn-link btn-success" type="submit"><i class="md md-check"></i></button>
                                                <button class="btn btn-icon-round btn-link btn-warning" data-ng-click="client.setNewConnectionFlag('fax')" type="button"><i class="md md-close"></i></button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-sm-10 col-sm-offset-2 col-md-11 col-md-offset-1">
                                    <div class="tile tile-autoheight">
                                        <div class="tile-inner">
                                            <div class="row">
                                                <div class="col-xs-3">
                                                    <i class="md md-attach-money md-5x pricetile-icon"></i>
                                                </div>
                                                <div class="col-xs-9">
                                                    <p class="text-right pricetile-text">
                                                <span class="pricetile-price" data-in-place-edit
                                                      data-ipe-key="'hourlyrate'"
                                                      data-ipe-value="client.client.hourlyrate"
                                                      data-api-name="'client'"
                                                      data-api-id="client.client.id"
                                                      data-ipe-type="'price'"
                                                      data-ipe-name="'clients.defaultHourlyrate'|translate"
                                                      data-output-value="client.client.hourlyrate|price"></span><br />
                                                        /{{'global.hour'|translate}}

                                                    </p>
                                                    <p class="text-right pricetile-text">
                                            <span class="pricetile-price" data-in-place-edit
                                                  data-ipe-key="'dailyrate'"
                                                  data-ipe-value="client.client.dailyrate"
                                                  data-api-name="'client'"
                                                  data-api-id="client.client.id"
                                                  data-ipe-type="'price'"
                                                  data-ipe-name="'clients.defaultDailyrate'|translate"
                                                  data-output-value="client.client.dailyrate|price"></span><br />
                                                        /{{'global.day'|translate}}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row detail-block">
                                <div class="col-sm-2 col-md-1"><h3 class="sidelabel">#</h3></div>
                                <div class="col-sm-10 col-md-11">
                                    <div class="detail-value">
                                    <span data-in-place-edit
                                          data-ipe-key="'refnumber'"
                                          data-ipe-value="client.client.refnumber"
                                          data-ipe-deletable="false"
                                          data-api-id="client.client.id"
                                          data-api-name="'client'"
                                          data-ipe-name="'clients.refnumber'|translate"></span>
                                    </div>
                                </div>
                            </div>



                            <div class="row detail-block">
                                <div class="col-sm-2 col-md-1">
                                    <h3 class="sidelabel"><i class="md md-comment"></i></h3>
                                </div>
                                <div class="col-sm-10 col-md-11">
                                    <div class="detail-value">
                            <span data-in-place-edit
                                  data-ipe-key="'comment'"
                                  data-ipe-value="client.client.comment"
                                  data-ipe-type="'wysiwyg'"
                                  data-api-name="'client'"
                                  data-api-id="client.client.id"
                                  data-ipe-name="'clients.comment'|translate"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row detail-block">
                                <div class="col-sm-2 col-md-1">
                                    <h3 class="sidelabel"><i class="md md-link"></i></h3>
                                </div>
                                <div class="col-sm-10 col-md-11">
                                    <div class="detail-value">
                                        <div class="chip" data-ng-repeat="(catid, cat) in client.client.categories">
                                            <a data-ng-click="MasterDetailCtrl.filterText = cat">{{cat}}</a> <button class="btn btn-link btn-icon-round" data-ng-click="client.removeCategory(catid)"><i class="md-close"></i></button>
                                        </div>
                                        <div class="chip" data-ng-click="console.log('argh'); client.openCategoryModal()">
                                            <span >{{'category.add'|translate}}</span> <button class="btn btn-link btn-icon-round" ><i class="md-add"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                <div class="slideanim-item fullheight scroll-y">
                    <div class="row">
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <a class="tile tile-disabled" data-ng-click="client.showPage = 3">
                                <i class="tile-icon tile-icon-add"></i>
                                <h4 class="tile-heading">{{'projects.new'|translate}}</h4>
                                <p class="tile-text">
                                    <span data-ng-hide="client.projects.length > 0">{{'projects.none' | translate }}</span>
                                </p>
                            </a>
                        </div>
                        <div data-ng-repeat="project in client.projects" class="col-md-4 col-sm-6 col-xs-12">
                            <a class="tile" data-ui-sref="app.projectDetail({id:{{project.id}}})">
                                <span class="tile-total"
                                      data-ng-if="project.stats.totalProjectWorth > 0"
                                      data-ng-class="{overdue: project.stats.overdue > 0}">
                                            {{ project.stats.totalProjectWorth | price}}
                                </span>
                                <i class="tile-icon tile-icon-{{project.state}}"></i>
                                <h4 class="tile-heading">{{project.name}}</h4>
                                <p class="tile-text">{{project.description}}</p>
                            </a>
                        </div>
                    </div>

                </div>


                <div class="slideanim-item fullheight scroll-y">
                    <h3>{{'projects.actions.new'|translate}}:</h3>
                    <form data-ng-submit="client.addProject()">
                        <div data-material-input
                             data-input-label="{{'global.name'|translate}}"
                             data-ng-model="client.newProject.name"
                             data-input-id="name"
                             data-input-type="text"></div>
                        <div data-material-input
                             data-input-label="{{'global.description'|translate}}"
                             data-ng-model="client.newProject.description"
                             data-input-id="description"
                             data-input-type="textarea"></div>
                        <button class="btn btn-success pull-right" type="submit">{{'projects.actions.new'|translate}}</button>
                    </form>
                </div>


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


</div>