<template>
    <require from="./tenant-picker"></require>
    <require from="../../valueConverters/date-time-format"></require>
    <section id="start-survey">
        <div>
            <loading-page show.bind="loadingPage"></loading-page>
            <saving-data show.bind="savingData"></saving-data>
            <div class="container-fluid" show.bind="!loadingPage">
                <div class="row">
                    <div class="col-xs-12 hidden-sm hidden-md hidden-lg survey-navigation-bar-top">
                        <div class="centered-text">
                            <div click.delegate="navigateToSurveys()" class="pull-left navigation-link"><i class="fa fa-chevron-left"></i><span> Välj objekt</span></div>
                            <div class="survey-navigation-bar-header"><span class="header-text header-center">Närvaro</span></div>
                        </div>
                    </div>
                </div>
                <div class="row main-panel">
                    <div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
                        <h2>Närvaro</h2>
                        <dl>
                            <dt>
                                <span class="header-text">${surveyModel.name}, Lgh ${surveyModel.apartmentNumber}</span>
                            </dt>
                            <dd>
                                <div class="regular-text">
                                    <span>${surveyModel.address.streetAddress} ${surveyModel.address.streetNumber}</span><br>
                                    <span>${surveyModel.address.postalCode} ${surveyModel.address.city}</span>
                                </div>
                            </dd>
                        </dl>
                        <dl>
                            <dt>Specifikationer:</dt>
                            <dd>
                                <span>${surveyModel.rentalPropertyType}</span>
                            </dd>
                        </dl>
                        <dl>
                            <dt>Hyresgäster:</dt>
                            <dd>
                                <div repeat.for="tenant of surveyModel.tenants">
                                    <span>${tenant.firstName} ${tenant.surName}</span>
                                </div>
                            </dd>
                        </dl>
                        <dl>
                            <dt>Tid:</dt>
                            <dd>
                                <span>${surveyModel.surveyedAt | dateTimeFormat}</span>
                            </dd>
                        </dl>
                        <hr/>
                        <div>
                            <tenant-picker  header-text.bind="'Representant för avflyttande hyresgäst'"
                                            tenants.bind="surveyModel.oldRentalAgreement.tenants"
                                            avflyttande.bind="false"
                                            tenant-id.bind="oldPresentTenantId">
                            </tenant-picker>
                            <!--<div class="hogia-checkbox checkbox checkbox-primary checkbox-inline">
                                <input type="checkbox" id="checkbox2" change.delegate="setPresent()">
                                <label class="checkbox-label" for="checkbox2">Närvarande</label>
                            </div>-->
                        </div>
                        <dl>
                            <dt class="header-text">Representant för avflyttande hyresgäst</dt>
                            <dt>Namn:</dt>
                            <dd>
                                <input class="form-control" type="text" placeholder="Skriv representant här" disabled.bind="Present">
                            </dd>
                        </dl>
                        <div if.bind="showNewTenants">
                            <tenant-picker  header-text.bind="'Representant för inflyttande hyresgäst'"
                                            tenants.bind="surveyModel.newRentalAgreement.tenants"
                                            tenant-id.bind="newPresentTenantId">
                            </tenant-picker>
                        </div>
                        <hr>
                        <dl>
                            <dt class="header-text">Kommentera informationen</dt>
                            <dd>
                                <input class="form-control" type="text" value.bind="surveyModel.comment" placeholder="Skriv här">
                            </dd>
                        </dl>
                        <div>
                            <button class="btn btn-primary" click.delegate="startTheSurvey()" disabled.bind="!canStartSurvey">Starta besiktning</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>