1<div class="container">
  2    <div class="row">
  3        <div class="col-sm-4">
  4            <div ng-repeat="travel in travels">
  5                <div class="card">
  6                    <div class="card-body" style="color:#ffffff; background-image: url('img/userProfileBackground.png');">
  7                        <div class="pull-right">{{travel.date | date}}</div>
  8                        <h4 class="card-title"><b>{{travel.title}}</b></h4>
  9                    </div>
 10                    <div class="card-body">
 11                        <div class="pull-right">
 12                            <a ng-href="#!/user/{{travel.user._id}}">
 13                                <img class="circle" style="max-width: 30px; max-height:30px;" ng-src="{{travel.user.avatar}}" />
 14                                {{travel.user.username}}
 15                            </a>
 16                        </div>
 17                        <p>
 18                            From: <b>{{travel.from.name}}</b>
 19                        </p>
 20                        <p>
 21                            To: <b>{{travel.to.name}}</b>
 22                        </p>
 23                        <p>
 24                            {{travel.joins.length}}/{{travel.seats}}
 25                        </p>
 26                        <p ng-show="travel.package">
 27                            Can transport package
 28                        </p>
 29                        <a href="#" class="card-link">Go somewhere</a>
 30                    </div>
 31                </div>
 32                <br><br>
 33            </div>
 34            <div ng-repeat="travel in travels">
 35                <div class="card">
 36                    <img class="card-img-top" src="..." alt="Card image cap">
 37                    <div class="card-body">
 38                        <h4 class="card-title">Card title</h4>
 39                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 40                        <a href="#" class="btn btn-primary">Go somewhere</a>
 41                    </div>
 42                </div>
 43                <br><br>
 44            </div>
 45        </div>
 46        <div class="col-sm-4">
 47            <div class="panel">
 48                <div class="panel-heading c_deepPurpleG500to300">
 49                    <h3 class="panel-title">
 50                        Travels Feed
 51                        <span class="badge badge-secondary pull-right c_deepPurpleG500to300">{{travels.length}}</span>
 52                    </h3>
 53                </div>
 54                <div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
 55                    <table class="table table-striped table-hover ">
 56                        <thead>
 57                            <tr>
 58                                <th>Type</th>
 59                                <th>Title</th>
 60                                <th>From</th>
 61                                <th>To</th>
 62                                <th>Date</th>
 63                                <th>User</th>
 64                                <th>nºJoins/Seats</th>
 65                                <th></th>
 66                            </tr>
 67                        </thead>
 68                        <tbody>
 69                            <tr ng-repeat="travel in travels">
 70                                <a ng-href="#!/travel/{{travel._id}}">
 71                                    <td>
 72                                        <i ng-show="travel.type=='offering'" title="offering" class="fa fa-car fa-2x"></i>
 73                                        <i ng-show="travel.type=='asking'" title="asking" class="fa fa-question fa-2x"></i>
 74                                        <i ng-show="travel.type=='package'" title="package" class="fa fa-archive fa-2x"></i>
 75                                    </td>
 76                                    <td>{{travel.title}}</td>
 77                                    <td>
 78                                        <b>{{travel.from.name}}</b>
 79                                    </td>
 80                                    <td>
 81                                        <b>{{travel.to.name}}</b>
 82                                    </td>
 83                                    <td>{{travel.date | date}}</td>
 84                                    <td>
 85                                        <a ng-href="#!/user/{{travel.user._id}}">
 86                                            <img class="circle" style="max-width: 30px; max-height:30px;" ng-src="{{travel.user.avatar}}" />
 87                                            {{travel.user.username}}
 88                                        </a>
 89                                    </td>
 90                                    <td>{{travel.joins.length}}/{{travel.seats}}</td>
 91                                    <td><a ng-href="#!/travel/{{travel._id}}">View</a></td>
 92                                </a>
 93                            </tr>
 94                        </tbody>
 95                    </table>
 96                </div>
 97            </div>
 98        </div>
 99        <div class="col-sm-2">
100            <div class="panel">
101                <div class="panel-heading c_deepPurpleG500to300">
102                    <h3 class="panel-title">Actions</h3>
103                </div>
104                <div class="panel-body">
105                    <div class="btn btn-block btn-sm c_green300">Create user</div>
106                    <div class="btn btn-block btn-sm c_blue300">Create travel</div>
107                    <a href="#!/network" class="btn btn-block btn-sm c_deepPurpleG500to300">View network</a>
108                </div>
109            </div>
110        </div>
111    </div>
112</div>