let carsComponent = {
    bindings: {
        profile: '<'
    },
    controller: function ($state, CarsService) {
        let $ctrl = this;

        $ctrl._$state = $state;
        $ctrl.CarsService = CarsService;

        $ctrl.getCarPic = function (carId) {
          return this.CarsService
              .getCarPicture(carId)
              .then((res) => {
                  let img = btoa(String.fromCharCode.apply(null, new Uint8Array(res)));
                  document.querySelector(`#car_${carId}`).src = `data:image/jpeg;base64,${img}`;
              }, err => console.log(err));
        };

        $ctrl.deleteCar = function (id) {
            let val = confirm('Are you sure you want to delete the car?');
            if (val) {
                return $ctrl.CarsService
                    .deleteCar(id)
                    .then(res => $ctrl._$state.reload(), err => console.log(err));
            }
        }
    },
    template: `
        <div class="profile-block">
            <div class="header">Cars</div>
            <div class="car-block" ng-repeat="car in $ctrl.profile.Cars">
                <img src="" ng-init="$ctrl.getCarPic(car.CarId)" ng-attr-id="{{'car_' + car.CarId}}" class="img-responsive">
                <div class="block-part">
                    <div class="name"><p>{{car.CarMakeEntity.Make}} {{car.CarModelEntity.Model}}</p></div>
                    <div class="property"><p>Number of seats: {{car.Seats}}</p></div>
                    <div class="property">
                        Color: <div class="car-color" ng-style="{'background': car.Color}"></div>
                    </div>
                    <div uib-dropdown dropdown-append-to-body>
                        <i class="fa fa-ellipsis-v" aria-hidden="true" uib-dropdown-toggle="" id={{car.CarId}}></i>
                        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby={{car.CarId}}>
                            <li role="menuitem">
                                <a href="#">Edit</a>
                            </li>
                            <li role="menuitem">
                                <a href="#" ng-click="$ctrl.deleteCar(car.CarId)">Delete</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div>
                <a ui-sref="addCar">
                    <i class="fa fa-plus-circle ico-add" aria-hidden="true"></i> <span class="add">Add Car</span>
                </a>
            </div>
        </div>
    `
};

export default carsComponent;