1<div class="container">
 2    <div class="row">
 3        <div class="col-sm-4">
 4            <div ng-include="'views/travelCardTemplate.html'"></div>
 5            <br>
 6            <div class="panel">
 7                <div class="panel-heading c_deepPurpleG500to300">
 8                    <h3 class="panel-title">Actions</h3>
 9                </div>
10                <div class="panel-body">
11                    <p class='text-right'>
12                        <div ng-show="userHasJoined(travel.joinPetitions, storageuser._id)==-1">
13                            <div ng-show="userHasJoined(travel.joins, storageuser._id)==-1">
14                                <a ng-show="travel.type=='offering'" ng-click="joinTravel()" class="btn btn-raised c_deepPurple300">Ask to join</a>
15                                <a ng-show="travel.type=='asking'" ng-click="joinTravel()" class="btn btn-raised c_deepPurple300">Offer car</a>
16                                <a ng-show="travel.type=='package'" ng-click="joinTravel()" class="btn btn-raised c_deepPurple300">Offer car</a>
17                            </div>
18                        </div>
19
20                        <div ng-show="userHasJoined(travel.joinPetitions, storageuser._id)>-1">
21                            <a ng-show="travel.type=='offering'" ng-click="unjoinTravel()" class="btn btn-raised c_red300">Unjoin</a>
22                            <a ng-show="travel.type=='asking'" ng-click="unjoinTravel()" class="btn btn-raised c_red300">Unoffer car</a>
23                            <a ng-show="travel.type=='package'" ng-click="unjoinTravel()" class="btn btn-raised c_red300">Unoffer car</a>
24                        </div>
25
26                        <div ng-show="userHasJoined(travel.joins, storageuser._id)>-1">
27                            You are in this travel!
28                            <a ng-show="travel.type=='offering'" ng-click="leaveTravel()" class="btn btn-raised c_red300">Leave</a>
29                        </div>
30                    </p>
31                </div>
32            </div>
33            <br>
34            <div class="panel">
35                <div class="panel-heading c_deepPurpleG500to300">
36                    <h3 class="panel-title">{{travel.joinPetitions.length}} Pendent joins</h3>
37                </div>
38                <div class="panel-body">
39                    <div class="list-group">
40                        <a ng-repeat="user in travel.joinPetitions" ng-href="#!/user/{{user._id}}" class="list-group-item">
41                            <div class="row-picture">
42                                <img class="circle" ng-src="{{user.avatar}}" alt="icon">
43                            </div>
44                            <div class="row-content">
45                                <h4 class="list-group-item-heading">{{user.username}}</h4>
46
47                                <p class="list-group-item-text">{{user.description}}</p>
48                            </div>
49                            <div class="list-group-separator"></div>
50                        </a>
51                    </div>
52                </div>
53            </div>
54            <div class="panel">
55                <div class="panel-heading c_deepPurpleG500to300">
56                    <h3 class="panel-title">Accepted users {{travel.joins.length}}/{{travel.seats}}</h3>
57                </div>
58                <div class="panel-body">
59                    <div class="list-group">
60                        <a ng-repeat="user in travel.joins" ng-href="#!/user/{{user._id}}" class="list-group-item">
61                            <div class="row-picture">
62                                <img class="circle" ng-src="{{user.avatar}}" alt="icon">
63                            </div>
64                            <div class="row-content">
65                                <h4 class="list-group-item-heading">{{user.username}}</h4>
66
67                                <p class="list-group-item-text">{{user.description}}</p>
68                            </div>
69                            <div class="list-group-separator"></div>
70                        </a>
71                    </div>
72                </div>
73            </div>
74        </div>
75        <div class="col-sm-8">
76            <div class="panel">
77                <div class="panel-heading c_deepPurpleG500to300">
78                    <h3 class="panel-title">Map</h3>
79                </div>
80                <div class="panel-body">
81                    <leaflet width="100%" height="500px" markers="markers" center="center" tiles="tiles" id="map-simple-map"></leaflet>
82                </div>
83            </div>
84        </div>
85
86    </div>