1<div class="container">
  2    <div class="row">
  3        <div class="col-sm-4">
  4            <div class="panel">
  5                <div class="panel-heading c_deepPurple300">
  6                    <h3 class="panel-title">{{travel.title}}</h3>
  7                </div>
  8                <div class="panel-body">
  9                    <div class="list-group">
 10                        <a ng-href="#!/user/{{user._id}}" class="list-group-item">
 11                            <div class="row-picture">
 12                                <img class="circle" ng-src="{{travel.user.avatar}}" alt="icon">
 13                            </div>
 14                            <div class="row-content">
 15                                <h4 class="list-group-item-heading">{{travel.user.username}}</h4>
 16
 17                                <p class="list-group-item-text">@{{travel.user.telegram}}</p>
 18                                <p class="list-group-item-text">{{travel.user.phone}}</p>
 19                            </div>
 20                            <div class="list-group-separator"></div>
 21                        </a>
 22                    </div>
 23                    <p>
 24                        From: <b>{{travel.from.name}}</b>
 25                    </p>
 26                    <p>
 27                        To: <b>{{travel.from.name}}</b>
 28                    </p>
 29                    <p ng-show="travel.package">
 30                        Can transport package
 31                    </p>
 32                </div>
 33            </div>
 34            <div class="panel">
 35                <div class="panel-heading c_deepPurple300">
 36                    <h3 class="panel-title">Map</h3>
 37                </div>
 38                <div class="panel-body">
 39                    <leaflet width="100%" height="300px" markers="markers" center="center"
 40                    tiles="tiles" id="map-simple-map"></leaflet>
 41                </div>
 42            </div>
 43        </div>
 44        <div class="col-sm-3">
 45            <div class="panel">
 46                <div class="panel-heading c_deepPurple300">
 47                    <h3 class="panel-title">{{travel.joinPetitions.length}} Pendent joins</h3>
 48                </div>
 49                <div class="panel-body">
 50                    <div class="list-group">
 51                        <a ng-repeat="user in travel.joinPetitions" ng-href="#!/user/{{user._id}}" class="list-group-item">
 52                            <div class="row-picture">
 53                                <img class="circle" ng-src="{{user.avatar}}" alt="icon">
 54                            </div>
 55                            <div class="row-content">
 56                                <h4 class="list-group-item-heading">{{user.username}}</h4>
 57
 58                                <p class="list-group-item-text">{{user.description}}</p>
 59                            </div>
 60                            <div class="list-group-separator"></div>
 61                        </a>
 62                    </div>
 63                </div>
 64            </div>
 65        </div>
 66
 67        <div class="col-sm-3">
 68            <div class="panel">
 69                <div class="panel-heading c_deepPurple300">
 70                    <h3 class="panel-title">Accepted users {{travel.joins.length}}/{{travel.seats}}</h3>
 71                </div>
 72                <div class="panel-body">
 73                    <div class="list-group">
 74                        <a ng-repeat="user in travel.joins" ng-href="#!/user/{{user._id}}" class="list-group-item">
 75                            <div class="row-picture">
 76                                <img class="circle" ng-src="{{user.avatar}}" alt="icon">
 77                            </div>
 78                            <div class="row-content">
 79                                <h4 class="list-group-item-heading">{{user.username}}</h4>
 80
 81                                <p class="list-group-item-text">{{user.description}}</p>
 82                            </div>
 83                            <div class="list-group-separator"></div>
 84                        </a>
 85                    </div>
 86                </div>
 87            </div>
 88        </div>
 89
 90        <div class="col-sm-2">
 91            <div class="panel">
 92                <div class="panel-heading c_deepPurple500">
 93                    <h3 class="panel-title">Admin actions</h3>
 94                </div>
 95                <div class="panel-body">
 96                    <div class="btn btn-block btn-sm c_orange300">Ban travel</div>
 97                    <div class="btn btn-block btn-sm c_red300">Delete travel</div>
 98                </div>
 99            </div>
100        </div>
101    </div>