<ion-view view-title="Options" hide-nav-bar="true">
    <ion-content>
        <ion-refresher
            pulling-text="Obnoviť..."
            on-refresh="vm.doRefresh()"
            spinner="ripple">
        </ion-refresher>
            <div class="newNotif fadein fadeout" ng-if="vm.newNotif" ng-click="vm.newNotif = false">
            <p>Máte nové upozornenie</p>
        </div>
        <div class="userInfo">
            <div class="carPhoto">
                <img ng-src="{{vm.currentUser.details.photo|| 'img/user.png'}}" ng-click="vm.uploadPhoto()" />
            </div>
            <div class="description">
                <h3>{{vm.currentUser.details.email}}</h3>
                <h4>{{vm.currentUser.details.userType === "driver" ? "vodič" : "užívateľ"}} 
                    ({{(vm.currentUser.details.userType === "driver" ? vm.car.evidenceNumber : vm.currentUser.details.username) || "error"}})</h4>
            </div>
        </div>
        <div class="statistics">
            <div>
                <h3><i class="ion ion-heart"></i> {{vm.currentUser.details.trust}}</h3>
                <h3><i class="ion ion-arrow-swap"></i> {{vm.myActivity.activity}}</h3>
                <h3><i class="ion ion-plus-round"></i> 60 Kč</h3>
                <h3><i class="ion ion-minus-round"></i> 20 Kč</h3>
            </div>
        </div>
        <h5>NASTAVENIA APLIKÁCIE</h5>
        <ul class="list options">
            <li class="item item-toggle item-icon-left">
                  <i class="icon ion-email"></i>
                Emailové upozornenia
                <br><span ng-if="vm.currentUser.details.userType === 'user'">Určené len pre vodičov.</span>
                <label class="toggle toggle-assertive">
                    <input type="checkbox" ng-model="vm.currentUser.details.emailNotifications" ng-change="vm.emailSetting()" ng-disabled="vm.emailSettingError || vm.currentUser.details.userType === 'user'">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </li>
            <li class="item item-toggle item-icon-left">
                  <i class="icon ion-wand"></i>
                  Push upozornenia <br><span>Nie je zatiaľ k dispozícii.</span>
                <label class="toggle toggle-assertive">
                    <input type="checkbox" ng-disabled="disabled" ng-init="disabled = true">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </li>
            <button class="button button-full button-light signoutButton" ng-click="vm.signout()">
                <i class="icon ion-power"></i> Odhlásiť sa
            </button>
        </ul>

        <h5>VAŠE POSLEDNÉ HLÁSENIA</h5>
            <div class="notifications-container">
                <ion-list can-swipe="false">
                    <ion-item ng-repeat="not in vm.myActivity.nots" ng-click="vm.showInfo(not)">
                        <div class="row">
                            <div class="col col-52">
                                <h2>{{not.situation}}</h2>
                                <p class="kurziva">{{(not.message| limitTo: 30)}}{{not.message.length > 30 ? '...' : ''}}</p>
                                <label>
                                    {{not.datetime| date : "d.M.yy HH:mm"}}
                                </label>
                            </div>
                            <div class="col col-15">
                                <i class="icon ion-eye" 
                                   ng-class="!not.seen ? 'done' : {}"
                                   ></i> 
                            </div>
                            <div class="col col-15">
                                <i class="icon ion-thumbsup" ng-class="!not.thanked ? 'done' : {}"></i>
                            </div>
                            <div class="col col-15">
                                <i class="icon ion-help-circled done" ng-if="not.rated === ''"></i>
                                <i class="icon ion-checkmark-circled" ng-if="not.rated === 'real'"></i>
                                <i class="icon ion-close-circled" ng-if="not.rated === 'fake'"></i>
                            </div> 
                            <div class="col col-15">
                                <i class="icon ion-shuffle" ng-class="not.type === '1' ? 'done' : {}"></i> 
                            </div>
                            <div class="col col-15">
                                <i class="icon ion-cash done"></i> 
                            </div>
                        </div>
                    </ion-item>
                </ion-list>
                <p ng-click="vm.loadMore()" class="loadMore" ng-if="vm.myActivity.nots.length !== 0">
                    {{vm.loadedDataStatus}} <ion-spinner icon="ripple" ng-if="vm.dataLoading"></ion-spinner>
                </p>
                <p class="loadMore" ng-if="vm.myActivity.nots.length === 0">
                    Zatiaľ ste nikoho neinformovali. Zmeňte to!
                </p>
            </div>
    </ion-content>
</ion-view>
