<!DOCTYPE html>
<html ng-app="MyApp">

<head>
    <title>Emitovanje eventa</title>
    <script src="../libs/angular-1.2.29/angular.min.js"></script>
    <script src="../libs/angular-route-1.2.29/angular-route.min.js"></script>
    <script src="./app.js"></script>

    <link rel="stylesheet" href="../libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>

<body>

    <div class="row">

        <div class="left-col" class="page-list" ng-controller="ListCtrl">
            <a href="" ng-repeat="user in users track by user.id" ng-mouseenter="selectUser(user)" class="user-listing">
                {{user.first_name}} {{user.last_name}}
            </a>
        </div>

        <div class="right-col" class="page-details" ng-controller="DetailCtrl">

            <div ng-if="!currentUser" class="panel">
                <p>You have
                    <strong>not selected an employee</strong>
                </p>
            </div>

            <div ng-if="currentUser" class="panel row">
                <img ng-src="img/{{currentUser.picture}}" class="col-md-4" />
                <div class="col-md-8">
                    <p>
                        <strong>Name: </strong> {{currentUser.first_name}} {{currentUser.last_name}}</p>
                    <p>
                        <strong>Email: </strong> {{currentUser.email}}</p>
                    <p>
                        <strong>Company: </strong> {{currentUser.company}}</p>
                </div>
            </div>
        </div>

    </div>

</body>
</html>
